はてなブログでTwitterをサイドバーや記事内に埋め込み表示させる方法

ブログを見ていると、サイドバーにTwitterのタイムラインが表示されているブログや、記事内にツイートが埋め込み表示されているブログを見たことがありませんか？

今回は、ブログ×Twitterの連携効果を高める方法について書きました。

ブログとTwitterをうまく連携させることで、ブログの読者を増やしたりTwitterのフォロワーを増やしたりする効果があります。

という方は参考にしてみてください。

Twitterのタイムライン埋め込み用コードを作る

まずはTwitterのタイムラインを表示させる方法から説明します。

Twitterにログインした状態で、下記サイトへアクセスしてください。

ウィジェットの表示方法を選択する画面が開くので、左側（Embedded Timeline）を選択します。

するとタイムラインの埋め込み用HTMLコードが表示されるので、このコードをコピーします。

このコードをそのまま使うと、ものすご～く縦長のタイムラインが表示されてしまいます。

そのため、ちょっとだけカスタマイズします。

カスタマイズする場合はコードの上に表示されている「set customization options」をクリックして、見た目を編集してください。

「Update」をクリックすると再びHTMLコードが出力されるので、新しいコードをサイドバーや記事内に挿入すれば完成です。

作成したHTMLコードをはてなブログのサイドバーや記事内に表示させます。

サイドバーに表示したい場合は、ブログの管理画面から

デザイン→カスタマイズ→サイドバーと進み、

「モジュールを追加」します。

HTMLを追加できるので、適当なタイトルを付けてコピーしたHTMLコードを貼り付けてください。最後に「適用」「保存」することもお忘れなく。

うまくサイドバーに表示されました。

コピーしたHTMLコードを記事内に表示させることもできます。

その場合はこんな感じになります↓

ついでに、特定のツイートだけをブログ記事に埋め込む方法も解説しておきます。

ツイートした内容をそのままブログに埋め込むことが出来れば、それだけで記事が作れてしまいますね。

特定のツイートを埋め込む場合は、まず、ツイッター画面を開いて埋め込みたいツイートを表示。

ツイートの横にある「その他」のマークをクリックします。

「ツイートをサイトに埋め込む」をクリックすれば、そのツイートのHTMLコードが出力されます。

これを貼り付ければこんな風に↓記事内に埋め込むことも可能です。

初めて挑戦するジャンルでは、まずは無料のもの（資料請求やお試しセットなど）を紹介。
それで成果が出て需要がありそうなら有料商品の紹介に進む。

無料のものを紹介しても成果が出ないなら、そのジャンルは撤退。
これが基本。

— 陽平@効率よく生きる (@matome_pro) 2018年4月9日

ブログのサイドバーや記事内にTwitterのタイムラインを表示させる方法を解説しました。

Twitterとブログを連携させることにより、

という良いサイクルが生まれます。

Twitter×ブログの組み合わせは非常に相性が良いので、ブログをやっている方はTwitterとも連携させてみてください。

Twitterとブログの連携効果については、こちらの記事に書いています。