ソーシャルボタンをオリジナルデザインで実装

いままでやっていたソーシャルボタン(SNSボタン、シェアボタン)の実装方法が少し古くなっていたので、最新のものを調べ直しました。

    公式ジェネレーターによる作成

    各SNSともに、シェアボタンを生成する公式ツールを提供している。

    いずれも、シェアするURLとかもろもろのパラメーターを設定するとボタンが生成される。 自分でコードを書くことができない人や、動的な設定が不要な場合はこれで事足りる。

    公式ライブラリを使用した実装

    ジェネレーターを通さず、公式ライブラリを読み込んでコードを書けばオフィシャルのソーシャルボタン設置することもできる。

    上記ジェネレーターでは、たいていシェアするURLを設定する必要があるので、例えばWEBサイトの共通パーツとして組み込む場合にはコードを書いてURL等を動的に指定する。

    Twitter

    以下、公式ガイドに沿ってやっていく。

    ライブラリの読み込み

    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    

    と上記のようにそのまま読み込んでもいいし、ボタンやウィジェットが複数ある場合は公式ガイドに沿って以下のように読み込むと重複読み込みを回避してパフォーマンスを優先できる。

    <script>window.twttr = (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
    
      t._e = [];
      t.ready = function(f) {
        t._e.push(f);
      };
    
      return t;
    }(document, "script", "twitter-wjs"));</script>
    

    ボタンの設置

    data属性でもろもろ設定できる。

    <a class="twitter-share-button"
    href="https://twitter.com/intent/tweet"
    data-text="custom share text"
    data-url="https://dev.twitter.com/web/tweet-button"
    data-hashtags="example,demo"
    data-via="twitterdev"
    data-related="twitterapi,twitter"
    data-size="large"
    >
    Tweet
    </a>
    

    パラメーター

    data-textツイートするテキスト本文
    data-urlシェアするURL
    data-hashtags任意のハッシュタグ
    data-viaツイートするテキスト本文に指定したアカウントを「@sho_taikoさんから」のように追加できる
    data-realtedURIに関連するアカウントのコンマ区切りのリスト
    data-sizelergeを設定するとでかいボタンになる

    data-urldata-text は省略するとそのページのURLとタイトルが入るっぽい。

    data-related は、ツイート後の画面にフォローボタンを表示できるものだが、最近はその画面自体がTwitterから消えているっぽくて、設定してもあんまり意味なさそう。仕様が復活したり、おすすめユーザーに表示されるアルゴリズムに影響するとかなんかそういうのがあればいいなと思ってついでに付けておく程度かなという印象。

    JavaScript

    ここでは詳しく紹介しないが、JavaScript で実装する方法もある。

    Facebook

    JavaScrip SDK 版と iframe 版の2通りの実装方法がある。ジェネレーターで取得できるコードをカスタマイズするのが分かりやすくていいと思う。

    以下ではシェアボタンの場合のコードサンプルを示すが、いいねボタンの場合は以下を参照。

    JavaScrip SDK

    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0" nonce="B4YYxJOq"></script>
    
    <div class="fb-share-button" 
    data-href="[シェアするURL]" 
    data-layout="button_count" 
    data-size="small">
    <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=[シェアするURL(要エンコード)]" class="fb-xfbml-parse-ignore">シェア</a></div>
    

    a タグはJavaScripが読み込めなかったりうまく動作しなかった場合のもの。正常に動作すれば無視される。

    iframe

    <iframe
    src="https://www.facebook.com/plugins/share_button.php
    ?href=[シェアするURL(要エンコード)]
    &layout=button_count
    &size=small
    &width=103
    &height=20
    &appId"
    width="103" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" loading="lazy" ></iframe>
    

    パラメーター

    data-href / hrefシェアするURL
    data-lazy / lazytrue or false
    data-layout / layoutbox_count or button_count or button
    data-size / sizelarge or small

    data-lazytrue にすると、iframeに loading="lazy" が付与される。 iframe 版を使う場合は data-lazy 属性ではなく、 loading="lazy" を直接付けておく。

    はてなブックマーク

    <a href="https://b.hatena.ne.jp/entry/" 
    class="hatena-bookmark-button" 
    data-hatena-bookmark-layout="basic-label-counter" 
    data-hatena-bookmark-lang="ja" 
    title="このエントリーをはてなブックマークに追加">
    <img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" 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>
    

    パラメーター

    href

    設置したページのURLを使う場合は

    https://b.hatena.ne.jp/entry/

    URLを指定する場合は

    https://b.hatena.ne.jp/entry/s/[ブクマするURLのhttps://以下]

    data-hatena-bookmark-layout

    基本は basic / touch / vertical の3つ

    ブックマーク数の表示(counter)、「ブックマーク」のラベルの有無(label)、サイズ(normal/large)をハイフンで繋いで指定する。パターンは以下の通り。

    • basic
    • basic-counter
    • basic-label
    • basic-label-counter
    • touch
    • touch-counter
    • vertical-normal
    • vertical-large
    data-hatena-bookmark-width /
    data-hatena-bookmark-height

    basic / touch の場合はサイズ指定が可能。twitterやFacebookで「large」を使う場合、高さ28pxを指定してやるとちょうど同じサイズで揃う。

    • basic : width 115~140 / height 20~35
    • touch : width 40~120 / height 40~60

    LINE(LINEで送るボタン)

    <div class="line-it-button" data-lang="ja" data-ver="3" style="display: none;" 
    data-type="share-a" 
    data-url="https://social-plugins.line.me/ja/how_to_install" 
    data-color="default" 
    data-size="large" 
    data-count="false" ></div>
    <script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
    

    パラメーター

    data-typeshare-a / share-b / share-c
    data-urlシェアするURL
    data-colordefault / gray
    data-sizesmall / large
    data-counttrue / false

    Pocket

    いじろうと思えばいじれるが、カスタマイズの余地はあまり無いので素直に公式で生成されたものを使うのがいいと思う。URLは現在のページのものが自動的にセットされる。

    <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn"></a>
    <script type="text/javascript">!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");</script>
    

    上記 JavaScrip で生成される iframe を直接書いてしまえば、lazyload を付けたりカスタマイズできる。サイズの調整はできそうにない。URLは指定する必要がある。

    <iframe width="66" height="22" id="pocket-button-0" frameborder="0" allowtransparency="true" scrolling="NO" src="https://widgets.getpocket.com/v1/button?label=pocket&count=none&v=1&url=[URL(要エンコード)]" loading="lazy"></iframe>
    

    パラメーター

    data-pocket-count / countシェアするURL

    URLの取得・エンコード

    現在のページのURLを取得してエンコードするサンプルを需要がありそうなJSとWPで置いておきます。

    JavaScript

    const url = encodeURIComponent(location.href);

    WordPress

    $url = rawurlencode( get_permalink() );

    オリジナルデザインの実装

    オリジナルって言ってもロゴの利用規約もあるので、そんなに自由度が高いわけではない。(規約の変更に追従していくのも結構めんどくさいので、そのへんちゃんとやってくれるサービスなりプラグインなりを探した方がいいんじゃないかと作ってから思いました)

    デザインの制約はともかく、jsの分の読み込みを省いてページの表示速度を速くしたいというような需要はあるのでは(そのままでも非同期読み込みとかしてますが)。

    以下、動作サンプルでは適当なCSSで、サンプルコードでは画像を置くテイで書いた。

    Twitter

    Twitter の Web Intents を使用するが、ライブラリを使用しない場合、もろもろの設定は data 属性ではなく URL にパラメーターとして与える。値はURLエンコードする。

    <a href="https://twitter.com/intent/tweet
    ?url=[URL(要エンコード)]
    &via=sho_taiko
    &related=sho_taiko
    &hashtags=example%2Cdemo
    &text=custom%20share%20text
    ">
    <img src="" alt="">
    </a>
    

    パラメーター

    textツイートするテキスト本文
    urlシェアするURL
    hashtags任意のハッシュタグ
    viaツイートするテキスト本文に指定したアカウントを「@sho_taikoさんから」のように追加できる
    realtedアカウントを指定すると、ツイートした後にフォローを促す表示を追加できる。カンマ区切りで複数アカウントが設定でき、それぞれセミコロン(:)区切りで説明文を追加できる。
    in_reply_to特定のtweetへのリプライの形式でツイート

    Facebook(シェア)

    <a href="https://www.facebook.com/sharer/sharer.php?u=[シェアするURL(要エンコード)]" target="_blank"><img src="" alt=""></a>
    

    u にURLを渡すと良しなにやってくれる。

    はてなブックマーク

    2パターンある。送るページが異なるので、お好きな方で。

    公式と同じブックマーク画面を出す

    <a href="https://b.hatena.ne.jp/add?mode=confirm&url=[ブクマするURL]" target="_blank"><img src="" alt=""></a>

    ブクマ一覧のページを出す

    <a href="https://b.hatena.ne.jp/entry/s/[ブクマするURLのhttps://以下]" target="_blank"><img src="" alt=""></a>

    LINE(LINEで送るボタン)

    <a href="https://social-plugins.line.me/lineit/share?url=[URL(要エンコード)]" target="_blank"><img src="" alt=""></a>

    url にURLを渡すと良しなにやってくれる。

    Pocket

    公式ボタンだと「Saved to Pocket!」と表示されて終わりだが、こちらでは保存後にタグの編集とかができる画面になるので、ユーザーの使い勝手もこっちの方がいい気がする。

    また他のSNSではlargeサイズのボタンが用意されているがPocketにはないため、大ボタンで揃えるには自分でそれっぽくスタイリングするしかなさそう。

    <a href="https://getpocket.com/edit?url=[URL(要エンコード)]" target="_blank"><img src="" alt=""></a>

    まとめ

    ソーシャルボタン(SNSボタン、シェアボタン)を公式に沿って設置する方法、オリジナルデザインでの実装方法をまとめました。動かなくなることはないと思いますが、たまに変わるのでキャッチアップは必要ですね。

    表示速度的な改善や、デザイン上のこだわりでオリジナルのソーシャルボタンを設置したいという場合は、よろしければご相談ください。

    シェア
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    広告
    前の記事>(2021/03/09)
    【WordPress】サブメニューとして表示したカスタム投稿のカテゴリー表示
    記事一覧