AddThis Smart Layers のカスタマイズ – SNSボタンの表示設定

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

LINEで送る
Pocket

AddThis_公式サイト
公式サイトはコチラ→ AddThis

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

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

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


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


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

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

AddThis_Question
ここで OK をクリック。

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

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

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

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

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

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

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

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

LINEで送る
Pocket

サイト内検索

スポンサードリンク

これ書いてる人

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



follow us in feedly

PAGE TOP ↑