Blogger に twitter の 「ツイート」、facebook の 「いいね」、google の 「+1」、はてなブックマーク の 「B!」、Pocket の 「Pocket」 ボタン 等、 俗に言う ソーシャルボタン を まとめて 一気 に設置する方法をここでは載せます。 いろいろと方法はあるかと思いますが・・・ここでは、 Blogger の テンプレート を編集して実現する方法です。
([2015/03/15] 本記事ではそれぞれのSNS提供モジュールを利用しています。オリジナルデザインにしたい場合、"Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法" をご参照ください。)
ソーシャルボタン 設置手順
-
メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。
-
id が shareButtons の
b:includable
タグ の 兄弟 に、以下の タグ を コピペ します。挿入場所
ソースコード
12345678910111213141516171819202122<
b:includable
id
=
'shareButtons2'
var
=
'post'
>
<!-- twitter -->
<
span
class
=
'goog-inline-block sharebutton_twitter'
>
<
a
class
=
'twitter-share-button'
data-lang
=
'ja'
expr:data-text
=
'data:post.title'
expr:data-url
=
'data:post.url'
href
=
'https://twitter.com/share'
>ツイート</
a
>
</
span
>
<!-- facebook -->
<
span
class
=
'goog-inline-block sharebutton_facebook'
>
<
div
class
=
'fb-like'
data-layout
=
'button_count'
data-send
=
'false'
data-show-faces
=
'false'
data-width
=
'450'
expr:data-href
=
'data:post.url'
/>
</
span
>
<!-- google +1 -->
<
span
class
=
'goog-inline-block sharebutton_plusone'
>
<
div
class
=
'g-plusone'
data-size
=
'medium'
expr:data-href
=
'data:post.url'
expr:data-title
=
'data:post.title'
/>
</
span
>
<!-- hatena blog -->
<
span
class
=
'goog-inline-block sharebutton_hatebu'
>
<
a
class
=
'hatena-bookmark-button'
data-hatena-bookmark-lang
=
'ja'
data-hatena-bookmark-layout
=
'standard-balloon'
expr:href
=
'data:post.url'
title
=
'このエントリーをはてなブックマークに追加'
><
img
alt
=
'このエントリーをはてなブックマークに追加'
height
=
'20'
src
=
'http://b.st-hatena.com/images/entry-button/button-only@2x.png'
style
=
'border: none;'
width
=
'20'
/></
a
>
</
span
>
<!-- pocket -->
<
span
class
=
'goog-inline-block sharebutton_pocket'
>
<
a
class
=
'pocket-btn'
data-lang
=
'en'
data-pocket-count
=
'horizontal'
data-pocket-label
=
'pocket'
/>
</
span
>
</
b:includable
>
-
head
タグ の 任意の位置 に、以下の タグ を コピペ します。挿入場所
ソースコード
1<
script
src
=
'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'
/>
-
body
タグ の 末尾ギリギリ に、以下の タグ(コード) を コピペ します。
※ このソースコード は 元の ソースコード に対して少し修正を加えています。うまく動かない場合、コメント いただけると嬉しいです。挿入場所
ソースコード
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!-- twitter -->
<script type='text/javascript'>
$(document).ready(
function
() {!
function
(d,s,id){
var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&
#39;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>
<!-- facebook -->
<
div
id
=
'fb-root'
/>
<script type='text/javascript'>
$(document).ready(
function
() {
(
function
(d, s, id) {
var
js, fjs = d.getElementsByTagName(s)[0];
if
(d.getElementById(id))
return
;
js = d.createElement(s); js.id = id;
js.src = "
//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, &
#39;script', 'facebook-jssdk'));
});
</script>
<!-- google +1 -->
<script type='text/javascript'>
$(document).ready(
function
() {
window.___gcfg = {lang: &
#39;ja'};
(
function
() {
var
po = document.createElement(&
#39;script'); po.type = 'text/javascript'; po.async = true;
var
s = document.getElementsByTagName(&
#39;script')[0]; s.parentNode.insertBefore(po, s);
})();
});
</script>
<!-- hatena bookmark -->
<script type='text/javascript'>
$(document).ready(
function
(){
// modify url.
var
anc = document.body.getElementsByTagName(&
#39;a');
for
(
var
i = anc.length; i--;) {
if
((anc[i].className || &
#39;').indexOf('hatena-bookmark-button') >= 0) { anc[i].href = hatenaurl + anc[i].href; }
}
// load api script
!
function
(d,s,id){
var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&
#39;http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://b.st-hatena.com/js/bookmark_button.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'hatebu-wjs');
});
</script>
<!-- pocket -->
<script type='text/javascript'>
$(document).ready(
function
() {
!
function
(d,i){
if
(!d.getElementById(i)){
var
j=d.createElement("script");j.id=i;j.src="https:
//widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");
});
</script>
-
ソーシャルボタン を 表示したい位置 に、以下の コード を コピペ します。
挿入場所
ソースコード
1<
b:include
data
=
'post'
name
=
'shareButtons2'
/>
以上で作業は完了です。 実際に プレビュー または ブログページ を開いて確認してください。 おそらく、ちゃんと表示できているはずです。 (・・・この ブログ で使っている コード そのままなので、動く ハズ。。)
解説
ソーシャルボタン の 元サイト で書かれていることに対して少し手を加えた部分に関する説明です。
やりたかったことは「ブログの表示をできるだけ速くしたい」につきます。 ポイントは「スクリプトの遅延実行」です。 具体的には、次の2点を行っています。
- 実行するスクリプトを できるだけ HTML の後ろへ配置
$(document).ready()
で ドキュメント描画 後にスクリプト処理
まぁ、微々たる効果かもしれませんが・・・ facebook がたまに遅いので、そんなときは効果がハッキリと出たりします。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!