OctopressにTwitterのタイムラインを表示させる。

OctopressにTwitterのタイムラインを表示させるには、Twitter公式の埋め込みタイムライン(Embedded Timelines)の機能を使ってHTMLにコードを埋め込みます。

以前はOctopressの機能であったらしいですが、Twitter API 1.1 への移行に伴い、使えなくなってしまったようです。

タイムラインの表示コード生成

埋め込みタイムラインは、Twitter.comのウィジェット設定の新規作成から、タイムラインのコードを生成します。

ウィジェット設定画面

入力フォームでカスタマイズすることができるのは、表示するツイートの内容と高さや色合いだけですが、コード内の\タグの属性を変更することで、さらに細かくカスタマイズすることができます。

 

実際にカスタマイズしてみたタイムラインが以下。

生成されたコードをHTMLに埋め込むだけでタイムラインを表示することが出来ます。

ヘッダーやフォローボタン、ツイートボックスやツイートボタンを削除するカスタマイズを適用してあります。

<a class="twitter-timeline" href="https://twitter.com/YuG_1224" data-widget-id="621833614255263745" data-chrome="noheader nofooter">@YuG1224さんのツイート</a>
<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>

 

Octopressのサイドバーに表示する

生成したコードを元に、/source/_includes/custom/asides/twitter.htmlというファイルを作成。

<section>
  <a class="twitter-timeline" href="https://twitter.com/YuG_1224" data-widget-id="621833614255263745" data-chrome="noheader nofooter">@YuG1224さんのツイート</a>
  <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.ymldefault_asides:に生成したファイルパスを追加。

default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html, custom/asides/twitter.html]

まとめると、ウィジェットのコードを <section> タグで囲んで、_config.ymlにパスを追加するだけ。

自分は応用してAmazonのアフィリエイトも設置してみました。

あとでタグリストなんかも設置してみよう。

OctopressTwitter