blog.textfile.org結城浩のブログ

blog.textfile.org

OctopressにTwitterのタイムラインを表示する

Octopressで作ったブログのサイドバーにTwitterのタイムラインを表示するようにします。

OctopressのサイドバーにTwitterのタイムラインを埋め込む を参考にしました。

1. ウィジェットを作成する

以下のページで、Twitterのタイムライン用のウィジェットを新規作成します。

https://twitter.com/settings/widgets

細かいカスタマイズは以下のサイトに詳しいのでそちらを見てください。

2. ファイルに組み込む

source/_includes/custom/asides/twitter.html を新規作成して、先ほど作成したウィジェットをそこにペーストします。 お好みで<h1>タグなどで修飾します。

結城の場合は以下のようにしました。

source/_includes/custom/asides/twitter.html
1
2
3
4
5
<section>
  <h1>Twitter Timeline</h1>
  <p><a class="twitter-timeline" href="https://twitter.com/hyuki" data-widget-id="437473786074390528" data-chrome="noheader nofooter noscrollbar transparent" lang="ja">@hyuki からのツイート</a></p>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</section>

_config.ymlblog_index_asidessource/_includes/custom/asides/twitter.html を組み込みます。

結城の場合はたとえば以下のようになりますが、人によって異なります。

_config.yml
1
blog_index_asides:  [ asides/recent_posts.html, custom/asides/about.html, custom/asides/twitter.html ]

blog_index_asides に組み込むとブログのインデクスページにタイムラインが表示されます。 もし個々のエントリのページにも表示したい場合には、_config.ymlpost_asides にも含めます。

_config.yml
1
2
blog_index_asides:  [ asides/recent_posts.html, custom/asides/about.html, custom/asides/twitter.html ]
post_asides:        [ asides/recent_posts.html, custom/asides/about.html, custom/asides/twitter.html ]

3. ブログを更新する

あとはいつものようにOctopressでブログを更新します。