AddThis Smart Layers のカスタマイズ – SNSフォローボタンコードの取得方法
「AddThis Smart Layers」は、SNSのフォローやシェアのボタンをスクロールに追尾して表示するWordPressプラグインです。
前回そのカスタマイズ記事を書いたのですが、フォローボタンについては触れませんでした。カンタンなコード取得方法があったのでよろしければ参考にして下さい。
まずは公式サイトにログインしてコチラ(↓)のページに行って下さい。冒頭の画像がそのページになります。
WordPressのダッシュボードから「設定 → AddThis SmartLayers」と同じような画面で、同じように表示するSNSボタンのカスタマイズができます。
画面左側にある「Options」からカスタマイズします。
ここでは「Follow」にFacebook・Twitter・Google+を選択。「What’s Next」と「Recomended Content」は非表示。レイアウトは「More Options」から「Transparent(標準)」としています。
残念ながらコチラでは「Share」ボタンの選択はできません。表示する数だけ1~6の間で選択できます。
上記設定してから、一番下の「Generate Code」をクリックすると下のような画面になります。
「Grab It」をクリックするとクリップボードにコピーできます。この場合のコードは以下にようになりました。
<!-- AddThis Smart Layers BEGIN --> <!-- Go to https://www.addthis.com/get/smart-layers to customize --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52600cca55c4194a"></script> <script type="text/javascript"> addthis.layers({ 'theme' : 'transparent', 'share' : { 'position' : 'left', 'numPreferredServices' : 5 }, 'follow' : { 'services' : [ {'service': 'facebook', 'id': 'mogi2fruits.net'}, {'service': 'twitter', 'id': 'tomohiro_mogi'}, {'service': 'google_follow', 'id': '+茂木智弘mogi2fruits'} ] } }); </script> <!-- AddThis Smart Layers END -->
説明によればこのコードをページのどこかに入れろとありますが、今回はフォローボタンだけなので ‘services’ : [ ・・・ ] の間の部分だけコピーします。
WordPressのダッシュボードから「設定 → AddThis SmartLayers」を選択。
画面右上の「Custom API Configuration」をクリック → 「OK」。
画面右側の「Example」を参考に、画面左側の「Edit your settings.」に記述します。一旦「Example」をコピーしてから編集すると楽です。
最終的に以下のようになりました。
{ theme : 'transparent', share : { 'position' : 'left', 'services' : 'facebook,twitter,google_plusone_share,pocket,hatena,more', }, follow : { 'services' : [ {'service': 'facebook', 'id': 'mogi2fruits.net'}, {'service': 'twitter', 'id': 'tomohiro_mogi'}, {'service': 'google_follow', 'id': '+茂木智弘mogi2fruits'} ], 'title' : 'Follow', }, mobile : { 'buttonBarPosition' : 'bottom', 'buttonBarTheme' : 'transparent' } }
「What’s Next」と「Recomended Content」部分は非表示にするので削除。フォローやシェアしたときのメッセージも不要なので削除(したけど実際は表示されるようです)。
「title」を日本語にしたり、削除するとプラグイン自体が表示されなくなるようです。
また、モバイルでのフォロー・シェアボタンを画面下部に表示するため「bottom」に変更しました。
各々の環境に合わせて追記・編集して下さい。
以上でカスタマイズは終了となります。お疲れ様でしたm(_ _)m