行き着く先はあんこ

BloggerでSNSボタン設置のあれこれ[twitter編]

blogger-snsbutton-twitter

SNSで記事をシェアしやすいように、Bloggerにシェアボタンを設置する方法を紹介します。

今回はTwitter編。ネットサーフィンしているとよく見かけるあれです。

基本的には、ここで紹介するコードはコピペで使えます。

スポンサーリンク

ツイートボタンだけ

ツイートボタンのみの場合

<a href="https://twitter.com/share" class="twitter-share-button" 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>

上にツイート回数表示

上側にツイート回数が表示されるツイートボタン

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

右にツイート回数表示

右側にツイート回数が表示されるツイートボタン

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

オリジナルボタン

ブログにこだわりたければオリジナルボタン設置がおすすめです。前のものと比べると、動作も少し軽いのが特徴です。

<a class='twitter' expr:href='&quot;http://twitter.com/share?count=horizontal&amp;original_referer=&quot; + data:blog.canonicalUrl + &quot;&amp;text=&quot; + data:post.title + &quot;|&quot; + data:title + &quot;&amp;url=&quot; + data:blog.canonicalUrl' rel='nofollow' target='_blank' title='Twitter Tweet'><img src='画像のurl'/></a>

これだけはコードを編集する必要がありますが、‘画像のurl’のところに使いたい画像のURLを指定するだけです。

画像を使わなくてもcssだけでこんな感じにできます。

Tweet

さいごに

今回はTwitterのsnsボタン設置を紹介しました。今後、有名どころのsnsボタンも紹介していく予定なので、気になった方はそちらもどうぞ。

分からないことがあればコメント等で質問歓迎です!

では!

スポンサーリンク

スポンサーリンク

コメントを残す