2011年06月11日

Bloggerへ各種ソーシャルボタンを各記事ごとに設置する方法

最近は、様々なソーシャルサイトが数多く存在しており、
それらのサイトへ情報を共有することが出来ます。

メジャーなところだと、twitter、facobookなどですね。
※勿論、ソーシャルボタンを用意しています。

実際にBloggerに設置しようと思ってもうまくいかないことが多々あるので、
そのままコピー&ペーストして、設置が出来るようにソースを用意しました。

○twitter(※アカウント名だけは、自分のものを記述)
<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='twitterアカウント名' expr:data-text='data:title + ": "+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

○facebook
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=105&height=21&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:21px;'/>

○はてなブックマーク
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' data-hatena-bookmark-title=' + data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

○EVERNOTE
<script src='http://static.evernote.com/noteit.js' type='text/javascript'/><a expr:onclick='"Evernote.doClip({providerName:\"" + data:title + "\", title:\"" + data:post.title + "\", url:\"" + data:post.url + "\"}); return false;"' href='#'><img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/></a>

○Google +1
・</head>タグ前
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'ja'} </script>

・設置したいところ
<g:plusone expr:href='data:post.url' size='medium'/>

※twitter、facebookk、Google +1の場合、bloggerのブログ投稿設定で追加することも可能です。

まあ、これだけあれば、十分かな。

あと、試していないですが、Bloggerの場合、タイトルとURLのタグは、
以下のようになっています。

【記事URL】    data:post.url
【記事タイトル】 data:post.title

この部分を各ブログのタグに置き換えれば、なんとなく出来そうな予感がするな
posted by memo4me at 01:48 | Comment(1) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
素晴らしいメモです!今日一日悩んでいた問題がやっと解決しました(涙)ありがとうございました!
Posted by いずたん at 2012年01月03日 01:21
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/209059823
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。