Skip to content

Instantly share code, notes, and snippets.

@BcRikko

BcRikko/index.html

Last active November 1, 2015 12:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BcRikko/4e8a221dbfbbc7da28ac to your computer and use it in GitHub Desktop.
Save BcRikko/4e8a221dbfbbc7da28ac to your computer and use it in GitHub Desktop.
Download ZIP
ソーシャルボタンまとめ（Blogger用）
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SNS Button Practice</title>
<link href="./style.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<section id="share">
<ul class="share">
<li class="share-twitter"><a expr:href='"http://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &#64;bc_rikkoさんから&amp;url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-twitter"></i><span class="btn-text">Twitter</span></a></li>
<li class="share-facebook"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&amp;t=" + data:post.title + "｜" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-facebook"></i><span class="btn-text">Facebook</span></a></li>
<li class="share-google"><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-google-plus"></i><span class="btn-text">Google+</span></a></li>
<li class="share-hatena"><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&amp;url=" + data:post.canonicalUrl + "&amp;" + data:post.title + "｜" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-hatena"></i><span class="btn-text">はてブ</span></a></li>
<li class="share-pocket"><a expr:href='"http://getpocket.com/edit?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="btn-text">Pocket</span></a></li>
</ul>
</section>
</body>
</html>
Raw
style.css
.share {
overflow: hidden;
height: 55px;
}
.share li {
font-size: 14px;
float: left;
text-align: center;
width: 19%;
margin-right: 1%;
border-radius: 3px;
list-style: none;
display: table-cell;
vertical-align: middle;
}
.share a {
display: block;
height: 30px;
padding-top: 10px;
text-decoration: none;
color: #fff;
}
.share i {
margin-right: 7px;
font-size: 1.5em;
}
.share .btn-text {
position: relative;
top: -3px;
}
.share .share-twitter {
background-color: #55acee;
box-shadow: 0 3px #2795e9;
}
.share .share-twitter:hover {
background-color: #83c3f3;
}
.share .share-facebook {
background-color: #3b5998;
box-shadow: 0 3px #2d4373;
}
.share .share-facebook:hover {
background-color: #4c70ba;
}
.share .share-google {
background-color: #dd4b39;
box-shadow: 0 3px #c23321;
}
.share .share-google:hover {
background-color: #e47365;
}
.share .share-hatena {
background-color: #2c6ebd;
box-shadow: 0 3px #225694;
}
.share .share-hatena:hover {
background-color: #4888d4;
}
.share .share-pocket {
background-color: #ee4056;
box-shadow: 0 3px #e6152f;
}
.share .share-pocket:hover {
background-color: #f26f7f;
}
.fa-hatena:before {
content: "B!";
font-family: "Verdana";
font-weight: bold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment