ノーワーク・ベストライフ

働かない生き方を構築するためのウェブメディア。

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

f:id:matomepro:20180411185921p:plain

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

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

 

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

 

  • ブログを書いているけど、もっとアクセスを増やしたい!
  • Twitterのフォロワーを増やしたい!

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

 

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

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

 

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

https://twitter.com/settings/widgets/new/user

 

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

 

f:id:matomepro:20180411175212j:plain

 

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

 

f:id:matomepro:20180411175226j:plain

 

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

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

 

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

 

f:id:matomepro:20180411175515j:plain

 

f:id:matomepro:20180411175838j:plain

 

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

 

はてなブログのサイドバー、記事内に反映させる

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

 

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

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

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

 

f:id:matomepro:20180411180844j:plain

 

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

 

f:id:matomepro:20180411180903j:plain

 

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

 

f:id:matomepro:20180411181350j:plain

 

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

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

 

 

 

ブログ記事内に特定のツイートを埋め込む

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

 

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

 

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

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

 

f:id:matomepro:20180411182753j:plain

 

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

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

 

 

まとめ

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

 

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

  • ブログを見てくれた方がTwitterをフォローしてくれる
  • Twitterのフォロワーさんがブログも見てくれる

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

 

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

 

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