読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 シェアボタンの自作

facebookのシェアボタンのデザインが崩れたり、Twitterのツイートボタンの表示が「list」になってたりするのでシェアボタンを自作することにした。

f:id:kosumoro:20160819003404j:plain

(function() {
  // ブログタイトルの取得
  var blogTitle = document.getElementById("title").textContent;

  // 各記事要素を取得
  var entries = document.getElementsByClassName("entry");
  
  // 各記事ごとにシェアボタンを作成する
  [].forEach.call(entries, function(entry) {
    // シェアボタンを設置するコンテナ要素を取得
    var container = entry.getElementsByClassName("social-buttons")[0];

    // 記事タイトルと記事URLを取得
    var titleElement = entry.getElementsByClassName("entry-title-link")[0];
    var title = titleElement.textContent;
    var url = titleElement.href;

    // 各SNSのWeb Intent用URLを生成
    var twitterIntentUrl = "https://twitter.com/intent/tweet?text=" +
        encodeURIComponent(title + " - " + blogTitle + " " + url);
    var facebookIntentUrl = "https://www.facebook.com/sharer/sharer.php?u=" + 
        encodeURIComponent(url);
    var hatenaIntentUrl = "http://b.hatena.ne.jp/entry/" +
        url.replace(/^https?:\/\//, "");
    
    // 各SNSのシェアボタンを作成、コンテナ要素に追加
    container.appendChild(createShareButton({
      "className": "twitter-share",
      "textContent": "share on twitter",
      "href": twitterIntentUrl
    }));
    
    container.appendChild(createShareButton({
      "className": "facebook-share",
      "textContent": "share on facebook",
      "href": facebookIntentUrl
    }));
    
    container.appendChild(createShareButton({
      "className": "hatena-share",
      "textContent": "bookmark on hatena bookmarks",
      "href": hatenaIntentUrl
    }));
  });
  
  // シェアボタン作成用内部関数
  function createShareButton(args) {
    var button = document.createElement("a");
    
    button.className = args.className + " social-button";
    button.textContent = args.textContent;
    button.href = args.href;
    button.target = "_blank";
    
    return button;
  }
}());

上のコードを <script> タグでラップしてフッタHTMLに追加する。ダッシュボードの「デザイン」から、下の赤線部分に追加する。

f:id:kosumoro:20160721222111j:plain

するとブログに文字だけのシェアボタン(リンク)が表示されるはず。

f:id:kosumoro:20160819004904j:plain

これをCSSでスタイリングしていく。

CSSはここに書くとよい。

f:id:kosumoro:20160819010100j:plain

ベースは以下のようになる。

.social-button {
  display: inline-block;
  margin-right: 8px;
  width: 28px; height: 28px;
  background-color: #ccc;
  background-size: cover;
  border-radius: 4px;
  overflow: hidden;
  color: transparent;
}

このベースとなるスタイルを適用すると次のような表示になる。

f:id:kosumoro:20160819005333j:plain

最後にアイコン画像を適用する。ボタンにはそれぞれ twitter-sharefacebook-sharehatena-share というクラス名が付いているので、それぞれのクラスに background-image 属性を使用してアイコン画像を適用する。

/* 例(画像はそれぞれで準備してください) */
.twitter-share {
  background-image: url(http://image.for.share-button/icon.png);
}

すべてのシェアボタン要素に背景画像を設定したら完成。

追記

コンテナの指定を変更すればブログ内の違う場所にシェアボタンを設置することもできる。

例えば、記事タイトルに続けてシェアボタンを設置する場合は、以下のようにソースを変更する。

(function() {
  // 略
  
  // 各記事ごとにシェアボタンを作成する
  [].forEach.call(entries, function(entry) {
    // シェアボタンを設置するコンテナ要素を取得
    // var container = entry.getElementsByClassName("social-buttons")[0];
    var container = entry.getElementsByClassName("entry-title")[0];

    // 略
  });

  // 略
}());

f:id:kosumoro:20160819012312j:plain