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

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

LINEで送る
Pocket

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」をクリックするとクリップボードにコピーできます。この場合のコードは以下にようになりました。

説明によればこのコードをページのどこかに入れろとありますが、今回はフォローボタンだけなので ‘services’ : [ ・・・ ] の間の部分だけコピーします。

WordPressのダッシュボードから「設定 → AddThis SmartLayers」を選択。

画面右上の「Custom API Configuration」をクリック → 「OK」。

AddThis SmartLayers - custom API

画面右側の「Example」を参考に、画面左側の「Edit your settings.」に記述します。一旦「Example」をコピーしてから編集すると楽です。
最終的に以下のようになりました。

「What’s Next」と「Recomended Content」部分は非表示にするので削除。フォローやシェアしたときのメッセージも不要なので削除(したけど実際は表示されるようです)。
「title」を日本語にしたり、削除するとプラグイン自体が表示されなくなるようです。
また、モバイルでのフォロー・シェアボタンを画面下部に表示するため「bottom」に変更しました。

各々の環境に合わせて追記・編集して下さい。

以上でカスタマイズは終了となります。お疲れ様でしたm(_ _)m

LINEで送る
Pocket

サイト内検索

スポンサードリンク

これ書いてる人

こんな記事書いてますが本業は ラーメン屋 です。 詳細はコチラ



follow us in feedly

PAGE TOP ↑