2011年11月21日月曜日

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

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



どやっ!


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










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

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





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



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

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

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

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

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

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

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

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

・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ボタンが表示されていないw

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

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

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


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

{lang: 'ja'}

</script>



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

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

2 コメント:

さくさく さんのコメント...

うわあああすごい!!
オシャレなお店がたくさんある(*´`*)!!

都会はすごいなぁ…
ほわあああ猫かわいいかわいい!!

AIR. さんのコメント...

>>さくさくさん
ありがとうございます!都内でも指折りのオサレスポットです(笑)
東京らしい場所をまた回ってみますね!

にゃんこ写真も楽しみにしてて下さいw