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



