<---------------------------- ----------------------------> <---------------------------- ----------------------------> --------------------> AddThis Smart Layers を入れてみた – Inside of Papaya

AddThis Smart Layers を入れてみた

久しぶりの AddThis です。
最近 AddThis で Smart Layers という新しいサービスが始まったので、さっそく導入してみました。
手順はこれまで AddThis のモジュールを組み込んだことのある人なら簡単。

AddThis のページに行き、”Get the Code” を選択、さらに “Smart Layers” を選択。

AddThis_SmartLayers

“Follow”、”Share”、”What’s Next” 等のスイッチがあるので、自分の好みで切り替えます。スイッチを切り替えると、それが画面のどこに反映されるかが、右の図に表示されます。
私の場合は、画面左に “Share” のボタンと、画面右上に “Follow” のボタンが欲しいので、上の図のようにセット。
(”What’s Next” と “Recommended Content” は正直日本語対応してないんじゃないかと思うので除外しました。)

“Follow” 等のスイッチ以外の部分をクリックすると、オプションが表示されるので、自分のアカウント等を登録しておきます。

AddThis_Follow_option

そしたら、”Generate Button” を押下します。

AddThis_generated_code

できたコードはこちら↓
[php]
<!– 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 –>
[/php]

一応これをテーマファイルに貼り付ければ完成なのですが、Share ボタンを少々カスタマイズします。
上のコード生成の画面にもキャプションが書いてありますが、API が用意されているので、そちらのページを参考に弄ります。

Share ボタンに何種類か追加したいサービスがあるので、サービスコードを参照して comma separated でコードを追加します。
[php]
‘share’ : {
‘position’ : ‘left’,
‘services’ : ‘hatena,facebook,twitter,google_plusone_share,linkedin,evernote,pocket,delicious,tumblr,wordpress,more’,
// ‘numPreferredServices’ : 5
},
[/php]

最終的にできたコードはこちら↓
[php]
<!– 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 –>
[/php]

これをテーマファイルに貼り付けるわけですが、自分の場合は single.php に埋め込みました。
すると、今皆さんがご覧になっているように “Follow” と “Share” のボタンが表示されるようになります。

これまで、AddThis でカウンター付きのソーシャルボタンを表示していたのですが、若干雰囲気が変わりました。
ただし、Facebook の『いいね!』が『シェア』に変わったり、Google+ についても『+1』が『シェア』に変わったりしているので、ちょっと意味合いが変わるんですよね。カウンターで視覚化できるのは結構魅力的なので、しばらく今のままで運用してみて、またカウンターが欲しくなったら元に戻すかもしれません。

今回はこんなところです。


Fatal error: Uncaught Error: Call to undefined function related_posts() in /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-content/themes/hueman-child/single.php:71 Stack trace: #0 /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-includes/template-loader.php(106): include() #1 /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-blog-header.php(19): require_once('/home/insidepap...') #2 /home/insidepapaya/insideofpapaya.com/public_html/index.php(17): require('/home/insidepap...') #3 {main} thrown in /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-content/themes/hueman-child/single.php on line 71