非同期スクリプト用関数を作ってまとめて読み込む
追記: 2013/11/28
encodeURIComponent filter for Octopress
に書いたようにTumblrボタンも追加。
追記ここまで
追記: 2013/12/06
Facebookのボタンを｢いいね!｣から｢シェア｣に
で追加したfacebookシェアも追加。
追記ここまで
現在表示させてるシェアボタン的な物はTwitter, はてなブックマーク、Facebook、
Pocketとブックーマーク登録用ボタンです。
ブックマーク登録用ボタンはほとんどのブラウザで実質的に
ただショートカットを示すだけのボタンになってますが1 見た目です。
こんな感じで(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の方に置いてあります。
{% 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の方で来る人が居ないことを願いつつ)
これ試してる時にもう一つ気付いたのが、はてなのページからブックマークボタンを作ると
上にあるように
1
2
< 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 なんかで
覗いてみると、確かに
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で上手くいかない事があるから、とのこと。
The fb-root tag
The JavaScript SDK requires the fb-root element to be present in the page.
The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.
Stack Overflowの方や公式のところには色々とdisplay:none以外の方法も
載ってますが、取り敢えず現状問題ない(IEで見た感じも差し当たり問題ない)
のでこのままで。
CSS
コードを置く位置
以前コードがあったafter_footer(</body>直前になる)のまま
同じ場所に置いてますが、せっかく非同期なので
まとめて<head>の中に入れた方が良いかもしれません。
そのうち移動するかも。
その他参考
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた ゆっくりと…
Social button BFFs / Stoyan’s phpied.com
Google Analytics 非同期トラッキングコード再考 — MOL
関連記事
)。
