詳しいプロフィールはこちら>>>

CocoonにTwitterタイムラインがあるとき〜!

某全国紙新聞社でスポーツ記者として、オリンピックやプロ野球、Jリーグなどを担当してきた、とちです。真面目にかるく、わかりやすくが執筆信条。現在は編集者として、日々のスポーツ紙の制作をしています。

CocoonにTwitterのタイムラインを表示させたいけど…どうやるんだろ?

そんな悩みを解消します。

結論で言うと3分でできます。

実は当ブログはサイトスピードの観点から1度、Twitterタイムラインを消去しましたが、やっぱり復活!

サイトスピードの実験と結果は、下記の記事で詳しく書いています。

製作者のわいひらさんも、Cocoonサイトで

アドセンス、Analytics、Facebook、Twitter等の外部が読み込まれている場合は、一気に点数がガタ落ちします。外部リソースに起因する点数ダウンは、テーマ側からはどうしようもありません。

と書かれています。

なので本記事では

  1. CocoonにTwitterのタイムラインを貼る方法
  2. Twitterタイムラインを貼ることでのCocoonサイトスピードの変化

の2点を見ていきます。

CocoonにTwitterタイムラインを設定する

CocoonにTwitterタイムラインを設定

Twitter Publishでコード取得

「Twitter Publish」というサイトにアクセスします。

下記の画面で、あなたのTwitterユーザー名を入れます。

Twitterユーザー名とは、プロフィールの名前下にある「@〜」の部分です。

次に表示オプションで、左側の「埋め込みタイムライン」を選択します。

すると、コードが表示されるので「コードをコピー」をクリック。

これで「Twitter Publish」でやることは終わりです。

コードの上にある、「カスタマイズオプションを設定する」に入れば、タイムライン表示の天地や幅、白基調か黒基調かなどが選択できます。※私は今回、天地を400px、幅未入力(自動調整)、白基調に設定しました。

WordPress側でやること

次にWordPressダッシュボードから「外観」→「ウィジェット」を開きます。

「カスタムHTML」から「サイドバー」を選択して「ウィジットを追加」をクリック。

「サイドバー」の中に、「カスタムHTML」が追加されるので、名前を「Twitter」と入力し、内容の中に先ほど取得したコードを貼ってください。

完了を押して終了です。

はい、表示されてますね!

サイドバーのウィジェットの順番は、ドラッグで簡単に入れ替え可能です。

CocoonにTwitterタイムライン→サイトスピードは?

CocoonにTwitterタイムライン→サイトスピードは?

重いと言われるTwitterタイムライン…貼ったあとのサイトスピードは?

Twitterタイムラインを貼る前後で計測

当ブログトップページの、Twitterタイムラインを貼る前のサイトスピードがこちら。

うん、問題ない速度ですね(※PCは95)。

そして、Twitterタイムラインを貼ったあとが、こちら!

むむ…結構落ちた。。。

Twitterタイムラインを貼るメリットを取る

けど「平均」の範囲内!

【PageSpeed Insights】
  • 赤(0〜49)→低速
  • 橙(50〜89)→平均
  • 緑(90〜100)→高速

なので今回は貼ったままにしておきます。

ブログとTwitterの導線をしっかりしておきたいのね

サイトスピードをテーマに書いたCocoon高速化設定してる?【亀ブログじゃ読者が帰る】でも触れたんですが、「PageSpeed Insights」って人間の体調みたいなもんで、計測する時々によって、かなり数値が変動します。

だからぶっちゃけ、あんまり気にすることもないです〜!

CocoonにTwitterタイムラインがあるとき〜:まとめ

CocoonにTwitterタイムラインがあるとき〜:まとめ

サイトスピードは多少落ちましたが、Twitterのタイムライン設置は、そこまで影響しないかなと思います。

ただ、あまりに遅くなるようだとSEO的にもマズイんで、そこは折り合いですね。検索順位のチェックは、無料でも使える検索順位チェックツールGRCが便利です!

悪さをする奴(サイトを重くする奴)はCocoon高速化してる?の記事でこってり書いたんで合わせて読んでみて下さい。

ブログとTwitterは、同じテキスト主体の相性のいいメディアです。

うまく活用して、ブログ↔Twitterのぶっとい導線を作りたいですね。

人気記事【2020年最新】アフィリエイトASPおすすめ7社【悩み無用】

人気記事【最新】Audible(オーディブル)おすすめ本30選【目に休息を】

コメント待ってます!

タイトルとURLをコピーしました