afnf.net

今さらながら、ソーシャルボタンを追加しました。

<div class="social_btn_container">
<ul>
  <li>
    <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" 
       data-hatena-bookmark-layout="simple-balloon" 
       title="このエントリーをはてなブックマークに追加">
    <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png"
         alt="このエントリーをはてなブックマークに追加" width="30" 
         height="20" style="border: none;" />
    </a>
    <script type="text/javascript"
          src="https://b.st-hatena.com/js/bookmark_button.js"
          charset="utf-8" async="async"></script>
  </li>
  <li>
    <a data-pocket-label="pocket" data-pocket-count="horizontal"
       class="pocket-btn" data-lang="en"></a>
    <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){
      var j=d.createElement("script");j.id=i;j.async="async";
      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");</script>
  </li>
  <li>
    <a href="https://twitter.com/share" class="twitter-share-button" 
       data-dnt="true">Tweet</a>
    <script>
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
      p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async="async";
      js.src=p+'://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    </script>
  </li>
</ul>
</div>

公式は以下です。

• http://b.hatena.ne.jp/guide/bbutton
• https://getpocket.com/publisher/button
• https://about.twitter.com/ja/resources/buttons#tweet

pocketとtwitterのasync属性は勝手に追加しました。効果があるかどうかは知らない。

対応するCSSです。

.social_btn_container {
  text-align: center;    
  float: right;
  margin: 8px 0 0 0;
}

.social_btn_container ul {
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.social_btn_container ul li {
  float: left;
  margin: 0 8px;
  height: 22px;
}

.social_btn_container .pocket-btn {
  width: 90px;
  height: 25px;
}