Bloggerで使えるSNSボタン

amazon
Bloggerで使えるSNSボタンを作ってみました。

photo-credit: IconAarchive



https://github.com/syui/octopress-share-button/blob/master/blogger.html

<a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span class='hatena-name'><span class='icon-hatena' style='float: left; font-size: 20px; padding-left: 5px;'/> Bookmark</span></a>

<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=psp_t&quot;' target='_blank'><span class='twitter-name'><span class='icon-twitter' style='float: left;font-size: 20px;padding-left: 5px;color: #fff;'/> Twitter</span></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><span class='googleplus-name'><span class='icon-googleplus' style='float: left; font-size: 20px; padding-left: 5px; color: #fff;'/> +1</span></a>

<a expr:href='&quot;http://www.feedly.com/home#subscription/feed/&quot; + data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><span class='feedly-name'><span class='icon-feed' style='float: left; font-size: 20px; padding-left: 5px; color: #fff;'/> +Feedly</span></a>


a:hover {
text-decoration: none;
}

span.twitter-name:hover {
opacity: 0.6;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

span.googleplus-name:hover {
opacity: 0.6;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

span.hatena-name:hover {
opacity: 0.6;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

span.feedly-name:hover {
opacity: 0.6;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

span.twitter-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #66CCFF;
display:block;
}

span.googleplus-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #CC3300;
display:block;
}

span.hatena-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #3366CC;
display:block;
}

span.feedly-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #339966;
display:block;
}


これを、 post-header-linepost-footer-lineなどに挿入します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer'>
<div class='post-footer-line-1'>

<a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span class='hatena-name'><span class='icon-hatena' style='float: left; font-size: 20px; padding-left: 5px;'/> Bookmark</span></a><a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=psp_t&quot;' target='_blank'><span class='twitter-name'><span class='icon-twitter' style='float: left;font-size: 20px;padding-left: 5px;color: #fff;'/> Twitter</span></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><span class='googleplus-name'><span class='icon-googleplus' style='float: left; font-size: 20px; padding-left: 5px; color: #fff;'/> +1</span></a><a expr:href='&quot;http://www.feedly.com/home#subscription/feed/&quot; + data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><span class='feedly-name'><span class='icon-feed' style='float: left; font-size: 20px; padding-left: 5px; color: #fff;'/> +Feedly</span></a>

</div>
</div>
</b:if>