ソーシャルメディア(SNS)

広告表示が増えたzenbackを外してソーシャルボタンを設置しなおした

この記事は約12分で読めます。

ソーシャルボタンこれまでzenbackをソーシャルボタンとして設置していたが、ほとんどのページで外すことにした。zenbackはシックス・アパート社が運営していたが、先月から運営者が変更になり、その後から広告表示が増えてきた。今後もこの傾向が続きそうなので、今のうちにzenbackの代わりになるソーシャルボタンを探した。しかし、なかなかよいブログ・パーツがなく、結局あらためて設置しなおすことにした。設置したのは、Twitter、はてなブックマーク、Google+、Facebookの4つに絞った。それぞれの配布元から設定を調べ直し、MovableTypeのテンプレートに組み込んだ。

設置したソースは以下のとおり。(公式サイトで使ったソース)

このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。

<!–ツイッターのツイート–>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”ja”>ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’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>

<!–はてなブックマーク–>
<mt:If name=”entry_template”>
<!–entry_template–>
<a href=”http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”株式会社ドモドモコーポレーション公式サイト” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”//b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
<mt:ElseIf name=”category_archive”>
<!–category_archive–>
<a href=”http://b.hatena.ne.jp/entry/<$MTCategoryArchiveLink$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”株式会社ドモドモコーポレーション公式サイト” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”//b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
<mt:ElseIf name=”page_template”>
<!–page_template–>
<a href=”http://b.hatena.ne.jp/entry/<$MTPagePermalink$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”株式会社ドモドモコーポレーション公式サイト” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”//b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
<mt:Else>
<a href=”http://b.hatena.ne.jp/entry/<$mt:BlogURL$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”株式会社ドモドモコーポレーション公式サイト” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”//b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
</mt:If>

<!–グーグル +1 ボタン–> 
<div class=”g-plusone”></div>
<script type=”text/javascript”>
window.___gcfg = {lang: ‘ja’};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/platform.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<!–フェイスブックいいねボタンとコメント欄–> 
<mt:If name=”entry_template”>
<!–entry_template–>
<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.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=1*************5”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-href=”<$MTEntryPermalink$>” data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”></div>
<div class=”fb-comments” data-href=”<$MTEntryPermalink$>” data-numposts=”5″ data-colorscheme=”light”></div>
<mt:ElseIf name=”category_archive”>
<!–category_archive–>
<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.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=1*************5”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-href=”<$MTCategoryArchiveLink$>” data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”></div>
<div class=”fb-comments” data-href=”<$MTCategoryArchiveLink$>” data-numposts=”5″ data-colorscheme=”light”></div>
<mt:ElseIf name=”page_template”>
<!–page_template–>
<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.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=1*************5”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-href=”<$MTPagePermalink$>” data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”></div>
<div class=”fb-comments” data-href=”<$MTPagePermalink$>” data-numposts=”5″ data-colorscheme=”light”></div>
<mt:Else>
<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.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=1*************5”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-href=”<$mt:BlogURL$>” data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”></div>
<div class=”fb-comments” data-href=”<$mt:BlogURL$>” data-numposts=”5″ data-colorscheme=”light”></div>
</mt:If>
<br />「コメントする」をクリックするとコメントの投稿画面が現れます。<br />

注:
URL表示が必要なパーツは<mt:If name=”entry_template”>~</mt:If>内に<mt:ElseIf name=”page_template”>などをテンプレートごとに設定し分岐させている。検索結果ページやアーカイブページはトップページとまとめて<$mt:BlogURL$>とURL表示することにして<mt:Else>以下に記述した。

はてなブックマークの「button-only@2x.png」という画像は外部リンクになっていたので、ダウンロードしてから自社サイトにアップロードし内部リンクとした。

はてなブックマーク ←<img src=”/img/button-only@2x.png” alt=”はてなブックマーク” title=”はてなブックマーク” />

「1*************5」と表示されているのはFacebookのアプリIDでそれぞれが自分のものを記入すること。

ソーシャルボタン設置に関して参考にしたサイト

Facebookの「いいね!」ボタンとコメント
https://developers.facebook.com/
https://developers.facebook.com/tools/comments

Google+のボタン
https://developers.google.com/+/web/+1button/

Twitterのボタン
https://about.twitter.com/resources/buttons

はてなブックマークのボタン
http://b.hatena.ne.jp/guide/bbutton