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をみると次のような感じになっていると思います。
このwidgets/のあとの長い数字が、取得した「ウィジェットID」です。
https://twitter.com/settings/widgets/123456789012345678/edit?notice=WIDGET_UPDATED
ウィジェットの設定
次のようにウィジェットを設定して、[保存]ボタンをクリックすると完成です。
Simplicityのサイドバーに表示する場合、最大幅は「300px」で良いようです。
高さは、少し大きめの「600px」に変更しました。表示するツイート数を入力すると、設定した高さは無効になりますので、どちらか一方を入力します。
ウィジェットIDには、さきほど取得したものを入力します。
ほかの設定は、ぼくは規定値のままにしましたが、お好みで調整してみてください。
Jetpackのウィジェットによる表示結果
実際に、ツイートがどのように表示されているか確認してみましょう。
思っていた以上に、きれいに表示されていました(^^)
次回は、テキストウィジェットを使用した方法を紹介します。
特に、Simlicityのパソコン用テキストウィジェットを使用すると、モバイルでは表示されませんので、今はこちらの方法にしています。
コメント