ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版
ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版
この記事を投稿後にSNSシェアボタン付きのテーマに変えたので現在このプラグインは使っていない。AddThisはシェア数を把握できて便利なのだがデザインがテーマに合っている添付のシェアボタンを使うことにした。

ワードプレスのSNSシェアボタンプラグインをいくつか試した中で一番おすすめのAddThisの使い方を説明する。

このプラグインは日本ではメジャーなはてなブックマークとLINEにデフォルトで対応している。

プラグインの導入

プラグインの新規追加で「addthis」と入れると一番最初に出てくる「WordPress Share Buttons Plugin – AddThis」をインストールして有効にする。AddThisシリーズはこれ以外にもいくつかあるので間違えないように注意。
ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

尚、プラグイン有効後に出てくるメニューからHomeを選ぶとアカウント作成を促されるが作らなくてもOK。作るとどの記事がどれぐらいシェアされたのかをAddThisのサイトで確認できるので僕は作った。

表示方法の設定

画面左側メニューのAddThisからShare Buttonsを選択。最初は表示方法の設定ファイルが作成されていない。設定ファイルを作成するには画面一番上のAdd Newを押して表示タイプを選択。
ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

選べるのはSidebarとInlilneとCustom HTMLの三つ。Sidebarは画面上にボタンを固定するフローティング方式、インラインは記事中にボタンを表示する方式、Custom HTMLは試してないので説明省略。

ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

Sidebar方式

画面上にSNSシェアボタンを固定するフローティング方式。

設定タブはGeneral、Design、Advanced Settingsの三つに分かれている。その中で注目項目だけ書く。

Generalタブ
Position

PCだと画面の左右、スマホだと画面上下のどちらにSNSシェアボタンを固定表示するか選択。

Title

シェアボタンの上に表示される文字なのだが邪魔なので何も入れない方が良いと思う。

シェアボタン選択方法はInlineと共通なので後述。

Advanced Settingsタブ
Hide on Homepage

チェックを入れるとトップページで表示されない。お好みで選ぼう。

Hide on These Pages

表示したくないページのURLをコピペ。例えば下記のように書くとカテゴリーごとの記事一覧ページでは表示されなくなる。

https://example.com/category/*

複数入力したい時は改行してコピペ。

Share Count Threshold

多分ボタンの横に表示されるシェア数の分岐点。10なら10未満は表示されないということだと思う。

設定後は画面右上のPublishを押して設定ファイルを作成する。後で設定変更した場合もPublishを押すと変更が適用される。

ここに書いていない項目は各自試して確認してほしい。

Inline方式

ブログ記事中にSNSシェアボタンを表示する方式。

設定タブはGeneral、Postion、Design、Advanced Settingsの四つに分かれている。その中で注目項目だけ書く。

Postionタブ

このタブではホームページ、記事、ページ、カテゴリーページ、アーカイブページの上下のどちらかもしくは両方にSNSボタンを表示する設定が可能。表示したい場所にチェックを入れる。

Designタブ

デフォルトのStyle:Modern ResponsiveとButtons:LargeでOK。レスポンシブじゃない場合はスマホで小さくならないのだと思う。Style:OriginalやButtons:Smallを選ぶと小さくて不細工なボタンになってしまうので非推奨。
ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

Advanced Settingsタブ

Sidebar方式と同じでホームページや任意のページを表示設定にできる。Share Count ThresholdもSidebar方式と同じ。上に書いたSidebar方式のAdvanced Settingsタブを参照。

SidebarとInlineのGeneralタブ共通項目

ここではシェア数表示方式とSNSシェアボタンを選択をする。シェア数表示方式は各自確認して好きなのを選ぼう。

Social Networks

AutomaticとSelect Your Ownがあるので後者を選択。

左の箱が選択可能SNSで右の箱が選択済みSNS。不要なSNSは×を押して右の箱から削除。左の箱の追加したいSNSは+を押して右の箱に移動。

ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

以上ですべての設定が終了。変更を適用するには右上のPublishを押すのを忘れないこと。

設定ファイルをアクティブにする

画面左のAddThis→Share Buttonsメニューの設定ファイル一覧ページでInactiveになっている場合はActiveにする。希望の設定ファイルをチェックして上のプルダウンからActivateを選んでApplyを押す。

ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

テーマファイルにショートコードを書き込んで表示する方法

InlineのSNSボタンを記事中の任意の場所に表示したい場合は、テーマファイルに直接ショートコードを書き込んだ方が早い。当ブログではそうしている。設定ページでの設定だと表示させたい場所と微妙に違う場合があるからだ。

ショートコードで表示するには、設定ページのPositionタブで表示位置のチェックを全部はずしておく。そして下記のショートコードをテーマファイルの任意の場所にコピペ。

<div class="addthis_inline_share_toolbox_****"></div>

****の部分はAddThis→Share Buttonsの設定ファイル一覧ページで表示されているShortcodeの最後の文字に書き換え。

ワードプレスにSNSシェアボタンを設置するAddThisの使い方:2018年10月版

画面左側AddThisメニューのAdvanced Setting

ここでは表示方法以外を設定。項目は大きくTracking、Loading Options、Developer Configurationの三つに分かれているが、いじるのはTrackingだけで後の二つはよくわからないので無視。気になった項目についてだけ書く。

Clickbacks

アカウントを作ってここにチェックが入っているとアクセス解析が可能になるっぽい(違うかも)。AddThisアカウントを作った人はチェックを入れた方が良さそう。それ以外の人はチェックをはずしても多分大丈夫。

Bitly URL Shortening for Twitter

シェアボタンからツイッターに投稿するときにURLをBitlyの短縮URLにする。僕はチェックを入れた。

Google Analytics Property ID

GoogleアナリティクスでAddThisのシェアデータが見れるようになるらしい。設定を調べるのも面倒なので僕は無視。AddThisのアカウントを作った人用だと思う。

Twitter Handle for Twitter Via

シェアボタンからツイッターに投稿する際にリンク状の自分のツイッター名を追加する。@を抜いたユーザーIDを入力。僕は設定したが効果は不明。

サイトの表示が崩れた場合

当ブログの場合AddThisをデフォルト設定で使用したところ、トップページの表示が崩れる不具合が発生したので使用をあきらめようとした。しかしAdvanced SettingsのLoading Optionのget_the_excerptという箇所のチェックをはずしたら正常に表示されるようになった。 

感想まとめ

SNSシェアボタン(ソーシャルボタン)があらかじめ組み込まれていないテーマでボタンを表示したい場合、AddThisは見た目も格好良くて最もお薦めできるプラグインである。

ブログとネットカテゴリの最新記事