CocoonでTwitterをサイドバーに表示させる設定は約5分

ゼロ
ゼロ

いつもありがとうございます。

青年投資家ゼロ(@investerzero)です。

僕はWordPressの無料テーマCocoonを使ってブログを運営しています。Twitterも頻繁に使っているので、Cocoonのサイドバー(ウィジェット)にTwitterのタイムラインを表示させたいと思って設定しました。具体的には下の画像の右側の部分。

作業時間は初心者の僕でたったの5です。ブログとTwitterを連動させることでシナジー(相互作用)が生まれます。具体的には、Twitterをしていない人でもブログ上でTwitterのタイムラインを確認してもらえるので、Twitterのタイムラインをプロフィールとして活用してもらうことが可能になります。今回は、CocoonのサイドバーにTwitterのタイムラインに表示させる方法をお伝えします!

CocoonでTwitterをサイドバーに表示させる設定

結論からお伝えします。CocoonのサイドバーにTwitterのタイムラインを表示させるには以下の作業が必要です。

CocoonでTwitterをサイドバーに表示させる設定

  • Twitterのタイムライン埋め込み用URLを入手
  • 入手したURLをCocoonに貼り付け

たったこれだけのことです。ただし、一つ注意しないといけないことがあります。それは、「① Twitterのタイムライン埋め込み用URL」を入手するときに、Cocoonのサイドバーに表示させたいTwitterのタイムラインのサイズを指定しないといけないということです。具体的に見てみましょう。

Twitterのタイムライン埋め込み用URLを入手

Twitter Publishにアクセスしましょう。(twitter publish)このような画面が出てきます。

真ん中の「Enter a Twitter URL」と書いてある場所に自分のTwitterのURLを貼り付けます。具体的には、下の画像の通り、Twitterのプロフィール画面のURLです。

Twitterのプロフィール画面のURLは、『https://twitter.com/ツイッターアカウント』がTwitterのアドレスになっていることがわかるので、これを使ってもらっても結構です。

https://twitter.com/アカウント名

アカウント名の箇所には、「@〇〇〇〇」の「@」を除いた部分を記載してください。僕の場合、「@investerzero」なので「investerzero」を上記コードの「アカウント名」の箇所にあてるだけです。

自身のプロフィールURLを貼って次に進むと下の画面に移動します。

左の「Embedded Timeline」をクリックしてください。すると、このような画面に移動します。

注意が必要なポイント

ここが注意するべきポイントです!上記の画面が出てきたら「set customization options」をクリックして、Cocoonのサイドバーに表示させたいTwitterのタイムラインのサイズを指定してください!

ここをクリックせずに、上記の画面に移動してすぐに「Copy Code」を押してしまうと、Twitterでこれまで投稿してきたタイムラインがブログ上で永遠と流れてしまい、Cocoonでキレイに整えたはずのデザインが大きく崩れてしまいます。

「set customization options」をクリックしたら、タイムラインの表示サイズを指定します。オススメは、以下の通りです。ただし、ブログデザインによっては多少の微調整をしてもらった方が良いと思うので、僕のオススメの設定で一度設定してもらって、あとで微調整してください。

Height(px)がCocoonのサイドバーに表示するTwitterタイムラインの高さを示す数字です。ここは「400(px)」にしておいてください。そのほかは変更せずに、「Height(px)」だけ入力したら「Update」をクリックします。

すると先ほどと同じような画面に移動します。ここに表示されているURLは、一見何も変わっていないように見えますが、比較してみると違うことがわかると思います。上がサイズ指定していない場合のURL、下がサイズ指定した場合のURLです。

<a class="twitter-timeline" href="https://twitter.com/investerzero?ref_src=twsrc%5Etfw">Tweets by investerzero</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a class="twitter-timeline" data-height="400" href="https://twitter.com/investerzero?ref_src=twsrc%5Etfw">Tweets by investerzero</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

赤枠の「set customization options」からサイズを指定してから「Copy Code」をクリックします。

そうすると「Copyが完了しました」という表示がされます。

入手したURLをCocoonに貼り付け

先ほど入手したURLは大切なので忘れないようにどこかにメモして保管しておきましょう。次にWordPressのダッシュボードにいきます。「外観」→「ウィジェット」にいきます。

次に、「カスタムHTML」をクリックします。

そのあと、「カスタムHTML」内の「サイドバー 」を選択して、「ウィジェットを追加」をクリックします。

追加したら、先ほど入手したサイズ指定済のTwitterタイムラインのURLを貼り付け保存」をクリックます!

これで全ての作業は完了です!

CocoonでTwitterをサイドバーに表示させる設定完了

とても簡単だったと思います。これらの設定を完了したら、このような表示に変わります。

これで、Twitterのタイムラインをプロフィールとして活用してもらうことが可能になりました。

いかがでしたでしょうか。ブログとTwitterをうまく連携させることで快適なブログライフを過ごしてください。

本記事の編集者

青年投資家ゼロBLOG(@investerzero

中小企業の平凡なサラリーマン(経営企画室所属)。全くの未経験から独学でブログを勉強。Twitterも同時に開始。副業ブログのおかげで今後の独立が見えてきました。本業と副業のブログを運営しながら奥さんと2人で暮らしています。


  • この記事を書いた人

青年投資家ゼロ

「好青年」と言われるけど貯金0円の27歳。| ブログと投資で脱貯金0円実現が目標 |大学在学中に起業▶︎売上5,000万円に成長!その後M&Aされて▶︎ヘッドハンティング▶︎中小企業の経営企画室最年少(独立目指す)ブログ開始2ヶ月で9,000PV/収益化成功 世界8ヶ国20都市訪問。キャンプが趣味。

© 2021 青年投資家ゼロBLOG Powered by AFFINGER5