公式サイトはコチラ→ AddThis

今回はWordPressプラグイン、 AddThis Smart Layers のカスタマイズ。
このプラグインを使うと、ブラウザの画面をスクロールしても常に特定の場所にSNSのフォローやシェアボタンを表示してくれる。
上の画像で言うと右上に並んでいるボタンがFollowボタン、左中央に並んでいるのがShareボタン。
スマホの場合は画面下部に「共有・Follow」が表示される。

ただ標準設定でSNSボタンの数は変えられるけど、表示させるSNSが選べないのが難点。
そこで好きなSNSボタンを固定表示するようにカスタマイズしてみたい。

カスタマイズ方法を検索してみると、公式サイトからコードを取得してテーマファイルに貼り付けるという方法が出てくる。
参考サイトはコチラ。詳しい設定の仕方も書いてあります。

◆Akihiro’s • Tumblrのサイトに他のSNSへの共有ボタンを追加する方法（その１）
◆AddThis Smart Layers を入れてみた – Inside of Papaya

しかし今のバージョンだからなのか、どうやらWordPressのダッシュボードからカスタマイズできるようだ。

WordPressのダッシュボードから 設定 → AddThis Smart Layers を選択した画面。標準設定ならここからできる。
カスタマイズするには右上にある Custom API Configuration をクリック。

ここで OK をクリック。

これがカスタム設定画面。
画面右側の Example を参考に左側の Edit your settings. に記述していく。
元の標準設定に戻したい場合は右上の Revert to WYSIWYG をクリック。
Example のコードがこちら。

{
theme : 'transparent',
share : {
    'position' : 'left',
    'services' : 'facebook,twitter,email,print,more',
    //'numPreferredServices' : 5,
    'postShareTitle' : 'Thanks for sharing!',
    'postShareFollowMsg' : 'Follow us',
    'postShareRecommendedMsg' : 'Recommended for you'
},
follow : {
    'services' : [
        {'service' : 'facebook', 'id' : 'AddThis'},
        {'service' : 'twitter', 'id' : 'AddThis'}
    ],
    'title' : 'Follow',
    'postFollowTitle' : 'Thanks for following!',
    'postFollowRecommendedMsg' : 'Recommended for you'
},
whatsnext : {
    'recommendedTitle' : 'Recommended for you',
    'shareMsg' : 'Share to [x]',
    'followMsg' : 'Follow us on [x]'
},
recommended : {
    'title' : 'Recommended for you'
},
mobile : {
    'buttonBarPosition' : 'top',
    'buttonBarTheme' : 'transparent'
}
}
  

theme・share・follow・whatsnext・recommended・mobile の6つの項目をそれぞれ設定していけば良い。コメントアウトは // を使うようだ。
ここで記述する各SNSのサービス名称はここ（↓）から確認できる。
Service Directory – Service Codes | AddThis

今回は次のようにカスタマイズすることにした。

• Follow・whatsnext・recommended を非表示
• ShareボタンにGoogle+・はてなブックマーク・Pocketを追加
• モバイルで画面下部に「共有する」を配置

Follow はサイドバーにウィジェットを置いているから要らない。
whatsnext と recommended は日本語に対応していないし、次の記事・前の記事・関連記事は元々ある。
モバイルの場合ブラウザによらずにすぐ「共有」できるのは便利だ。
最終的にこのようになった。

{
theme : 'transparent',
share : {
// PCブラウザで見た場合のシェアボタンは左に配置
    'position' : 'left',
// 固定表示にGoogle+・はてな・Pocketを追加
    'services' : 'facebook,twitter,google_plusone_share,hatena,pocket,more',
    //'numPreferredServices' : 5,
    'postShareTitle' : 'Thanks for sharing!',
    'postShareFollowMsg' : 'Follow us',
    'postShareRecommendedMsg' : 'Recommended for you'
},

// フォローボタンは要らないのでコメントアウト
// follow : {
//    'services' : [
//        {'service' : 'facebook', 'id' : 'AddThis'},
//        {'service' : 'twitter', 'id' : 'AddThis'}
//        {'service' : 'google', 'id' : 'AddThis'}
//    ],
    'title' : 'Follow',
    'postFollowTitle' : 'Thanks for following!',
    'postFollowRecommendedMsg' : 'Recommended for you'
// }
,

// whatsnext と recommended を非表示にするためコメントアウト 
// whatsnext : {
//    'recommendedTitle' : 'Recommended for you',
//    'shareMsg' : 'Share to [x]',
//    'followMsg' : 'Follow us on [x]'
// },
// recommended : {
//     'title' : 'Recommended for you'
// },

// モバイルで見た場合は画面下部に配置する
mobile : {
    'buttonBarPosition' : 'bottom',
    'buttonBarTheme' : 'transparent'
}
}

より細かい設定については公式サイトを確認して下さいm(_ _)m

【2014年2月11日追記】
フォローボタンについての追加記事書きました。コードもシンプルになっています。あわせてご覧下さいませ。

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