過去に、【
Google+ボタン】【
facebookいいねボタン】【
twitterツイートボタン】【
はてなブックマークボタン】の設置方法を書いてきました。
今日はその４種類のボタンに、記事(ＵＲＬ)を関連付ける方法を書きたいと思います。
<g:plusone size="medium"></g:plusone>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
上から、G+ボタン、いいねボタン、ツイートボタン、はてブボタンです。
上記は比較的シンプルな形です。
これを以下のように書き換えれば、記事のアドレスを関連づけられます。
ＵＲＬは、【http://blog.syuka.com/article/post26673090.html】で、ツイート用の記事タイトルは【ボタンにＵＲＬを関連づける方法】です。
<g:plusone size="medium" href="http://blog.syuka.com/article/post26673090.html"></g:plusone>
<div class="fb-like" data-href="http://blog.syuka.com/article/post26673090.html" data-send="false" data-layout="button_count" data-width="60" data-show-faces="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="ボタンにＵＲＬを関連づける方法" data-url="http://blog.syuka.com/article/post26673090.html" data-lang="ja">ツイート</a>
<a href="http://b.hatena.ne.jp/entry/http://blog.syuka.com/article/post26673090.html" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
これをさくらのブログで関連づけるには、以下のように書き換えます。
【デザイン】＞【コンテンツ】＞【記事】から、【コンテンツHTML編集】をクリックして、追記してください。
<g:plusone size="medium" href="<% article.page_url %>"></g:plusone>
<div class="fb-like" data-href="<% article.page_url %>" data-send="false" data-layout="button_count" data-width="60" data-show-faces="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="<% article.subject %>" data-url="<% article.page_url %>" data-lang="ja">ツイート</a>
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
最後に【保存する】をクリックして完了です。
これをブロガーブログで関連づけるには、以下のように書き換えます。
はてなブックマークの対応方法は分かりません。
【テンプレート】＞【HTMLの編集】＞【続行】から、【ウィジェットのテンプレートを展開】に印を入れて追記してください。
<g:plusone size='medium' expr:href='data:post.url'></g:plusone>
<div class='fb-like' expr:data-href='data:post.url' data-send='false' data-layout='button_count' data-width='60' data-show-faces='true'></div>
<a href='https://twitter.com/share' class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' data-lang='ja'>ツイート</a>
最後に【テンプレートを保存】をクリックして完了です。
これで私は関連付けられる事を確認しました。
ただし、ブロガーブログでは、サブドメインの設定をしていない場合、jpドメインの方に関連づけられますので、comに関連づけたい場合は、シンプルなボタンを付けるしかないようです。
テンプレートはバックアップをとってから編集する事をお勧めします。
