誰が押すのかは知らないけど、とりあえずソーシャルリンクを表示したいので表示してみた。

とりあえず、いつも見ているはてな様のはてなブックマークのボタン, twitter, facebookがあれば良いかな～と思っていたけどGoogle+やらPocketやらLINEとかを追加するのがトレンドらしいのでこちらを参考に追加してみた。レスポンシブした時にLINEのボタンを追加してくれていたり、Twitterのボタンがオリジナルになっている親切なタイプ。

2016/6/28にfacebookのいいねボタンのデザインが変更になったためこの変更も反映した。

レスポンシブすると以下の様になる。

早速、追加してみた。

jade

htmlじゃなくてjadeを使っているので変更した。

.social-area
  ul.social-button
    li.sc-tw
      a.twitter-share-button(href="https://twitter.com/share?url=#{page.permalink}&text=#{page.title}&via=ishii_tech" target="_blank")
        svg(viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414")
          path(d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill="#fff" fill-rule="nonzero")
          span
            |Tweet
    li.sc-fb
      .fb-like(data-href="#{page.permalink}" data-layout="box_count" data-action="like" data-size="small" data-show-faces="true" data-share="true")
    li
      .g-plusone(data-href="#{page.permalink}" data-size="tall")
    li
      a.hatena-bookmark-button(href="http://b.hatena.ne.jp/entry/#{page.permalink}" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加")
        img(src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;")
    li
      a.pocket-btn(data-save-url="#{page.permalink}" data-pocket-label="pocket" data-pocket-count="vertical" data-lang="en")
    li.sc-li
      a(href="http://line.me/R/msg/text/?#{page.permalink}")
        img.nofancybox.sc-li-img(src="/linebutton_36x60.png" width="36" height="60" alt="LINEに送る")
  div#fb-root

#{page.permalink} とか #{page.title} の部分は自分のURLに設定する。

※LINEのボタンのクラス.nofancyboxはfancybox対策なので使っていない人は取る。

css

自分のブログに合わせて調整すればOK。高さとか背景とかを少し調整した。

.social-area {
  width: 100% ;
  min-height: 190px ;
  padding-top: 10px;
}

@media screen and ( min-width:480px ) {
  .social-area {
    min-height: 119px ;
  }
}

ul.social-button {
  width: 238px ;
  margin: 24px auto ;
  padding: 0 ;
  border: none ;
  list-style-type: none ;
}

@media screen and ( min-width:480px ) {
  ul.social-button {
    width: 410px ;
  }
}

ul.social-button li {
  float: left ;
  text-align: center ;
  height: 71px ;
  margin: 0 8px ;
  padding:0 ;
}

.sc-tw {
  width: 71px ;
}

.sc-tw svg {
  width: 30px ;
  height: 30px ;
}
  height: 56px ;
  margin: 0 auto ;
  padding-top: 6px ;
  display: block ;
  background: #1B95E0 ;
  font-size: 12px ;
  color: #fff ;
  font-weight: 700 ;
  text-decoration: none ;
  letter-spacing: .5px ;
  border-radius: 2px ;
}

.sc-tw a:hover {
  color: #fff ;
  background: #0c7abf ;
}

.sc-tw span:before {
  white-space: pre ;
  content: '\A' ;
}

.sc-fb {
  z-index: 99 ;
  width: 69px ;
}

.sc-li {
  width: 50px ;
}

.sc-li-img {
  border: none ;
  margin: 0 auto ;
  padding:0 ;
  width: 36px ;
  height: 60px ;
}

@media screen and ( min-width:480px ) {
  .sc-li {
    display: none ;
  }
}

javascript

ソーシャル連携するためのスクリプトを読み込む部分。

if(window.addEventListener) {
  window.addEventListener( "load" , shareButtonRead, false );
}else{
  window.attachEvent( "onload", shareButtonRead );
}

function shareButtonRead(){
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  var scriptTag = document.createElement("script");
  scriptTag.type = "text/javascript"
  scriptTag.src = "https://apis.google.com/js/platform.js";
  scriptTag.async = true;
  document.getElementsByTagName("head")[0].appendChild(scriptTag);

  var scriptTag = document.createElement("script");
  scriptTag.type = "text/javascript"
  scriptTag.src = "https://b.st-hatena.com/js/bookmark_button.js";
  scriptTag.async = true;
  document.getElementsByTagName("head")[0].appendChild(scriptTag);

  (!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js"));
}

終わり。

参考

  1. https://syncer.jp/how-to-setting-share-button