rcmdnk's blog
Last update

20131126_sharing_200_200

Twitterだとかはてなブックマークのシェアボタンの辺りで 少しおかしかった点等を直してまとめ直したことについて。

そんなにシェアされてるわけではないですが、 ブログっぽさを出すために取り敢えず自己満足用に。

非同期スクリプト用関数を作ってまとめて読み込む

追記: 2013/11/28

encodeURIComponent filter for Octopress

に書いたようにTumblrボタンも追加。

追記ここまで

追記: 2013/12/06

Facebookのボタンを「いいね!」から「シェア」に

で追加したfacebookシェアも追加。

追記ここまで

現在表示させてるシェアボタン的な物はTwitter, はてなブックマーク、Facebook、 Pocketとブックーマーク登録用ボタンです。 ブックマーク登録用ボタンはほとんどのブラウザで実質的に ただショートカットを示すだけのボタンになってますが1、なんとなく収まりが良いので載せています。 ま、全体的に見た目です。

こんな感じで(JSFiddleを載せてみたかったsunglasses)。

  • JavaScript部はページ最後の</body>前に<script>~</script> で囲って配置。
  • CSS部は<head>~</head>内に<style type="text/css">~</style>で囲って配置。
  • HTML部は表示したい所に配置。

すれば上の表示が出るはずです。

変更しなくてはいけない点はHTML

  • http://rcmdnk.github.io: 自分の使いたいページのURLへ。
  • Twitterのdata-viaの値を自分のアカウントへ(@xxxさんから、と表示される)。
  • bookmarkのvalue: ブックマーク用ボタンに表示される言葉。
  • bookmarkのdata-page_title: ページのタイトルへ。

くらいです。

後はCSS部分で間隔等を良い感じに。

大概のCMSとかではテンプレートで、表示中のURL等を指定できると思うので 上のURL部分に当てはめてやればOKです。

TumblrについてはサイトのURL等をエンコードしてやらないといけないので、

ボタン Tumblr

を参照しURL等をJavaScriptで入れる様にするか、Octopressの場合はこちらを参照:

encodeURIComponent filter for Octopress

Facebookのシェアボタンはそのまま貼るともしかするとずれるかもしれません。 その場合はこちらを参考に位置を動かしてみて下さい。

Facebookのボタンを「いいね!」から「シェア」に

Octopress用のコード

Octopressでやる場合にはこんな感じにしています。

source/_includes/post/sharing.html

shareing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
{%if index%}
{%capture share_url%}{{site.url}}{{post.url}}{%endcapture%}
{%else%}
{%capture share_url%}{{site.url}}{{page.url}}{%endcapture%}
{%endif%}
<div class="sharing">
  <ul>
    {% if site.hatena_button %}
    <li class="hatena">
      <a href="http://b.hatena.ne.jp/entry/{{share_url}}"
          class="hatena-bookmark-button"
          data-hatena-bookmark-layout="standard"
      ><img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
            alt="Add to Hatena Bookmark"/></a>
    </li>
    {% endif %}
    {% if site.twitter_tweet_button %}
    <li class="twitter">
      <a href="http://twitter.com/share"
          class="twitter-share-button"
          data-url="{{share_url}}"
          data-via="{{ site.twitter_user }}"
          data-counturl="{{share_url}}">Tweet</a>
    </li>
    {% endif %}
    {% if site.google_plus_one %}
    <li class="googleplus">
      <div class="g-plusone"
          data-size="{{ site.google_plus_one_size }}"
          data-href="{{share_url}}"></div>
    </li>
    {% endif %}
    {% if site.facebook_like %}
    <li class="facebook">
      <div class="fb-like"
          data-share="false"
          data-layout="button_count"
          data-show-faces="false"
          data-font="verdana"
          data-href="{{share_url}}"></div>
    </li>
    {% endif %}
    {% if site.facebook_share %}
    <li class="facebook_share">
      <div class="fb-share-button"
          data-type="button_count"
          data-font="verdana"
          data-href="{{share_url}}"></div>
    </li>
    {% endif %}
    {% if site.pocket_button %}
    <li class="pocket">
      <a href="https://getpocket.com/save"
          class="pocket-btn" data-lang="en"
          data-save-url="{{share_url}}"
          data-pocket-count="horizontal"
          data-pocket-align="left">Pocket</a>
    </li>
    {% endif %}
    {% if site.tumblr_button %}
    {% if index %}{% capture description %}{% if post.description %}{{ post.description }}{% endif %}{% endcapture %}{% else %}{% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}{% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content|raw_content }}{% endif %}{% endcapture %}{% endif %}
    <li class="tumblr">
      <a href="http://www.tumblr.com/share/link?url={{share_url|encodeURIComponent}}&name={{share_title|encodeURIComponent}}&description={{description|strip_html|condense_spaces|truncate:150|encodeURIComponent}}"
          title="Share on Tumblr"
          class="tumblr_button"
          style="">Tumblr</a>
    </li>
    {% endif %}
    {% if site.bookmark %}
    <li class="bookmark"><input class="link_btn add_bookmark"
          type="button"
          value="{{site.favorite}}"
          data-page_title="{{share_title}} - {{site.title}}"
          data-page_url="{{share_url}}"/></li>
    {% endif %}
  </ul>
