鉄馬の工具箱

te2uma(てつうま)のブログです。調べ物のメモなどを共有します。

このエントリーをはてなブックマークに追加

Tinkererで作ったブログにソーシャルボタンを追加する

テンプレートの拡張ファイルを置くディレクトリ「_templates」をブログファイルのルートに用意し、その中にpage.htmlを作成して、各種ボタンを記述していきます(参考: Tinkererをカスタマイズする )。 [1]

ここでは、テンプレートの編集を簡略化するため、各エントリの日付・タイトル上にソーシャルボタンを挿入する前提で話を進めていきます。

vi _templates/page.html
{% extends "!page.html" %}

【 …省略… 】

{%- block body %}
    【★ここに以降の節で紹介するタグを入れていく★】

    {{ super() }}
{%- endblock -%}

はてなブックマークボタンを挿入する

はてなブックマークボタンの作成・設置について 」のページでタグを作成します。

URLとタイトルの部分は、エントリーごとに動的に生成する必要がありますが、 Sphinxのグローバル変数 を使うことで対応できます。URLは「【ブログトップのURL】{{ pagename }}{{ file_suffix }}」、タイトルは「{{ title }}」とすればよいです。

例えば、このブログで「シンプル/ブックマーク数あり」のボタンを設置する場合は、次のように記述します。

<a href="http://b.hatena.ne.jp/entry/http://te2uma.com/blog/{{ pagename }}{{ file_suffix }}" class="hatena-bookmark-button" data-hatena-bookmark-title="{{ title }}" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

ツイートボタンを挿入する

Twitter社の素材ページ でタグを作成します。特にカスタマイズの必要がなければ、「コードのプレビューを見る」のソースコードをコピペするだけ。

Facebookの「いいね!」ボタンを挿入する

facebook developersの「 Like Button 」のページでタグを作成します。「URL to Like」の部分は、前述と同様に「【ブログトップのURL】{{ pagename }}{{ file_suffix }}」を指定しますが、「Get Code」でコードを生成したタイミングで「{{」「}}」の部分が実体参照にエスケープされてしまうので、この部分はコードを生成してから書き換えます。

なお、Send Buttonを外したい場合は、別途JavaScript SDKの設置やアプリケーションIDの取得などが必要となるので、『 XFBML版Facebookの「いいね!」ボタンを設置する。 』を参考に設定してください。

JavaScript SDKを設定する場合、「 たった一言で「いいね!」ボタンが爆速に!全ブロガーに必須の呪文。 」を参考に、非同期読み込みの設定「js.async = true;」も追加しておいた方がよさそうです。


[1]Tinkerer(というかSphinx)で使用しているテンプレートエンジン「 Jinja2 」を触るのは初めてですが、 Django を参考に作られているらしく、Djangoの知識を活かせて使いやすかったです。しかも、Perlの Template Toolkit のようにタグ前の改行を詰める機能もあるようで個人的に便利な印象。

(最終更新日:2013/04/09)

このエントリーをはてなブックマークに追加