Google Bloggerで共有ボタンの表示方法

今回はいつもの話とは打って変わって、
少しまじめにBlogspot(Google Blogger)のカスタマイズについてです。
Web関連のネタはなんか久しぶりな気がしますが(笑)



どやっ！

えー写真に深い意味はありませんｗ










話を戻しまして^^;CrossOverがちゃぶろ(2chブログ)から移転してきてから
早くも4年が経とうとしていますが、それまでに
このBloggerのページをかなり改悪カスタマイズしたせいで
新たに実装された、便利な機能の共有ボタンにチェックを入れても
見事に表示されませんでしたorz

古いテンプレートを使ってるからじゃないのかって言う
オチもあるかも分かりませんが。。





ですので、なんとか実装出来ないものか、
ツイッターと連動出来たら(つぶやく人がいらっしゃるかは分かりませんがｗ）
面白いだろうと思って色々試行錯誤した奮闘記を書いておきます。



と言う訳でまずこちらのサイト。

・Bloggerで共有ボタンが表示できない

ダルシーさんの記事の通りにやってみたんですが、ダメでした。。
うちのテンプレートはかなり小細工しまくっているのでｗ
HTMLを弄っても反応なし。そういう時は

色々他にも悩んでいるサイトがあるんじゃないかとグーグル先生に教えてよ！
と頼んだら次に見つかったのがこちら。

・bloggerの共有ボタン（Twitterのボタンや+1ボタン）が表示されないときの対処方法

杜鵑華さんちの旅人くんの旅人さんのページを参照。

こちらでも詳細に書かれているので、試してみたところ、やはりアウト。
ここで諦めたら終わりだよ！と僕の頭の中に安西先生が語りかけるので
心が折れそうになるのを必死に我慢しつつｗ

次に参照したのがこちら。

・Google Bloggerにて共有ボタンが表示されない場合の対処

PCあれこれ探索さんのサイトです。
先ほどのリンク先にも当てはまることですが、自分のテンプレートには
載っていないコードがあったりで、
そのままコピペしても上手くいかない事が多く、上記のページのソースコードを見ても

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
<span style="color: #ff0000;">

ここに下記を追加

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div></span>

ここまで

</div>

上記の様になってない場合は追加すれば表示されると思います

と、書かれていたので、うちのサイトの場合

<span style="color: #ff0000;">

ここのコードが無かったので、追加で書き足したら
無事表示されほっと一息。
ところが。。んん？よく見ると、今度はGoogoleの+1ボタンが表示されていないｗ

そう言えば先に調べていた際、

・Bloggerの共有ボタンで+1ボタンが表示されない件

ボンタン飴さんのサイトでも報告が挙がっていたので


<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

{lang: 'ja'}

</script>



上記のコードを更にヘッダに追加してやれば、+1ボタンが表示されてなおかつ
日本語のボタンになって見やすくなります。
うちのサイトなら、もうちょいサイズを大きくすると見やすいかも知れませんね。

と言う訳で無事表示が可能になりました。めでたしめでたし。
リンク先のサイト様には大変お世話になりました。
この場を借りてお礼申し上げます。

[Google Bloggerで共有ボタンの表示方法 Read More..]