Blogger ソーシャルボタンの自作 カスタマイズ

 このブログでもSNSボタンを付けたいと思っていたのですが、Bloggerの共有ボタンだと少し寂しい感じがするし、まともに貼り付けると劇的に重くなってしまいます。何かいいものをと思って調べていたのですが、こんな記事を見つけました。

「ソーシャルボタンを画像なしで作ってみました」
http://kuwazukiraiki.com/wordpress/blogcustom/3534

　リンクに色を付けるだけなら画像すらダウンロードしなくていいので、ブログの高速化にもよさそうです。

　とういことで、実際に作ってみました。

　まずリンクを作ります。普通のリンクにすると共有画面にタイトルやURLが入らないことがありうまくいかなかったので、Blogger標準の共有ボタンをカスタマイズします。共有ボタンはHTMLで<b:includable id='shareButtons' var='post'>の中です。

例えばtwitterなら

<b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if>

となっていますが、「a class=～」を削除してツイートの文字を付け加えます。

<b:if cond='data:top.showTwitterButton'><a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>ツイート</a></b:if>

　これで標準の小さなボタンからツイートの文字リンクに変わってるはずです。後は上記の方のようにCSSで囲んで色を付けてテーブルで横に並べました。

　とりあえずはこんな感じになりました。

　どうにも上の余白部分が取れなくてpaddingで調整していたら,
ものすごく大きくなってしまいました（笑）＋１ボタンについてはBloggerだとplusuone.jsのスクリプトがもれなくついてくるので、ちょっと考え中でそのままにしてあります。

　ボタンの移動はHTMLの中から

<div class='post-share-buttons goog-inline-block'><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div>

を探し出して任意の場所に張り付ければ移動できます。

　ド素人がやることなのでものすごく時間がかかりましたが、とにかく形にはなりました。いろいろと問題はありますがしばらく使ってみることにします。

---

関連記事: