mainvisual

俺のブログの各記事に、シェアボタンあるじゃないですか。 それを紹介したいと思います。

ソースコード

HTML、SCSS、javascriptのソースコードを紹介します。

導入方法は次のようにします。

  1. font-awesomeとjQueryの導入して下さい。
  2. scssをsassmeisterでcssに変換
  3. {{ **ページのURL** }}と書いてある部分をhttp://xxxxxx.com/entry/page.htmlのように記事のURLを貼り付ける
<nav class="ly_share">
  <span class="ly_share--text">シェアする</span>
  <ul class="ly_share--btn">
    <!--はてなブックマーク-->
    <li class="ly_share--btn__item">
      <div class="c-sharebtn">
        <div class="c-sharebtn__hatebu">
          <a class="hatena-bookmark-button"
            href="http://b.hatena.ne.jp/entry/{{ **ページのURL** }}"
            class="hatena-bookmark-button"
            target="_blank"
            data-hatena-bookmark-title="{{ .Title | safeHTML }}"
            data-hatena-bookmark-layout="simple"
            data-hatena-bookmark-initialized="1"
            title="このエントリーをはてなブックマークに追加">
              <i class="fa fa-hatebu" aria-hidden="true"></i>
              <span class="c-sharebtn__count js-sharebtn-count-hatebu"><i class="fa fa-spinner rotate" aria-hidden="true"></i></span>
              <span class="c-sharebtn__text">Bookmark</span>
            </a>
        </div>
      </div>
    </li>
    <!--Facebook-->
    <li class="ly_share--btn__item">
      <div class="c-sharebtn">
        <a class="c-sharebtn__facebook"
        href="https://www.facebook.com/sharer/sharer.php?u={{ **ページのURL** }}&amp;t={{ .Title | safeHTML }}"
        onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;"
        title="Facebookでシェア"
        target="_blank">
          <i class="fa fa-facebook" aria-hidden="true"></i>
          <span class="c-sharebtn__count js-sharebtn-count-facebook"><i class="fa fa-spinner rotate" aria-hidden="true"></i></span>
          <span class="c-sharebtn__text">Facebook</span>
        </a>
      </div>
    </li>
    <!--Twitter-->
    <li class="ly_share--btn__item">
      <div class="c-sharebtn">
        <a class="c-sharebtn__twitter"
        href="http://twitter.com/share?url={{ .Permalink | safeURL }}&amp;text={{ .Title | safeHTML }}&amp;hashtags=hackerslog&amp;via=k4zzk"
        onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
        target="_blank">
          <i class="fa fa-twitter" aria-hidden="true"></i>
          <span class="c-sharebtn__count js-sharebtn-count-twitter"><i class="fa fa-spinner rotate" aria-hidden="true"></i></span>
          <span class="c-sharebtn__text">Twitter</span>
        </a>
      </div>
    </li>
  </ul>
  <ul class="ly_share--btn">
    <!--Google+-->
    <li class="ly_share--btn__item">
      <div class="c-sharebtn">
        <a class="c-sharebtn__google"
        href="https://plus.google.com/share?url={{ **ページのURL** }}"
        onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
        target="_blank">
          <i class="fa fa-google-plus" aria-hidden="true"></i>
          <span class="c-sharebtn__text">Google+</span>
        </a>
      </div>
    </li>
    <!--Pocket-->
    <li class="ly_share--btn__item">
      <div class="c-sharebtn">
        <a class="c-sharebtn__pocket"
        href="https://getpocket.com/edit?url={{ **ページのURL** }}"
        target="_blank">
          <i class="fa fa-get-pocket" aria-hidden="true"></i>
          <span class="c-sharebtn__text">Pocket</span>
        </a>
      </div>
    </li>
    <!--Feedly-->
    <li class="ly_share--btn__item">
      <div class="c-sharebtn">
        <a class="c-sharebtn__feedly"
        href="http://cloud.feedly.com/#subscription%2Ffeed%2F{{ **ページのURL** }}"
        target="_blank">
          <i class="fa fa-rss" aria-hidden="true"></i>
          <span class="c-sharebtn__text">Feedly</span>
        </a>
      </div>
    </li>
  </ul>
</nav>
%clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  &:before{
    content: " ";
    display: table;
  }
}

.ly_share{
  padding-top: 1.2em;
  font-size: 15px;

  @extend %clearfix;

  .ly_share--text{
    font-size: 8px;
    display: block;
  }

  .ly_share--btn {

    margin: 0 -.43em;
    margin: 0;
    margin-top: 8px;
    padding: 0;
    list-style: none;

    display: -webkit-box;/* Android4.3以前ブラウザ用 */
    display: -webkit-flex;/* iOS8以前Safari用 */
    display: flex;

    -webkit-flex-wrap: nowrap; /* Safari */
    flex-wrap:         nowrap;

    @media (min-width: 992px){
      width: 50%;
      float: left;
    }

    .ly_share--btn__item {
      padding: 0 .43em;
      text-decoration: none;
      list-style:none;

      -webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/
      -webkit-flex: 1;/*--- iOS8以前Safari用 ---*/
      flex: 1;
    }

    &:before, &:after {
      display: table;
      content: '';
    }

  }

}

.c-sharebtn{
  a {
    font-size: 1.3em;
    width: 100%;
    display: block;
    padding: 5px;
    color: #fff;
    line-height: 1em;
    text-align: center;
    border: 1px solid #e1e1e1;
    border-radius: 4px;

    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
    text-decoration: none;
  }

  i{
    margin: 0;
  }

  .c-sharebtn__count{
    font-size: 0.8em;
    display: inline-block;
  }

  .c-sharebtn__text{
    font-size: 0.8em;
    display: block;
  }

  .c-sharebtn__hatebu a{
    color: #008fde;
    border-color: #008fde;
    &:hover, &.pushed{
      color: #fff;
      background-color: #008fde;
    }
  }

  a.c-sharebtn__facebook {
    color: #3b5998;
    border-color: #3b5998;
    &:hover, &.pushed{
      color: #fff;
      background-color: #3b5998;
    }
  }

  a.c-sharebtn__twitter {
    color: #55acee;
    border-color: #55acee;
    &:hover, &.pushed{
      color: #fff;
      background-color: #55acee;
    }
  }

  a.c-sharebtn__google {
    color: #cc3732;
    border-color: #cc3732;
    &:hover, &.pushed{
      color: #fff;
      background-color: #cc3732;
    }
  }

  a.c-sharebtn__pocket {
    color: #ef3e56;
    border-color: #ef3e56;
    &:hover, &.pushed{
      color: #fff;
      background-color: #ef3e56;
    }
  }

  a.c-sharebtn__feedly {
    color: #2bb24c;
    border-color: #2bb24c;
    &:hover, &.pushed{
      color: #fff;
      background-color: #2bb24c;
    }
  }
}

.rotate {
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0);},
    function(){ $(selcter).text('0');}
  );
}
// Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){ $(selcter).text(result.shares || 0);},
    function(){ $(selcter).text('0');}
  );
}
// Twitterのシェア数
function getTwitterCount(entryUrl, selcter) {
  entryUrl = 'https://jsoon.digitiminimi.com/twitter/count.json?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){ $(selcter).text(result.shares || 0);},
    function(){ $(selcter).text('0');}
  );
}
$(function(){
  var PERMALINK_URL = '{{ **ページのURL** }}'
  getHatenaBookmarkCount(PERMALINK_URL, '.js-sharebtn-count-hatebu');
  getFacebookCount(PERMALINK_URL, '.js-sharebtn-count-facebook');
  getTwitterCount(PERMALINK_URL, '.js-sharebtn-count-twitter');
});


var btns = [
  ".share-buttons .hatebu",
  ".share-buttons .facebook",
  ".share-buttons .twitter",
  ".share-buttons .google",
  ".share-buttons .pocket",
  ".share-buttons .feedly",
];

$(function(){
  var bind = function(class_name){
    var $elem = $(class_name);
    $elem.on("click", function(){
      $elem.map(function(){
        $(this).addClass("pushed");
      })
    });
  };

  $.map(btns, function(btn, i){
    bind(btn);
  });

});

構造の説明

htmlついて

ly_xxxc-xxxに分かれています。ly_xxxはレスポンシブ対応のための構造を表しています。 floatを使ったり、widthを使ったりしています。

c-xxxは基本的にwidth:100%で固定です。borderや色、font-sizeなどを担当しています。

具体的には、下記を見て下さい。これに沿って作っています。

SCSSについて

基本的にHTMLの時とコーディングスタイルは一緒です。

Javascript

Javascriptが担当する機能は2つ。

  1. シェア数の取得
  2. ボタンが押された時に、わかるようにすること

シェア数の取得

はてブ数の場合、httpので機能の提供をしているので、自分でサーバを立てている場合、httpsへのプロキシサーバーを立てるといいと思います。

プロキシサーバーの立て方はとても簡単です。ですが、紹介記事は後ほど…

Facebook数は簡単に取得できるので、いいでしょう。

Twitterの場合、本家その機能を廃止したので、別サービス似て取得する必要があります。そサービス登録方法から使い方までは、このサイト見ると良さそうです。

ボタンが押された時に、わかるようにすること

ボタンが押されると、jQueryがそれをフックして、「pushed」をいうクラス名をDOMに追加することで、 デザインを変化させています。

まとめ

一見難しそうに見えても、分解すると以外に単純なパーツから出て来ています。 今回紹介していないものもあると思うので、興味のある人は下記コメント欄から質問ください!