bloggerのテンプレートにソーシャルボタンを追加する方法

最近なぜかソーシャルボタンの説明ページをよく目にしてました。 それに触発されて、このブログにもボタンを追加です。 追加したのはツイッターのツイートボタン、はてなブックマークボタン、Google+1ボタン、LINEで送るボタンの4つです。 ボタンを押したら各サービスに個別の投稿のURLを送るようにしてみました。 一応自分のやり方で試したので、備忘録として追加方法のメモを残しておきます。

ええと、ぶっちゃけSNSは使ってないので動作確認はしてません。 ツイッターは、ボタンクリックでそれっぽいメッセージが見れたので多分大丈夫でしょう。 はてなもjavascriptを無効にした状態でそれっぽいメッセージが見れました。 LINEは特定のURLにアクセスするだけのようです。 リンク先が想定どおりの文字列だったので大丈夫っぽいです。 きっとみんな大丈夫です。 Google+1ボタンだけ全く確認してないけど多分コレも大丈夫。

あ、スマホなどのモバイル機ではノータッチです。

...そんな正確さ具合でいい人は参考にしてください。 鵜呑みにせずに試してみればいいじゃない。

まず、bloggerで標準で用意されているソーシャルボタンを追加する方法を説明します。 bloggerは標準でいくつかのソーシャルボタンに対応しています。 「レイアウト」から「ブログの投稿」の「編集」リンクをクリックすると「ブログの投稿の設定」ページが開きます。 そこで「共有ボタンを表示する」の項目をチェックすればok。

見れば分かるのですが、標準で用意されているボタンはアメリカで評判?のサービスに限られています。 それで不満があるならサービスはサードパーティのガジェットを用意するか、手動で追加しなければなりません。 私ははてなブックマークやLINEなど日本である程度普及しているサービスのボタンを追加したかったので、勉強も兼ねて自前で追加してみました。 いくつか方法はあるようですが、ここではテンプレートを書き換えて手動でボタンを表示する方法を試しました。

注) テンプレートを書き換えた後「ブログの投稿の設定」を変更すると反映されないかもしれません。 または、「ブログの投稿の設定」を変更するとテンプレートを書き換えた内容が削除されるかもしれません。 自前でテンプレートを書くか、bloggerの用意した「ブログの投稿の設定」だけで済ませるかの選択になります。

bloggerのテンプレートの文字列の置き換えについて

bloggerのブログのトップページを見ると、たいていの場合はいくつかの投稿が並んでいると思います。 ソーシャルボタンのパラメータをちゃんと設定しないと、個別の投稿を見てボタンを押したのにブログのトップページへのリンクが送られたりしてしまいます。 個別の投稿のURLをボタンに関連付ける必要があるのです。 ここではテンプレートでその設定をする最低限の知識について説明します。 (行き当たりばったりで見つけたやり方なのでその程度の説明です。)

bloggerのテンプレートは大枠はhtmlがそのまま書かれています。 投稿のタイトルや本文など、置き換えが必要な部分のみ<data:post.title/>や<data:post.body/>などの置き換え用タグが書かれているのです。 実際のテンプレートは色々な場合分けが書かれていて読み辛いですが、とにかく個別の投稿のヘッダやフッタにソーシャルボタンのタグを書き込み、URLなどのパラメータだけ投稿ごとのパラメータを指定すればokです。

ここで使う置き換え用コードは次の通りです。

• <data:post.url/> ... この要素がある部分に個別の投稿のURLが埋め込まれます。
• <tag expr:attr="data:post.url" /> ... tagのattr属性に個別の投稿のURLが埋め込まれます。
• <tag expr:attr="data:post.title" /> ... tagのattr属性に個別の投稿のタイトルが埋め込まれます。
• <tag expr:attr="&quot;文字列&quot; + data:post.url" /> ... tagのattr属性に文字列+個別の投稿のURLが埋め込まれます。

この置き換えはbloggerのサーバーが行います。 サーバーにとって意味があるのは、テンプレートがxmlで書かれていることと<data:post.url/>などの置き換えタグのみです。 javascriptなどは単なる文字列にすぎません。 よってjavascriptの中に置き換えタグを書くのは有効です。

expr:attrの中の&quot;はサーバーに「これが引数だよ」と教えるためにあります。 javascriptふうに書くと、<tag expr:attr="&quot;文字列&quot; + data:post.url" />は<tag expr:attr="strcat(文字列,data:post.url)" />みたいなもんですかね? サーバーはexpr:attrの中でのみそのような処理をします。

bloggerのテンプレートのソーシャルボタン追加位置

ヘッダにソーシャルボタンを追加する場合はdiv.post-headerの子孫、div.post-header-line-1の最後に追加します。 フッタに追加する場合はdiv.post-footerの子孫、div.post-footer-line-(1 ～ 3)の中で適当な位置に追加します。

テンプレートによってはモバイル用、PC用が別々に書かれています。 そういう場合はpost-header-line-1などで検索して両方に追加します。

