WordPressのサイドバーにツイッターのTLを表示させた話

以前、Amazon LightsailをWordPressを構築するお話をしました。

メインの情報発信はブログで行おうと思っているのですが、グラフィックボードの在庫の入荷情報などの情報の鮮度が求められるものについてはツイッターと並行して情報を発信しようと考えています。

そこで、ブログにツイッターのタイムラインの情報を載せられないか…と思っていたのですが、WordPressの標準の機能では実装出来ないことが分かりました。

ブログにツイッターのタイムラインを載せるため、何か簡単で良い方法がないか…と思いググってみると、WordPressのカスタムHTMLブロックを利用することで簡単に実装できることが分かりました。

今回はブログにツイッターのタイムラインを表示させた話について解説します。

ツイッター側の作業

こちらのページにアクセスし、ブログにツイッターのタイムラインを挿入するためのHTMLコードを取得します。

下記図のような画面が表示されたら、入力欄に表示したいツイッターのアドレスを入力してください。

ツイッターアドレスのフォーマット「https://twitter.com/”ツイッターID”」となっています。私の場合、ツイッターIDは「https://twitter.com/zaikopremium」になるため「と入力しました。」。

画面を下に移動したら、タイムラインの表示の選択画面になります。左側の『Embedded Timeline』を選んで下さい。そうするとコードが表示されます。

下記のようにコードが表示されます。

このままですとタイムライン表示画面のリミットが設定されていないため、タイムラインが無限に表示されてしまいます。なので、高さ調整をしてタイムラインの表示範囲にリミットを設定します。コード右上のset customization optionsをクリックしてください。

下記の画面が表示されます。Height (px)に値を設定し、タイムラインの高さを制限します。

また、今回はブログのサイドバーにツイッターのタイムラインを追加するため、幅(Width)についても制限しました。

それぞれ値を入力したらUpdateをクリックしてください。

そうするとHTMLコードが生成されますのでコードをひかえてください。

先ほどひかえたHTMLコードをWordPressのウィジットとして追加します。

WordPressのダッシュボードから外観のウィジットをクリックしてください。その中にカスタムHTMLがあるため、それをクリックしてください。

そうするとカスタムHTMLの編集画面が表示されます。内容の中に先ほどのコードを貼り付けてください。

これでツイッターのタイムラインがウィジットとして追加できるようになります。

高さや幅を再調整する場合はカスタムHTMLの編集画面で修正することが可能です。
自分のブログにウィジットを追加してプレビューした際に、自身のイメージと合わない場合に調整してみてください。

今回はブログにツイッターのタイムラインを表示させるための方法をさせて頂きました。

情報発信のツールは様々ありますが、それぞれを連携することによって情報を新鮮に保つことができると思います。

これから自身のブログにツイッターのタイムラインを表示させたいと考えている方の参考になれば幸いです。それでは！