【Cocoon】【WordPress】サイドバーにTwitterのタイムラインを表示する

WordPressのサイドバーにTwitterのタイムラインを表示させる方法です^_^

テーマはCocoonを使用しています(^o^)

こんな感じに実現します↓↓↓

以前はプラグインが必要だったようですが、おそらく要望が多く標準機能に盛り込まれたのですね。

プラグインはたくさん入れるとプラグイン同士の干渉で動作がよろしくないこともありますので、プラグイン不要は嬉しいですね^_^

PCにて設定している例はたくさんのブログさんで説明されているので、ここではモバイル環境からやってみます。

PCでもモバイルでも大差はないのですが、下で説明しますがモバイル環境だとTwitter Publishでちょっとエラーが出ました。しかし、すぐ解決します^_^

環境

まず、Safariで、Twitterにアクセスし、ログインします。

Android環境の方もいらっしゃると思います。Chromeでも良いです（ブラウザならなんでも良し）

この後の手順のために、自分のTwitterのURLを控える必要があります。ですので、ログインしたら、左上の「home」から自分のプロフィールページを開きます。

次に、アドレスバーのURLをコピーします。このアドレスバーのURLが自分のTwitterのURLです。（ピンクの丸部分）

自分のTwitterであることは「@」以降で識別しています。（私の場合は「@NOTE28767768」です。（黄色丸部分））

つぎに、以下のTwitter Publishにアクセスして、WordPressに貼り付けるコードを取得します。

ここで、「Enter a Twitter URL」と書かれた部分に先程コピーしたTwitterのURLを貼り付けますが、そのままでは以下のようにエラーで弾かれます（上で話したことです）

これはモバイル環境からですとURLに「mobile.」が入っているのが原因ですので、URLを貼り付けた際にURLから「mobile.」を削除して下さい。これで弾かれないはずです。

私の例ですと、コピーしたものが「https://mobile.twitter.com/NOTE28767768」

mobile.を削除後のURLが「https://twitter.com/NOTE28767768」

です。

無事通ると、自動的に下の方に移動するので、「Embedded Timeline」を選択します。

表示させる大きさを指定するので、「set customization options」を選択します。

HeightとWidthがなど指定ができます。

Heightは表示高さ、Widthは表示幅ですが、今回はだらだら長く表示されないようにHeigthを指定してみます。

とりあえず、400とします。表示してみて、皆さんのサイトにちょうど良いサイズを模索してみて下さい^_^

他の部分はデフォルトのままで触りません。

入力したら「Update」を押します。

Height指定が含まれたリンクに更新されますので、「Copy Code」を押します。

コピーされました。

Twitterの準備は以上で、次はWordPressの設定です。先程コピーしたリンクをWordPressに貼り付けます。

WordPressを開き、左メニューの「外観」→「ウィジェット」の順で選択します。

下にスクロールしていくと「カスタムHTML」の項目があるので、開き、「サイドバー」を選択して、「ウィジェットを追加」を押します。

タイトルは自分が分かればなんでも良いです。私は「Twitter」としました。

内容欄には、先程Twitter PublishでコピーしたURLを貼り付けます。貼り付けたら、「保存」を押します。

保存したら、自分のブログを見てみましょう。これで、サイドバーにTwitterのタイムラインが表示されます。

以上です(^-^)