CocoonにTwitterのタイムラインを表示させたいけど…どうやるんだろ？
そんな悩みを解消します。
結論で言うと3分でできます。
実は当ブログはサイトスピードの観点から1度、Twitterタイムラインを消去しましたが、やっぱり復活！
サイトスピードの実験と結果は、下記の記事で詳しく書いています。
製作者のわいひらさんも、Cocoonサイトで
アドセンス、Analytics、Facebook、Twitter等の外部が読み込まれている場合は、一気に点数がガタ落ちします。外部リソースに起因する点数ダウンは、テーマ側からはどうしようもありません。
と書かれています。
なので本記事では
- CocoonにTwitterのタイムラインを貼る方法
- Twitterタイムラインを貼ることでのCocoonサイトスピードの変化
の2点を見ていきます。
CocoonにTwitterタイムラインを設定する
Twitter Publishでコード取得
「Twitter Publish」というサイトにアクセスします。
下記の画面で、あなたのTwitterユーザー名を入れます。
Twitterユーザー名とは、プロフィールの名前下にある「＠〜」の部分です。
次に表示オプションで、左側の「埋め込みタイムライン」を選択します。
すると、コードが表示されるので「コードをコピー」をクリック。
これで「Twitter Publish」でやることは終わりです。
WordPress側でやること
次にWordPressダッシュボードから「外観」→「ウィジェット」を開きます。
「カスタムHTML」から「サイドバー」を選択して「ウィジットを追加」をクリック。
「サイドバー」の中に、「カスタムHTML」が追加されるので、名前を「Twitter」と入力し、内容の中に先ほど取得したコードを貼ってください。
完了を押して終了です。
はい、表示されてますね！
CocoonにTwitterタイムライン→サイトスピードは？
重いと言われるTwitterタイムライン…貼ったあとのサイトスピードは？
Twitterタイムラインを貼る前後で計測
当ブログトップページの、Twitterタイムラインを貼る前のサイトスピードがこちら。
うん、問題ない速度ですね（※PCは95）。
そして、Twitterタイムラインを貼ったあとが、こちら！
むむ…結構落ちた。。。
Twitterタイムラインを貼るメリットを取る
けど「平均」の範囲内！
- 赤（0〜49）→低速
- 橙（50〜89）→平均
- 緑（90〜100）→高速
なので今回は貼ったままにしておきます。
ブログとTwitterの導線をしっかりしておきたいのね
サイトスピードをテーマに書いたCocoon高速化設定してる？【亀ブログじゃ読者が帰る】でも触れたんですが、「PageSpeed Insights」って人間の体調みたいなもんで、計測する時々によって、かなり数値が変動します。
だから正直、あまり気にすることもないです〜！
CocoonにTwitterタイムラインがあるとき〜：まとめ
サイトスピードは多少落ちましたが、Twitterのタイムライン設置は、そこまで影響しないかなと思います。
悪さをする奴（サイトを重くする奴）はCocoon高速化してる？の記事でこってり書いたんで合わせて読んでみて下さい。
ブログとTwitterは、同じテキスト主体の相性のいいメディアです。
うまく活用して、ブログ↔Twitterのぶっとい導線を作りたいですね。