</div>

Indexページでも各ポストの物を表示したいので Indexの場合と各ポストのエントリーでの場合でURLを場合分け。

後はそれぞれ_config.ymlからの設定でOn/Off出来る様に (hatena_button: true等)。

source/_includes/after_footer.html

source/_includes/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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{% if site.google_analytics_tracking_id or page.sharing != false or (site.disqus_short_name and page.comments != false) or (site.linkwithin_show == true and page.footer != false %}
<script>
(function (w, d) {
  var j, s = d.getElementsByTagName('script')[0],
  a = function (u, i) {
    if (!d.getElementById(i)) {
      j = d.createElement('script');
      j.src = u;
      if (i) {j.id = i;}
      s.parentNode.insertBefore(j, s);
    }
  };
  {% if site.google_analytics_tracking_id %}
  w._gaq = [['_require', 'inpage_linkid',
             '//www.google-analytics.com/plugins/ga/inpage_linkid.js'],
            ['_setAccount', '{{site.google_analytics_tracking_id}}'],
            ['_trackPageview']];
  a(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
  {% endif %}
  {% if site.twitter_follow_button or site.twitter_tweet_button %}
  a('//platform.twitter.com/widgets.js', 'twitter-wjs');
  {% endif %}
  {% if site.hatena_button %}
  a('//b.st-hatena.com/js/bookmark_button.js','hatebu-js');
  {% endif %}
  {% if site.google_plus_one %}
  {% if site.google_plus_one_lang %}
  w.___gcfg={lang:'{{site.google_plus_one_lang}}'};
  {% endif %}
  a('//apis.google.com/js/plusone.js','plusone-js');
  {% endif %}
  {% if site.facebook_like or site.facebook_share %}
  a('//connect.facebook.net/{% if site.facebook_lang %}{{ site.facebook_lang }}{% else %}en_US{% endif %}/all.js#{% if site.facebook_app_id %}appId={{ site.facebook_app_id }}&{% endif %}xfbml=1','facebook-jssdk');
  {% endif %}
  {% if site.pocket_button %}
  a('//widgets.getpocket.com/v1/j/btn.js?v=1','pocket-btn-js');
  {% endif %}
  {% if site.tumblr_button %}
  a('//platform.tumblr.com/v1/share.js','tumblr-share-js');
  {% endif %}
  {% if site.linkwithin_show == true and page.footer != false %}
  a('//www.linkwithin.com/widget.js','linkwithin-wjs');
  {% endif %}
  {% if site.disqus_short_name and page.comments != false %}
  var disqus_shortname = '{{ site.disqus_short_name }}';
  {% if page.comments == true %}
  var disqus_identifier = '{{ site.url }}{{ page.url }}';
  var disqus_url = '{{ site.url }}{{ page.url }}';
  var disqus_script = 'embed.js';
  {% elsif site.disqus_short_name and site.disqus_show_comment_count == true %}
  var disqus_script = 'count.js';
  {% endif %}
  a('//'+disqus_shortname+'.disqus.com/'+disqus_script);
  {% endif %}
})(this, document);
</script>
{% endif %}
{% include custom/after_footer.html %}

classicテーマで元々あるものを消して全部まとめる。 ここではGoogle AnalyticsとLinkWithin、さらにDisqusのコードも 一緒にまとめています。

LinkWithinに関してはlinkwithin.htmlというファイルをsoruce/_includes/の下に こんな感じで作って置いておいて、好きな場所でインクルードします。

linkwithin.html
1
2
3
4
5
6
<div class="linkwithin_div"></div>
<script>
var linkwithin_site_id = {{site.linkwithin_id}};
linkwithin_text='{{site.linkwithin_text}}'
</script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

JavaScriptの方も_config.ymlの設定でOn/Offしたり、必要ない時は切る様に。

ほとんどの値などは元々Octopressに入っている物で、 一部hatena_button等を_config.ymlに加えてもらえれば すぐ設定出来ると思います。

これらの設定に書き換えたテーマもまとめてるので _config.yml等を参考に。

勿論、そのままテーマをインストールして使ってもOK。

いくつか気になったこととか

はてなブックマークのトラッキング問題

各スクリプトを今一度調べてる時に、たまにbookmark_button-wo-al.js としてる物があってなんだろ、と思って調べてみたら、 1年以上前に、はてなブックマークにマイクロアドのトラッキングコードが 仕込まれていて、それの無いバージョンとして別にこのコードがあった模様。

全く知りませんでしたが、一悶着あった後に、結局はてながこのコードを 削除することで落ち着いた様で、 現在では bookmark_button.jsbookmark_button-wo-al.js は同じコードになっています。

はてなダイアリーからはてなブックマークボタンを削除した - ny23の日記

はてなブックマークボタンが取得した行動情報の第三者への送信を停止しました - はてなブックマーク日記 - 機能変更、お知らせなど

LinkWithin関連

上に挙げたlinkwithin.htmlpixel.png という画像を挿入する部分があって、 通常これはJavaScriptの読み込みとともに</body>直前に置くものです。

多分この画像はLinkwithinがそのページを感知するために必要なもので、 見た目的に邪魔じゃなければどこに置いても良いものだと思うので ファイル的にまとめたくて<div class="linkwithin_div"></div>と同じ所に入れました。

今のところ問題無いと思いますが、おかしかったらafter_footer.htmlの方へ移動したほうが良いのかも。

それから、表示をランダムにするため?に

src='http://www.linkwithin.com/widget.js?rand='+Math.random()

みたいにしてる物を見かけましたが、widget.js を見る限り中で乱数を振ってるし、この値は意味ない様に見えるので、 単に古い仕様のもの?だと思います。

LinkWithinは色々な所で使われているので LinkWithin自体について検索しても単に埋め込まれてるだけのページ等に ハマってしまって情報収集が難しい。。。

ネットワークパス参照(network-path reference)

JavaScriptを呼ぶときに先頭のhttp:https:を書かずに//から書き始めると そのページがHTTPならhttp:、HTTPSページならhttps:を自動で付けてくれる、と言う話。 HTTPSからHTTPを呼ぶと読み込んでくれなかったりするため。

いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記

古いIE(8くらいまで?)だと問題が起こってたらしい。

IEでCSSが2回ダウンロードされるパターン マイナビニュース

JavaScript使用時などはGoogle Analyticsのように、location.protocolをきちんと見て判断すれば この様なバグも回避出来る様です。

GitHub PagesもHTTPSで見れるのですが、一つ前の投稿とかは

HTTP: BrewallにGitHubでリストファイルを管理する機能を付けた

HTTPS: BrewallにGitHubでリストファイルを管理する機能を付けた

見てもらうと分かりますが、はてなとLinkWithinが対応してません。 HTTPSの方ははてなのボタンが古い画像だけなのと サイドバーのPopular Postsが動いてない、 さらにLinkWithinが表示されていません。

上のスクリプト例ではこれらもhttp:を除いてますが、付けておいても FirefoxとChromeで試す限りはスクリプトが実行されて無い様でした。

なので、付けておいても無駄、なわけで、取り敢えずいつか対応する日が来ることを 願いながら消しておくほうが良いと思って消してあります。 (それまではHTTPSの方で来る人が居ないことを願いつつ)

これ試してる時にもう一つ気付いたのが、はてなのページからブックマークボタンを作ると 上にあるように

1
2
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
      alt="このエントリーをはてなブックマークに追加"/>

という画像がリンク用に置かれますが、 この画像 は通常きちんとロードし終わる頃には数字付きの最近のボタンに入れ替わります。

ただ、JavaScriptを無効にしてると 上書きされずに残るので、そのような場合に必要です。 TweetPocketの部分も同じ。

これがJavaScript無効の時だけではなくて、 上の様にHTTPSのページからのリクエストの時にも はてなボタンは使えないのでこれが必要です。 (画像を取ってくるだけならHTTPSページでもHTTPからでも問題なく取って来れる。 逆に外してしまうとhttpsを見に行って見つからないので必須。)

ということで、基本的にJavaScriptを読み込む様な場合にはhttps?:部分は 落としておいて、 その他の場所では残しておく、というのが正しいと思う、多分。

fb-root

Octopressでも最初から_sharing.scssに入ってる

#fb-root{ display:none; }

の設定。スクリプトから呼ばれる<div id="fb-root"></div>の設定のせいで 物凄く広いサイト(10000px以上とか)で問題が出るのを防ぐ物。

fb-rootをbody開始直後に置かないと - ./

Firebugなんかで 覗いてみると、確かに

1
2
<div id="fb-root" class=" fb_reset">
  <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">

こんなのが入っていました。 このサイズ自体は通常気ならないものだと思いますが、 それ意外にも表示が崩れる事があるので 取り敢えず入れておいた方が良いものみたいです。

css - Horizontal scrollbar in Firefox caused by #fb-root - Stack Overflow

FacebookのLikeボタンを設置する jekylog

但し、上のサイトとかにもあるように公式では推奨されてない方法です。IEで上手くいかない事があるから、とのこと。

Stack Overflowの方や公式のところには色々とdisplay:none以外の方法も 載ってますが、取り敢えず現状問題ない(IEで見た感じも差し当たり問題ない) のでこのままで。

CSS SCSS変換やその他コード関連で便利なサイト

コードを置く位置

以前コードがあったafter_footer(</body>直前になる)のまま 同じ場所に置いてますが、せっかく非同期なので まとめて<head>の中に入れた方が良いかもしれません。 そのうち移動するかも。

その他参考

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた ゆっくりと

Social button BFFs / Stoyan’s phpied.com

Google Analytics 非同期トラッキングコード再考 — MOL

Sponsored Links
Sponsored Links

« BrewallにGitHubでリストファイルを管理する機能を付けた Macのプレビューで三本指スワイプが効かない時の対処法 »

}