SNSシェアボタンをWebアイコンフォントで表示

各ページに設置してあるSNSシェアボタンを画像ではなく、Webアイコンフォントで表示させることにした。

8311.png

以下、当サイトでは、という前置きは省くので、英数字やMT出力タグ <mt:~> など各自環境に読み換えて下さい。

Webアイコンフォント

FontAwesomeの無料版を使用。メールアドレスの登録が必要。利用者登録後、発行されたコードを<head>内に記述。

<script src="//kit.fontawesome.com/123456789.js" crossorigin="anonymous"></script>

テンプレート

シェアボタンの種類を増やしたので二段組み。尚、種別毎に見やすいよう、ここでは空白行を入れてある。

<div class="sns">
<ul>
 
<li class="twitter"><a href="//twitter.com/share?url=<mt:CanonicalURL>&text=<mt:EntryTitle encode_html="1">" target="_blank" title="Twitter"><i class="fab fa-twitter"></i><span> Twitter</span></a></li>
 
<li class="facebook"><a href="//www.facebook.com/share.php?u=<mt:CanonicalURL>" target="_blank" title="Facebook"><i class="fab fa-facebook-square"></i><span> Facebook</span></a></li>
 
<li class="hatena"><a href="//b.hatena.ne.jp/add?mode=confirm&url=<mt:CanonicalURL>&title=<mt:EntryTitle encode_html="1">" target="_blank" title="はてなブックマーク"><b>B!</b><span> Hatena</span></a></li>
 
<li class="pocket"><a href="//getpocket.com/edit?url=<mt:CanonicalURL>" target="_blank" title="Pocket"><i class="fab fa-get-pocket"></i><span> Pocket</span></a></li>
 
<li class="tumblr"><a href="//www.tumblr.com/share?v=3&u=<mt:CanonicalURL>" target="_blank" title="tumblr"><i class="fab fa-tumblr"></i><span> tumblr</span></a></li>
 
<li class="line"><a href="//line.me/R/msg/text/?<mt:EntryTitle encode_html="1">%0D%0A<mt:CanonicalURL>" target="_blank" title="LINE"><i class="fab fa-line"></i><span> LINE</span></a></li>
 
</ul>
<ul>
 
<li class="feedly"><a href="//feedly.com/i/subscription/feed/https%3A%2F%2Fumakaras.net%2Fatom.xml" target="_blank" title="Feedly 購読"><i class="fab fa-flipboard fa-rotate-315"></i> Feedly</a></li>
 
<li class="atom"><a href="/atom.xml" target="_blank" title="feed"><i class="fas fa-rss"></i> feed</a></li>
 
<li class="like">いいねボタン</li>
</ul>
</div>

<i class="fab fa-twitter"></i>など、<i>~</i>がWebアイコンフォント。はてなブックマークとFeedlyはフォントが無いが、はてなは「B!」を太字にして公式アイコンっぽく表現。

Feedlyは「flipboard」フォントに小細工し、公式カラーを合わせて誤魔化した。

<i class="fab fa-flipboard"></i>

↑この表記 を315度回転させると、こうなる→

<i class="fab fa-flipboard fa-rotate-315"></i>

「fa-rotate-315」という文字を追記した。

リンク中の <mt:EntryTitle encode_html="1"> はページタイトル、<mt:CanonicalURL> はページURL、lineの「%0D%0A」は改行コード、feedlyの「/feed/」後は購読用ファイル(https://umakaras.net/atom.xml)をエンコードしたもの。

<span>~</span>はパソコン表示時のサイドバー、タブレット、スマートフォンなど、狭い画面ではカットされるようにタグで挟み、スタイルシートで指定。二行目は現在のところボタンが少ないこともあり、Feedly以降は<span>タグ不使用。

8312.png

最後の「like いいねボタン」の詳細は別記事で。

スタイルシート

.sns ul{
display: flex;
flex-wrap: wrap;
text-align: center;
}
.sns ul li{
display: inline;
flex: 1;
margin: 2px;
padding: 5px;
}
.sns ul li a{
width: 100%;
display: inline-block;
color: #ffffff;
}
.facebook{
background: #3b579e;
}
.twitter{
background: #55adef;
}
.hatena{
background: #00a4de;
}
.pocket{
background: #f13d53;
}
.tumblr{
background: #39475d;
}
.line{
background: #00c300;
}
.feedly{
background: #89c131;
}
.atom{
background: #ff9933;
}
.like{
background: #cc6699;
}

パソコンなど2カラム表示画面のサイドバーで<span>の文字を消す場合の記述。

aside .sns span{
display: none;
}

タブレットやスマートフォンなど、狭い画面で<span>の文字を消す場合の記述。

@media(max-width:768px) {
 .sns span{
 display: none;
 }
}

画像に関する記述について、アイコン使用時はスタイルシートにて指定したが、今回はテンプレートに直接組み込む形を取った。

share