IT the Best
SNSシェアボタン作成は手を付けてみると意外と簡単でしたが、SNSアイコンやボタンスタイルなどの素材集めが案外難しくて困るPointでした。
当記事は、SNSシェアボタンの作成からアイコンやスタイルに使用した素材についてまとめたものです。
シェアボタン制作
はてなブックマーク・Facebook・ツイッター・tumblr・ライン・Pocketの各SNSのシェアボタン制作の素材からScript処理まで。
素材集め
各SNSのロゴ/アイコンのダウンロードサイトのリンクと、ロゴ/アイコンに近いHTMLカラーコード。
はてなブックマーク ー 素材集 - 株式会社はてな
ロゴに近いHTMLカラーコード：
#00a4de
Facebook － 「f」ロゴ
ロゴに近いHTMLカラーコード：
#1877f2
ツイッター － Twitterのブランドリソース
アイコンに近いHTMLカラーコード：
#1da1f3
tumblr － Logo | Tumblr
ロゴに近いHTMLカラーコード：
#001935
ライン － LINE APP ICON GUIDELINE
アイコンに近いHTMLカラーコード：
#00b900
Pocket － https://icons8.jp/icons/set/get-pocket
ロゴに近いHTMLカラーコード：
#f50057
他にも、Font Awesomeというアイコンのツールキットを利用する方法があります。アイコンツールは、簡単にSNSアイコンや矢印などのアイコンを使用できるサービスです。Font Awesome以外にもアイコンツールはあると思いますが、他サイトでもよく目にするので、アイコンツールを利用するのにFont Awesomeを選択して損はないと思います。無料と有料で利用できます。無料でも十分活用できます。
アカウント登録が必要となりますが、そのための手順は「メールアドレスの入力」「メールアドレスの確認」「パスワードの登録」だけで簡単に済みます。
今回のSNSのアイコン以外にも様々なアイコンが使用できるので便利です。
ボタン作成
各SNSの素材を使用したボタンの作成(はてなブックマーク・ライン以外はFont Awesomeからアイコンを使用しています)。
「シェアボタン」「HTMLコード/CSSコード」
共通部分
<div class="s-share-buttons">
<a class="" href="#">
<span class="button-icon"></span>
<span class="button-cap">Template</span>
<span class="share-count"></span>
</a>
</div>.s-share-buttons>a{
color:white;
text-decoration: none;
align-content: center;
align-items: center;
justify-content: center;
display: inline-flex;
padding: 5px 10px;
border-radius: .2em;
font-weight: bolder;
font-size: 80%;
}
.shar-count{
display: none;
}
.s-share-buttons .button-icon.fab{
margin: 0 10px 0;
}
はてなブックマーク
<div class="s-share-buttons">
<a class="s-share-button-hatena" href="#">
<span class="button-icon"></span>
<span class="button-cap">はてなブックマーク</span>
<span class="share-count"></span>
</a>
</div>.s-share-button-hatena{
background-color: #00a4de;
}
.s-share-button-hatena>.button-icon{
background-size: cover;
display: inline-block;
width: 30px;
height: 30px;
background-image: url("https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png");
}
<div class="s-share-buttons">
<a class="s-share-button-facebook" style="font-size: 100%;color: #1877f2;" href="#">
<span class="button-icon fab fa-facebook-f"></span>
<span class="button-cap">Facebook</span>
<span class="share-count"></span>
</a>
</div>.s-share-button-facebook{
background-color: #1877f2;
}
ツイッター
<div class="s-share-buttons">
<a class="s-share-button-twitter" style="font-size: 100%;color: white;" href="#">
<span class="button-icon fab fa-twitter"></span>
<span class="button-cap">Twitter</span>
<span class="share-count"></span>
</a>
</div>.s-share-button-twitter{
background-color: #1da1f3;
}
tumblr
<div class="s-share-buttons">
<a class="s-share-button-tumblr" style="font-size: 100%;color: white;" href="#">
<span class="button-icon fab fa-tumblr"></span>
<span class="button-cap">tumblr</span>
<span class="share-count"></span>
</a>
</div>.s-share-button-tumblr{
background-color: #001935;
}
ライン
<div class="s-share-buttons">
<a class="s-share-button-line" style="font-size: 100%;color: white;" href="#">
<span class="button-icon"></span>
<span class="button-cap">LINE</span>
<span class="share-count"></span>
</a>
</div>.s-share-button-line{
background-color: #00b900;
}
.s-share-button-line>.button-icon{
background-size: cover;
display: inline-block;
width: 30px;
height: 30px;
background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190921/20190921014920.jpg");
}
<div class="s-share-buttons">
<a class="s-share-button-pocket" style="font-size: 100%;color: white;" href="#">
<span class="button-icon fab fa-get-pocket"></span>
<span class="button-cap">Pocket</span>
<span class="share-count"></span>
</a>
</div>.s-share-button-pocket{
background-color: #f50057;
}
リンク設定
myurl,mytitleにはシェアしたい記事のURLとタイトルが入ります。
はてなブックマーク
<a href="https://b.hatena.ne.jp/entry/panel/?url=myurl"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=myurl"></a>
ツイッター
<a href="https://twitter.com/intent/tweet?original_referer=myurl&text=mytitle&url=myurl"></a>
tumblr
<a href="http://www.tumblr.com/share?v=3&u=myurl"></a>
ライン
<a href="https://social-plugins.line.me/lineit/share?url=myurl"></a>
<a href="https://widgets.getpocket.com/v1/popup?url=myurl"></a>
これらのリンクに記事URLを設定するために、JavaScriptで処理をさせます。
例
<div class="s-share-buttons">
<a class="s-share-button-hatena sample" href="#" target="_brank">
<span class="button-icon"></span>
<span class="button-cap">はてなブックマーク</span>
<span class="share-count"></span>
</a>
</div>//https://b.hatena.ne.jp/entry/panel/?url=myurl
var url=location.href;
//var title = encodeURIComponent($("title").html());
var href="https://b.hatena.ne.jp/entry/panel/?url="+url;
$("a.s-share-button-hatena.sample").attr("href",href);
リンク詳細設定
リンク先を小窓で表示させる方法です。
$("a.s-share-button").click(function(event){
event.preventDefault()
var width=400,height=500;
var top=(window.screen.height-height)/2,left=(window.screen.width-width)/2 //中央表示用
window.open(this.href,"windowName","width="+width+",height="+height+",left="+left+",top="+top);
})
例
<div class="s-share-buttons">
<a class="s-share-button-hatena sample2" href="#" target="_brank">
<span class="button-icon"></span>
<span class="button-cap">はてなブックマーク</span>
<span class="share-count"></span>
</a>
</div>$("a.s-share-button-hatena.sample2").click(function(event){
event.preventDefault()
var width=400,height=500;
var top=(window.screen.height-height)/2,left=(window.screen.width-width)/2 //中央表示用
window.open(this.href,"SNS_window","width="+width+",height="+height+",left="+left+",top="+top);
})
