AddThis Smart Layers のカスタマイズ – SNSフォローボタンコードの取得方法

公開日:  最終更新日:2014/04/08

AddThis Smart Layers - Get the Code

「AddThis Smart Layers」は、SNSのフォローやシェアのボタンをスクロールに追尾して表示するWordPressプラグインです。

前回そのカスタマイズ記事を書いたのですが、フォローボタンについては触れませんでした。カンタンなコード取得方法があったのでよろしければ参考にして下さい。

まずは公式サイトにログインしてコチラ(↓)のページに行って下さい。冒頭の画像がそのページになります。

Get Smart Layers | AddThis

WordPressのダッシュボードから「設定 → AddThis SmartLayers」と同じような画面で、同じように表示するSNSボタンのカスタマイズができます。

画面左側にある「Options」からカスタマイズします。

AddThis Smart Layers - Get the Code - Options

ここでは「Follow」にFacebook・Twitter・Google+を選択。「What’s Next」と「Recomended Content」は非表示。レイアウトは「More Options」から「Transparent(標準)」としています。

残念ながらコチラでは「Share」ボタンの選択はできません。表示する数だけ1~6の間で選択できます。

上記設定してから、一番下の「Generate Code」をクリックすると下のような画面になります。

AddThis Smart Layers - Get the Code - Grab It

「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」。

AddThis SmartLayers - custom API

画面右側の「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

[milliard]
  • サイト内検索

  • カテゴリ


  • スポンサードリンク



PAGE TOP ↑