T.I.D.

Git や GitHub と戯れる、オレオレ的おとなの遊び場

Octopressにはてブボタンを設置する

ついでに Twitter、Google+1、Facebook の日本語化と JavaScript の非同期読み込みコードの共通化も。

関連ファイルの抽出

Related-Files
1
2
3
4
5
6
7
8
9
10

source
└── _includes/
    ├── post/
    │   └── sharing.html             # post.html、page.html から
    └── after_footer.html            # default.html から
        ├── disqus.html              # after_footer.html から
        ├── facebook_like.html       # after_footer.html から
        ├── google_plus_one.html     # after_footer.html から
        ├── twitter_sharing.html     # after_footer.html から
        └── custom/after_footer.html # after_footer.html から（コメントのみ）

ファイルの修正

_config.yml

各ボタンの言語設定、Facebook アプリケーション ID 設定などを追加する。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13

# Twitter
twitter_tweet_button: true
twitter_tweet_button_lang: ja

# Google +1
google_plus_one: true
google_plus_one_size: medium
google_plus_one_lang: ja

# Facebook Like
facebook_like: true
facebook_lang: ja_JP
facebook_appID:

sharing.html

適当な位置にはてブを追加する。

sharing.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="sharing">
  {% if site.twitter_tweet_button %}
  <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" {% if site.twitter_tweet_button_lang %}data-lang="{{ site.twitter_tweet_button_lang }}"{% endif %}>Tweet</a>
  {% endif %}
  {% if site.google_plus_one %}
  <div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div>
  {% endif %}
  <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button"
      data-hatena-bookmark-layout="standard"
      data-hatena-bookmark-url="{{ site.url }}{{ page.url }}">
    <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
        alt="このエントリーをはてなブックマークに追加" width="20" height="20"
        style="border: none">
  </a>
  {% if site.facebook_like %}
    <div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
  {% endif %}
</div>

after_footer.html

Facebook、Google+1、Twitter をコメントアウトする。

after_footer.html 
1
2
3
4
5
6
7

{% include disqus.html %}
{% comment %}
{% include facebook_like.html %}
{% include google_plus_one.html %}
{% include twitter_sharing.html %}
{% endcomment %}
{% include custom/after_footer.html %}

custum/after_footer.html

Google+1、Facebook の言語設定と JavaScript の非同期読み込みコードを共通化してまとめる。

custum-after_footer.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{% comment %}
  Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example)
{% endcomment %}
<script>
(function(w,d){
    var c,e=d.createDocumentFragment(),f=d.getElementsByTagName("script")[0],
    a=function(a,b){if(!d.getElementById(b)){c=d.createElement("script");
    c.src=a;c.id=b||null;c.async=true;e.appendChild(c);}};
{% if site.google_plus_one %}{% if site.google_plus_one_lang %}
    w.___gcfg={lang:"ja"};{% endif %}
    a("https://apis.google.com/js/plusone.js");
{% endif %}
{% if site.twitter_follow_button or site.twitter_tweet_button %}
    a("//platform.twitter.com/widgets.js");
{% endif %}
{% if site.facebook_like %}
    a("//connect.facebook.net/{% if site.facebook_lang %}{{ site.facebook_lang }}{% else %}en_US{% endif %}/all.js#{% if site.facebook_appID %}appId={{ site.facebook_appID }}&{% endif %}xfbml=1","facebook-jssdk");
{% endif %}
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    f.parentNode.insertBefore(e,f);
})(this,document);
</script>

Facebook の AppID について

facebook_like.html には、作者のものと思われるアプリケーション ID が埋め込まれているが、このファイルは使わない。

facebook_like.html 
1
2
3
4
5
6
7
8
9
10

{% if site.facebook_like %}
<div id="fb-root"></div>
<script>(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/en_US/all.js#appId=212934732101925&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% endif %}

本来これは _config.yml で設定すべき事項。言語設定も含めて pull request するべきなんでしょうかネ。

参考情報

Comments