IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

意外と簡単なMyシェアボタンの作成 -- 難しくて困るのは素材を集めることでした。

f:id:Surprisedblog:20190922004720p:plain

 

 

SNSシェアボタン作成は手を付けてみると意外と簡単でしたが、SNSアイコンやボタンスタイルなどの素材集めが案外難しくて困るPointでした。

当記事は、SNSシェアボタンの作成からアイコンやスタイルに使用した素材についてまとめたものです。

 

シェアボタン制作

はてなブックマーク・Facebook・ツイッター・tumblr・ライン・Pocketの各SNSのシェアボタン制作の素材からScript処理まで。

素材集め

各SNSのロゴ/アイコンのダウンロードサイトのリンクと、ロゴ/アイコンに近いHTMLカラーコード。

 

はてなブックマーク素材集 - 株式会社はてな

https://hatenacorp.jp/press/resource

https://hatenacorp.jp/press/resource

ロゴに近いHTMLカラーコード:

 #00a4de

 

 

Facebook - 「f」ロゴ

https://en.facebookbrand.com/assets/f-logo/

https://en.facebookbrand.com/assets/f-logo/

ロゴに近いHTMLカラーコード:

 #1877f2

 

 

ツイッター - Twitterのブランドリソース

https://about.twitter.com/ja/company/brand-resources.html

https://about.twitter.com/ja/company/brand-resources.html

アイコンに近いHTMLカラーコード:

 #1da1f3

 

 

tumblr - Logo | Tumblr

https://www.tumblr.com/logo/?language=ja_JP

https://www.tumblr.com/logo/?language=ja_JP

ロゴに近いHTMLカラーコード:

 #001935

 

 

ライン - LINE APP ICON GUIDELINE

https://line.me/ja/logo

https://line.me/ja/logo

アイコンに近いHTMLカラーコード:

 #00b900

 

 

Pocket - https://icons8.jp/icons/set/get-pocket

https://icons8.jp/icons/set/get-pocket

https://icons8.jp/icons/set/get-pocket

ロゴに近いHTMLカラーコード:

 #f50057

 

 

 他の方法

他にも、Font Awesomeというアイコンのツールキットを利用する方法があります。アイコンツールは、簡単にSNSアイコンや矢印などのアイコンを使用できるサービスです。Font Awesome以外にもアイコンツールはあると思いますが、他サイトでもよく目にするので、アイコンツールを利用するのにFont Awesomeを選択して損はないと思います。無料と有料で利用できます。無料でも十分活用できます。

アカウント登録が必要となりますが、そのための手順は「メールアドレスの入力」「メールアドレスの確認」「パスワードの登録」だけで簡単に済みます。

今回のSNSのアイコン以外にも様々なアイコンが使用できるので便利です。

 

 

ボタン作成

各SNSの素材を使用したボタンの作成(はてなブックマーク・ライン以外はFont Awesomeからアイコンを使用しています)。
「シェアボタン」「HTMLコード/CSSコード」

 

 

共通部分

共通の部分 HTML CSS JS
<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;
  }
 

 

 

はてなブックマーク

はてなブックマークボタン HTML CSS JS
<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");
  }
 

 

 

Facebook

Facebook Sharebutton HTML CSS JS
<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;
  }
 

 

 

ツイッター

Twitter Sharebutton HTML CSS JS
<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

Tumblr Sharebutton HTML CSS JS
<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;
  }
 

 

 

ライン

LINE Sharebutton HTML CSS JS
<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");
  }
 

 

 

Pocket

PocketHTML CSS JS
<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>

 

Facebook

<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>

 

Pocket

<a href="https://widgets.getpocket.com/v1/popup?url=myurl"></a>

 

 

これらのリンクに記事URLを設定するために、JavaScriptで処理をさせます。

 

はてなブックマーク HTML CSS JS
<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);
})

 

はてなブックマーク HTML CSS JS
<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);
  })

 

 

完成品

実際のシェアボタンを並べたもの。

※2019/09/28にデザインを変更。クラス名から要素生成をさせる方式に変更(1行だけでシェアボタンの設置が可能)。

Sharebuttons HTML CSS JS
<div class="share-buttons"></div>