以下、個別のソーシャルボタン用コードの作り方を載せます。 必要なコードを書いてまとめて、ここで説明した位置にまとめて追加しましょう。

ツイッターのツイートボタンのコード

• オフィシャルの説明 ... https://twitter.com/about/resources/buttons#tweet

オフィシャルサイトでhtmlコードを作ってもらいます。 好みのオプションでボタンを作りましょう。 「ボタンのオプション」-「URLを共有」でページのURLは使わず、「http://dummy」と書いて作ります。 それをテキストエディタにコピー&ペーストして「data-url="http://dummy"」の部分を「expr:data-url="data:post.url"」に変更しましょう。 (残念ながら個別の投稿のタイトルを指定する方法は分かりませんでした。)

サンプルコードはこんな感じです。 ブログ固有のデータは無いので、多分他のbloggerでもそのまま使えます。

<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" data-lang="ja" data-count="none">ツイート</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>

はてなブックマークボタンのコード

• オフィシャルの説明 ... http://b.hatena.ne.jp/guide/bbutton

オフィシャルサイトでhtmlコードを作ってもらいます。 好みのオプションでボタンを作りましょう。 「2. ボタンの設定をしましょう」で「ページのアドレス」を「http://dummy」と書きます。 「ページのタイトル」を「dummy_title」と書きます。 できたコードをテキストエディタにコピー&ペーストして「href="http://b.hatena.ne.jp/entry/http://dummy"」の部分を「expr:href="&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url"」に変更しましょう。 「data-hatena-bookmark-title="dummy_title"」の部分を「expr:data-hatena-bookmark-title="data:post.title"」に変更しましょう。

サンプルコードはこんな感じです。 ブログ固有のデータは無いので、多分他のbloggerでもそのまま使えます。

<a expr:href="&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url" class="hatena-bookmark-button" expr:data-hatena-bookmark-title="data:post.title" data-hatena-bookmark-layout="standard-noballoon" data-hatena-bookmark-lang="ja" 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>

Google +1ボタンのコード

• オフィシャルの説明 ... https://developers.google.com/+/web/+1button/?hl=ja

オフィシャルサイトでhtmlコードを作ってもらいます。 好みのオプションでボタンを作りましょう。 それだけではurlの指定はできないので、説明に従って属性の記述を追加します。 <div class="g-plusone" ～>タグに「expr:data-href="data:post.url"」の属性を追加しましょう。 (全く試してないので動作の様子や個別の投稿のタイトルを指定する方法などは不明です。)

サンプルコードはこんな感じです。 ブログ固有のデータは無いので、多分他のbloggerでもそのまま使えます。

<div class="g-plusone" data-annotation="none" expr:data-href="data:post.url"></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/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

LINEで送るボタンのコード

• オフィシャルの説明 ... http://media.line.naver.jp/howto/ja/

説明を見た限り単純にリンクを作るだけでもできそうですが、他の例に倣ってオフィシャルサイトでhtmlコードを作ってもらいます。 好みのオプションでボタンを作りましょう。 ここでは個別の投稿のURLを送る例を説明します。 「送るテキストを選択」で「直接入力」を指定し、「http://dummy」と書きます。 (私の環境ではなぜかテキストボックスをクリックし続けながら入力しないとできませんでした。)

できたコードをテキストエディタにコピー&ペーストしてLineButtonの引数を書き換えます。 「http://dummy」の部分を「<data:post.url/>」に変更しましょう。 <data:post.url/>を囲うダブルクォーテーション(")は必要なので注意。 そのままだと「置き換えられたURL」と「閲覧中のURL」の両方が送られてしまいます。 「"withUrl":true」を「"withUrl":false」に変更し、閲覧中のURLが送られないようにします。

LINEで送るボタンではモバイルとPCでは挙動が違うようです。 その切り替えも書いておく必要があります。 モバイル用のコードでは「"pc":false」を、PC用のコードでは「"pc":true」と書きましょう。 テンプレートのどれがモバイル用でどれがPC用かはカンで判断します。 「div.post-footer-line-1」の親をたどって<b:includable id='mobile-post' var='post'>などとあったら多分モバイル用でしょう。 誰か試して。 ってこのブログのコメントも無効にしてあるんで返事を集める方法とか、無いんですけどね。

まぁ、とりあえずサンプルコードはこんな感じです。 ブログ固有のデータは無いので、多分他のbloggerでもそのまま使えます。

<!-- for pc -->
<span>
<script type="text/javascript" src="http://media.line.naver.jp/js/line-button.js?v=20130508" ></script>
<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":true,"lang":"ja","type":"a","text":"<data:post.url/>","withUrl":false});
</script>
</span>

<!-- for mobile -->
<span>
<script type="text/javascript" src="http://media.line.naver.jp/js/line-button.js?v=20130508" ></script>
<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a","text":"<data:post.url/>","withUrl":false});
</script>
</span>