AddThis Smart Layers を入れてみた
久しぶりの AddThis です。
最近 AddThis で Smart Layers という新しいサービスが始まったので、さっそく導入してみました。
手順はこれまで AddThis のモジュールを組み込んだことのある人なら簡単。
AddThis のページに行き、”Get the Code” を選択、さらに “Smart Layers” を選択。
“Follow”、”Share”、”What’s Next” 等のスイッチがあるので、自分の好みで切り替えます。スイッチを切り替えると、それが画面のどこに反映されるかが、右の図に表示されます。
私の場合は、画面左に “Share” のボタンと、画面右上に “Follow” のボタンが欲しいので、上の図のようにセット。
(”What’s Next” と “Recommended Content” は正直日本語対応してないんじゃないかと思うので除外しました。)
“Follow” 等のスイッチ以外の部分をクリックすると、オプションが表示されるので、自分のアカウント等を登録しておきます。
そしたら、”Generate Button” を押下します。
できたコードはこちら↓
<!-- AddThis Smart Layers BEGIN --> <!-- Go to http://www.addthis.com/get/smart-layers to customize --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script> <script type="text/javascript"> addthis.layers({ 'theme' : 'transparent', 'share' : { 'position' : 'left', 'numPreferredServices' : 5 }, 'follow' : { 'services' : [ {'service': 'facebook', 'id': 'takuji.ishikawa'}, {'service': 'twitter', 'id': 'papaya_papaya'}, {'service': 'google_follow', 'id': '114611852808545913584'}, {'service': 'youtube', 'id': 't9j8818'}, {'service': 'flickr', 'id': 'papayapapaya'}, {'service': 'pinterest', 'id': 'papayapapaya'}, {'service': 'instagram', 'id': 'papaya_papaya'}, {'service': 'foursquare', 'id': 'papaya_papaya'}, {'service': 'tumblr', 'id': 'seedsofpapaya'}, {'service': 'rss', 'id': 'http://insideofpapaya.com/feed'} ] } }); </script> <!-- AddThis Smart Layers END -->
一応これをテーマファイルに貼り付ければ完成なのですが、Share ボタンを少々カスタマイズします。
上のコード生成の画面にもキャプションが書いてありますが、API が用意されているので、そちらのページを参考に弄ります。
Share ボタンに何種類か追加したいサービスがあるので、サービスコードを参照して comma separated でコードを追加します。
'share' : { 'position' : 'left', 'services' : 'hatena,facebook,twitter,google_plusone_share,linkedin,evernote,pocket,delicious,tumblr,wordpress,more', // 'numPreferredServices' : 5 },
最終的にできたコードはこちら↓
<!-- AddThis Smart Layers BEGIN --> <!-- Go to http://www.addthis.com/get/smart-layers to customize --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script> <script type="text/javascript"> addthis.layers({ 'theme' : 'transparent', 'share' : { 'position' : 'left', 'services' : 'hatena,facebook,twitter,google_plusone_share,linkedin,evernote,pocket,delicious,tumblr,wordpress,more', // 'numPreferredServices' : 5 }, 'follow' : { 'services' : [ {'service': 'facebook', 'id': 'takuji.ishikawa'}, {'service': 'twitter', 'id': 'papaya_papaya'}, {'service': 'google_follow', 'id': '114611852808545913584'}, {'service': 'youtube', 'id': 't9j8818'}, {'service': 'flickr', 'id': 'papayapapaya'}, {'service': 'pinterest', 'id': 'papayapapaya'}, {'service': 'instagram', 'id': 'papaya_papaya'}, {'service': 'foursquare', 'id': 'papaya_papaya'}, {'service': 'tumblr', 'id': 'seedsofpapaya'}, {'service': 'rss', 'id': 'http://insideofpapaya.com/feed'} ], 'visible' : 'always' } }); </script> <!-- AddThis Smart Layers END -->
これをテーマファイルに貼り付けるわけですが、自分の場合は single.php に埋め込みました。
すると、今皆さんがご覧になっているように “Follow” と “Share” のボタンが表示されるようになります。
これまで、AddThis でカウンター付きのソーシャルボタンを表示していたのですが、若干雰囲気が変わりました。
ただし、Facebook の『いいね!』が『シェア』に変わったり、Google+ についても『+1』が『シェア』に変わったりしているので、ちょっと意味合いが変わるんですよね。カウンターで視覚化できるのは結構魅力的なので、しばらく今のままで運用してみて、またカウンターが欲しくなったら元に戻すかもしれません。
今回はこんなところです。