React で AddThis のインライン共有ボタンを使う

AddThis は Web サイトに SNS 共有ボタンや関連記事情報などのコンポーネントを簡単に追加するサービスです。コンポーネントを利用するには、AddThis のサイトへ行き、コンポーネントの種類やスタイルを選び、指定された HTML タグを追加するだけです。ShapeShiftとChangellyの比較サイトでは右下にインライン共有ボタンを利用しています。

AddThis のインライン共有シェアボタンを組み込む場合、具体的にはボタンを配置したい場所に

<div class="addthis_inline_share_toolbox"></div>

という要素を配置します。そして、body 要素の閉じタグ直前に、

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={プロジェクトID}"></script>

という script 要素を追加します。なお、プロジェクト ID は AddThis から与えられた ID で、これを使ってのトラッキングなども提供されています。

スクリプトについては、実際のところ、ボタンの配置先である <div class="addthis_inline_share_toolbox"></div> がレンダリングされた後に実行されれば良いので、script タグの位置はこの通りでなくても構いません。そもそも body 要素の閉じタグ直前に配置すると Google の Page Speed Insights で「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」ように警告が出るので対策が必要です。

React で共有ボタンをレンダリングしている場合、レンダリング後にスクリプトを実行する必要があります。簡単な方法としては、ボタンの配置先である div 要素をレンダリングするコンポーネントの componentDidMount で、次のようにスクリプトタグを DOM に追加すれば良いでしょう。

componentDidMount(){
    const addthisScript = document.createElement("script");
    addthisScript.setAttribute("src", "//s7.addthis.com/js/300/addthis_widget.js#pubid={プロジェクトID}");
    if (document.body) {
        document.body.appendChild(addthisScript);
    }
}

この方法でうまくいくのは、ボタンの配置先が一度レンダリングされた後は取り除かれない場合です。一旦 div 要素を削除して追加し直した場合、AddThis のスクリプトが追加したボタン関係の要素が失われてしまいます。そのため、自前で必要なボタンもレンダリングする必要が出てきます。

AddThis の共有ボタンを自前でレンダリングする場合、次のような要素が必要になります。

<div id=“addthis_inline_share_buttons” class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
</div>

この例では、small サイズのボタンが４つと「その他の SNS」というボタンの合計５つを表しています。これらをレンダリングした後、addthis.toolbox を呼ぶと共有ボタンが表示されます。addthis.toolbox の呼び出しは、componentDidUpdate を使って、

componentDidUpdate(){
    if(global.addthis){
        global.addthis.toolbox("#addthis_inline_share_buttons")
    }
}

のようにすれば良いでしょう。

なお、上記の div 要素の補足ですが、５つ以上のボタンが欲しい場合は、<a class="addthis_button_preferred_5"></a> <a class="addthis_button_preferred_6"></a> というように、要素を加えることで追加できます。<a className="addthis_counter addthis_bubble_style"></a> という要素を追加すれば、共有ボタンがクリックされた回数を表示できます。また、small サイズではなく large サイズのボタンを表示したい場合は、外側の div 要素のクラスに addthis_default_style に加えて addthis_32x32_style を追加します。

さらに、下記の要素を追加すれば、SNS サービスを固定して共有ボタンを追加することもできます。

<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_compact"></a>

詳細は、Customizing the AddThis Toolbox で説明されているのでそちらもご覧ください。

React で AddThis のインライン共有ボタンを使う | Ecency