BloggerにはてなブックマークとFacebookのボタンを設置してみる。

BloggerにはてなブックマークとFacebookのボタンを設置してみる。

まずブックマークされることも、「いいね」を押されることもないでしょう。

ただの日記、備忘録として使ってるので、誰も気にならないでしょう。

Asterlistさんの記事を参考にしました。
Blogger記事に「はてなブックマーク」ボタンを設置する方法 | Asterlist
Blogger記事にFacebookボタンを設置する方法 | Asterlist

わかりやすいです。

でも正直あまり得意じゃないんです。


コードを出してBloggerように変えたのはいいけど、
テンプレートのどこに差し込んでいいのかわからないんです。

「data:post.body」の直下

とありましたが、HTMLの中に3つほどあったので悩んだ挙句
サッパリとあきらめました。

ではどうしたかと言うと。

テンプレートではなく、レイアウトからガジェットで追加しました。

HTML/JavaScript追加
というガジェットです。

とにかくめんどくさがり屋なので、
はてブとfacebookのボタンのコードを普通に並べただけです。
Asterlistさんのブログで教えてくれたコードから少しいじってます。

実際使ったコード

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' class="hatena-bookmark-button" expr:data-hatena-bookmark-title='data:post.title' data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"> </div> <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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>


プレビューを見てみると、とりあえず見れたのでまあいいかといった感じです。

ガジェットでいれるのならそのままコピペでOKだと思います。
出来なかったらお叱りのコメントでも入れて下さい。
適当ですみません。