Tinkerer にソーシャルボタン追加
今時のブログとしては、ソーシャルボタンは追加したい。
参考になる記事がいっぱいあったので、参考にしてやってみた。
事前準備
layout.html というファイルと page.html というファイルを作る。
layout.html は全体? page.html は記事一つ一つみたいな感じがする。たぶん。
$ vim _templates/layout.html
中身はこんな感じ。
{% extends "!layout.html" %} {% block extrahead %} <!-- ここに html の ヘッダ部分に追加するスクリプトを書く --> {% endblock %}
ね。簡単でしょ。 1行目で既存の layout.html を継承してる。たぶん
layout.html では、extrahead というブロックを使うことで、既存の <head>タグに追加の情報を出力することが出来る。
次に page.html
$ vim _templates/page.html
中身はこんな感じ。
{% extends "!page.html" %} {% block body %} {{ timestamp(metadata.formatted_date) }} {% block buttons %} <!-- ここに ソーシャルボタンのコードを追加していく --> {% endblock %} {{ body }} {{ self.buttons() }} {{ post_meta(metadata) }} {{ comments }} {% endblock %}
ソーシャルボタンは記事の上と下に表示したいため、下では上の定義を
{{ self.buttons() }}
という形 で参照している。
これで事前準備は完了。
Twitter ボタン
ボタン作成のコードをググって取得する。
Twitter のボタンは<head>部分のスクリプトは必要ないみたいなので、 page.html にコードを記述する。
<!-- Twitter button --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</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>
それから、デフォルトでは横幅が広すぎるので css を調整する。 前回 の記事で自分の theme を 作っていたら、それに追記する。
$ vim _themes/mytheme/static/modern5.css_t
追加するcssはこんな感じ。
/* Twitter button */ iframe.twitter-share-button { width: 88px!important; }
hatena ボタン
ボタン作成のコードをググって取得する。
hatena のボタンは
<head>部分にも追加のスクリプトがあるみたいなので、まず layout.html
の {% block extrahead %}
に追記する。
<!-- for hatena --> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
次にボタン部分を page.html に追加する。
<!-- Hatena button --> <a href="http://b.hatena.ne.jp/entry/http://yukimemi.bitbucket.org/{{ pagename }}{{ file_suffix }}" class="hatena-bookmark-button" data-hatena-bookmark-title="{{ title }} - {{ project }}" data-hatena-bookmark-layout="standard-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
URLやタイトルをそのページにあったものに変換している。 {{ pagename }}
、 {{ file_suffix }}
などは ググればわかる。
google+ ボタン
ボタン作成のコードをググって取得する。
まず<head>部分に追加するスクリプトを layout.html に追記。
<!-- for gogogle + --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
それから、ボタン部分を page.html に追記。
<!-- Google+ button --> <div class="g-plusone" data-size="medium"></div>
Google+ は簡単でいいね。
facebook ボタン
ボタン作成のコードをググって取得する。 これは app id とか取得しなきゃいけなくてけっこうめんどくさい。
取得したら、<head>部分に追加するスクリプトを layout.html に追記。 channelUrl とかいうのが全然意味わからんかった。誰か知ってる人教えて下さい。
<!-- for facebook --> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : 'XXXXXXXXXXXXXXX', // App ID from the app dashboard channelUrl : '//yukimemi.bitbucket.org/channel.html', // Channel file for x-domain comms status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // Additional initialization code such as adding Event Listeners goes here }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
ちなみに、非同期にすることで早くなるらしい。
次にボタンを配置する。 page.html に追加する。
<!-- facebook button --> <div class="fb-like" data-href="http://yukimemi.bitbucket.org/{{ pagename }}{{ file_suffix }}" data-send="false" data-layout="button_count" data-width="200" data-show-faces="true"></div>
これでおk。
全体は以下の通り。
layout.html
{% extends "!layout.html" %} {% block extrahead %} <!-- for hatena --> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <!-- for gogogle + --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <!-- for facebook --> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : 'XXXXXXXXXXXXXXX', // App ID from the app dashboard channelUrl : '//yukimemi.bitbucket.org/channel.html', // Channel file for x-domain comms status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // Additional initialization code such as adding Event Listeners goes here }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> {% endblock %}
page.html
{% extends "!page.html" %} {% block body %} {{ timestamp(metadata.formatted_date) }} {% block buttons %} <!-- facebook button --> <div class="fb-like" data-href="http://yukimemi.bitbucket.org/{{ pagename }}{{ file_suffix }}" data-send="false" data-layout="button_count" data-width="200" data-show-faces="true"></div> <!-- Hatena button --> <a href="http://b.hatena.ne.jp/entry/http://yukimemi.bitbucket.org/{{ pagename }}{{ file_suffix }}" class="hatena-bookmark-button" data-hatena-bookmark-title="{{ title }} - {{ project }}" data-hatena-bookmark-layout="standard-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> <!-- Twitter button --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</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> <!-- Google+ button --> <div class="g-plusone" data-size="medium"></div> {% endblock %} {{ body }} {{ self.buttons() }} {{ post_meta(metadata) }} {{ comments }} {% endblock %} {% set script_files = script_files + ["_static/google_analytics.js"] %}
参考:
Tinkererで作ったブログにソーシャルボタンを追加する—鉄馬の工具箱
テンプレート — Sphinx v1.0.6 documentation
テンプレート — Sphinx v1.0.6 documentation