シェアボタンを非同期読み込みでまとめて設定

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

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

非同期スクリプト用関数を作ってまとめて読み込む
Octopress用のコード
いくつか気になったこととか

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

追記: 2013/11/28

encodeURIComponent filter for Octopress

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

追記ここまで

追記: 2013/12/06

Facebookのボタンを｢いいね!｣から｢シェア｣に

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

追記ここまで

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

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

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

{%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等)。

sass/partials/_sharing.scss

.sharing { @extend .group; margin-bottom:20px; ul li { display: block; float: left; margin-right: 5px; } } li.hatebu { width: 60px; } li.twitter { width: 80px; } li.googleplus { width: 65px; } li.facebook { width: 100px; } li.facebook_share { width: 100px; margin-top: -5px; } #fb-root { display: none; } li.pocket { width: 90px; } li.bookmark { width: 100px; margin-top: -4px; } li.tumblr { width: 60px; } .sharing a.tumblr_button { display: inline-block; text-indent: -9999px; overflow: hidden; height:20px; //background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent; withd: 81px; //background:url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent; width: 61px; background:url('http://platform.tumblr.com/v1/share_2T.png') top left no-repeat transparent; width: 61px; } .link_btn { background-color: $nav-bg; padding: 2px 5px 0px; position: relative; text-decoration: none; border: solid 2px darken($nav-bg, 15); border-radius: 10px; &:active { padding: 3px 5px 1px; top: 1px; } &::before { background-color: $nav-bg; content: ""; display: block; position: absolute; width: 100%; height: 100%; padding: 1px; left: -1px; top: -1px; z-index: -1; border-radius: 10px; } }

.link_btnに関しては、実際にはsass/base/_layout.scssの方に置いてあります。

source/_includes/after_footer.html

{% 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/の下にこんな感じで作って置いておいて、好きな場所でインクルードします。

<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.js と bookmark_button-wo-al.js は同じコードになっています。

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

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

LinkWithin関連

上に挙げたlinkwithin.htmlで pixel.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の方で来る人が居ないことを願いつつ)

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

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

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

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

これが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~~なんかで覗いてみると、確かに

<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変換やその他コード関連で便利なサイト

~~css2sass Convert CSS Snippets to Syntactically Awesome StyleSheets code~~: CSSSCSS/SASS
SassMeister The Sass Playground!: SCSS/SASSCSS
Make your code beautiful with Code Beautify: 色々変換。コードを整えたり、Webにあるコードを直接取ってきて変換したりも出来る。
Create a new fiddle - JSFiddle: 上にも載せたHTML/CSS/JavaScriptで直接遊べるもの。
CodePen: JSFiddleと似たような事ができるが、それ以上に人が作ったサンプルが沢山あって楽しい。
Closure Compiler Service: Googleのコード最適化ツール。