Jetpack ウィジェット編:サイドバーへのツイート表示方法

Twitterでのツイートをブログのサイドバーに表示するようにしました。

ブログの方は相変わらず非定期で更新回数も少ないですが(申し訳ありません)、Twitterの方では結構ブツブツと言っておりますので、暇つぶしにご覧いただければ嬉しいです。

ツイートをブログに表示するには、次の二通りありました。

  • Jetpackのウィジェットを使用する方法
  • テキストウィジェットを使用する方法

今回は、Jetpackのウィジェットを使用する方法を紹介します。

スポンサーリンク

サイドバーにJetpackのウィジェットを追加

Jetpackを有効にされている方には、外観 > ウィジェット に「Twitterタイムライン(Jetpack)」が表示されていると思います。

ドラッグ&ドロップでもサイドバーに追加できますが、クリックすると追加したい場所を選択できるので、その方が楽です。

追加すると、次のような設定項目が表示されます。

TwitterでウィジェットIDの取得

次に、TwitterでウィジェットIDを取得します。

WebブラウザからTwitterにログインした状態で、ウィジェットID右横のリンク「(?)」をクリックします。すると別タブで、次のような画面が表示されると思います。

[Create your Twitter Widget.]と表示されたリンクをクリックします。

下のような画面が表示されたと思います。

「検索クエリ」の欄に、自分のTwitterのID(ぼくの場合は@ClubmasterP)の前に、「from:」を付けて入力します。「from:」 を付けないと、返信やリツイートが検索の対象になってしまうので、注意が必要です。入力して[ウィジェットを作成]ボタンをクリックします。

次のような画面が表示されます。

ここで、必要なのは「生成されたコードではなく、URLに表示された長い数字」です。

URLをみると次のような感じになっていると思います。

123456789012345678/edit?notice=WIDGET_UPDATED

このwidgets/のあとの長い数字が、取得した「ウィジェットID」です。

ウィジェットの設定

次のようにウィジェットを設定して、[保存]ボタンをクリックすると完成です。

img_575ae9507a524

Simplicityのサイドバーに表示する場合、最大幅は「300px」で良いようです。

高さは、少し大きめの「600px」に変更しました。表示するツイート数を入力すると、設定した高さは無効になりますので、どちらか一方を入力します。

ウィジェットIDには、さきほど取得したものを入力します。

ほかの設定は、ぼくは規定値のままにしましたが、お好みで調整してみてください。

Jetpackのウィジェットによる表示結果

実際に、ツイートがどのように表示されているか確認してみましょう。

思っていた以上に、きれいに表示されていました(^^)

次回は、テキストウィジェットを使用した方法を紹介します。

特に、Simlicityのパソコン用テキストウィジェットを使用すると、モバイルでは表示されませんので、今はこちらの方法にしています。