[Cocoon] ツイートをサイドバーに表示する方法 -Twitter連携-

副業・ブログ

[Cocoon] ツイートをサイドバーに表示する方法 -Twitter連携-

こんにちは!まったりです。

いろいろな方のブログを見ていると、サイドバーに

「○○さんのツイート」

が表示されているのを見た経験はありませんか?

Twitterタイムライン表示画面

ブロガーさんの中には

ツイートのタイムラインをブログのサイドバーに表示させたいけど、どうすればいいかわからない…。

と悩んでいる方も多いのではないでしょうか。

本記事ではこのような悩みを解決するために

「Cocoonのサイドバーにタイムラインを表示する方法」

について紹介します。

本記事で学べること
  • Cocoonのサイドバーにツイートを表示する手順
記事の執筆者

理系大学院生ブロガー

まったりさんブログ運営中

情報・ネットワーク関係の研究中

まったり
まったり

サイドバーに自分のツイートを載せることでフォロワーを増やすきっかけにもなるので、これを機会に是非実装してみてください。

▼ブログ初心者をサポートする記事を投稿しています▼

スポンサーリンク

1. Twitter側の設定(Twitter Publish 連携)

Cocoonのサイドバーにツイートを載せるためには

『Twitter連携』

をする必要があります。

連携の方法は以下の通りです。

はじめに「Twitter Publish」にアクセスします。

Twitter Publish トップページ

Twitter Publish のトップページではTwitterのURLを入力する欄があります。

ここに

「https://mattarisan.com/○○○」

を入力します。

まったり
まったり

ここで、○に入るものは自身のツイッターアカウントの「ユーザー名」になります。

ー 補足 ー

ユーザー名というのは以下の画像の通りになります。

ユーザー名を入力した後にエンターを押すと次のようになります。

ここでは左側の

「Embedded Timeline」

を選択してください。

すると、以下のようにタイムラインを表示するためのコードを取得する文が出てきます。

タイムライン表示用コード生成画面

そのままコードをコピーして使用するとタイムラインが無限に表示されてしまいますので少しだけ変更を加えます。

上の図にある

「set customization options」

を選択してその中の

『Height(px)』

のみを変更します。

タイムラインのサイズ変更画面
まったり
まったり

私のブログでは「Height=300」で設定しています。

後から変更可能なのでブログのレイアウトを確認しながら決めるのがおすすめです。

変更が完了したら上の画像の右下にある「Update」を押して完了です。

その後「Copy Code」を押してコードをコピーしてください。

これでTwitter連携は終了です。

次からはWordPress側での作業になります。

スポンサーリンク

2. WordPress(Cocoon)側の設定

Twitter Publish からタイムライン表示のコードをコピーしたあとはWordPress側での作業になります。

はじめに、以下のように「外観」→「ウィジェット」を選択します。

WordPress 管理画面

以下の画像のように、ウィジェットの中の

『カスタムHTML』

を選択して

「サイドバー」→「ウィジェットを追加」

を選択します。

「ウィジェット」での操作

最後に、追加されたカスタムHTML用のウィジェットを編集します。

追加したカスタムHTML用ウィジェットは以下の画像のようになっているので

  • タイトル:任意のタイトルをつける
  • 内容:Twitter Publish でコピーしたコードをペースト

をして「保存」を押してください。

カスタムHTML編集画面

保存が完了したあとは実際にブログを確認してみてください。

ー 補足 ー

なかなか保存されないという場合は、サーバーのWAF設定が影響している可能性があります。

そのような場合は一度サーバーのWAFを無効にしてから再度「保存」してみてください。

おそらくこれで成功するかと思います。

▼WAFの設定解除方法はこちら▼

完了していれば以下のようにTwitterのタイムラインがサイドバーに表示されているはずです!

Twitterのタイムライン表示画面
スポンサーリンク

3. 最後に

いかがでしたでしょうか。

今回は

Twitterのタイムラインを「Cocoon」のサイドバーに表示する方法

について画像つきで詳しく紹介しました。

この記事通りに進めれば5分程度で完了するので是非実装してみてください。

まったり
まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

コメント

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