これまで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
この記事を書いた遠田幹雄は中小企業診断士です
遠田幹雄は経営コンサルティング企業の株式会社ドモドモコーポレーション代表取締役。石川県かほく市に本社があり金沢市を中心とした北陸三県を主な活動エリアとする経営コンサルタントです。
小規模事業者や中小企業を対象として、経営戦略立案とその後の実行支援、商品開発、販路拡大、マーケティング、ブランド構築等に係る総合的なコンサルティング活動を展開しています。実際にはWEBマーケティングやIT系のご依頼が多いです。
民民での直接契約を中心としていますが、商工三団体などの支援機関が主催するセミナー講師を年間数十回担当したり、支援機関の専門家派遣や中小企業基盤整備機構の経営窓口相談に対応したりもしています。
保有資格:中小企業診断士、情報処理技術者など
会社概要およびプロフィールは株式会社ドモドモコーポレーションの会社案内にて紹介していますので興味ある方はご覧ください。
お問い合わせは電話ではなくお問い合わせフォームからメールにておねがいします。新規の電話番号からの電話は受信しないことにしていますのでご了承ください。
【反応していただけると喜びます(笑)】
記事内容が役にたったとか共感したとかで、なにか反応をしたいという場合はTwitterやフェイスブックなどのSNSで反応いただけるとうれしいです。
遠田幹雄が利用しているSNSは以下のとおりです。
facebook https://www.facebook.com/tohdamikio
ツイッター https://twitter.com/tohdamikio
LINE https://lin.ee/igN7saM
チャットワーク https://www.chatwork.com/tohda
また、投げ銭システムも用意しましたのでお気持ちがあればクレジット決済などでもお支払いいただけます。
※投げ銭はデジタルコンテンツ購入という通販のしくみにしました。
※投げ銭は100円からOKです。シャレですので笑ってください(笑)