WordPressの記事にSNSシェアボタンを設置する方法(プラグインなし)

WordPressで運営するサイトにSNSシェアボタンを設置する方法を教えます。コードを2つコピペすることで設置できるので比較的簡単に出来ます。それ専用のプラグインを使わずに設置できるのでプラグインを必要以上に増やしたくない人におすすめです。

まずはsharethisに登録

sharethisという海外のサービスを使ってSNSシェアボタンを設置します。日本語に対応しています。ちなみにsharethisのプラグインも出ているようですが、わざわざインストールしなくても簡単に設置できます。

STEP1: 「シェアボタンの設置」に進む

sharethisのトップページ上部「ログイン」の横にある「シェアボタンの設置」を押します。そうすると「sharethisツールの選択」という画面に移ります。

STEP2: インラインシェアボタンを選ぶ

記事下に設置するためインラインシェアボタンを選びますが、トップページまたは投稿ページに目立つように設置したい場合は付箋シェアボタンを選んでください。ブログ記事で一般的なのはインラインシェアボタンです。

STEP3: SNSシェアボタンのカスタマイズ

「次のページ」を押さずにSTEP2の画面のままスクロールすると「Customize your Inline Share Buttons」と出てくるのでそれを押します。そうすると好きなソーシャルメディアを選べる項目が出てきます。

好きなサービスを選んでください。Facebook, Twitter, LINEはユーザーが多いので選択することをおすすめします。入れすぎ注意です。表示されているプレビューのボタンをドラッグすることで並び替えが可能です。

STEP4: デザインをカスタマイズ

さらにスクロールすると下の図のような項目が出てきます

配置は中央にするとスマホやタブレットで見たときにバランス良く見えます。ラベルを「なし」にするとアイコンのみの表示になります。カウントの最小数を5に設定することで記事が5回以上シェアされたときに初めてシェアボタンの横にカウントが表示されます4以下だと表示されない仕組みです。言語は日本語に設定します。

STEP5: 「次のページ」で登録

登録画面になるので登録してください。グーグルアカウントを持っている場合はそのままログインできます。

2つのコードの設置&再利用ブロックの作成

1つ目のコードはテーマ内に設置し、2つ目のコードは記事内に毎回設置します。

STEP6: コードの設置

登録が完了すると下の図のようにコードが出てくるので①のコードをコピーしてください。

STEP7: Simple Custom CSS and JSをインストール

次に、このコードをhead内に設置するのですが、テーマを直接編集するのはリスクなので「Simple Custom CSS and JS」というプラグインをインストールしてください。

「え?プラグイン入れなきゃダメなの!?」

と思われるかもしれませんが、このプラグインは非常に人気で便利なのでぜひ入れてください。テーマを直接編集することなくCSS, html, Javascriptコードを適用することが出来ます。テーマを変更・更新してもコードが消えずに残りますし、一覧で管理できるので消すのも編集するのも簡単です。sharethisコード以外に見出し、引用ボックス、タグなどのCSSコードの設置、もっと活用すればWebフォントやトップに戻るボタンなどの機能が実装できるので、このプラグイン1つで多くのプラグインをインストールせずに済みます。

STEP8: コードを貼り付け

プラグインを入れたら「カスタムJSの追加」からSTEP6でコピーしたコードを貼り付けます。右側にあるオプションは下の図のように設定してください。

STEP9: 2つ目のコードをコピー

sharethisに戻って2つ目のコードをコピーします。

STEP10: 記事下に貼り付け

記事投稿画面に移り、「カスタムhtml」というブロック(ウィジェット)を追加し、コードを貼り付けます。

そのまま再利用ブロックに追加します。ツールバーの…から可能です。

再利用ブロックに追加しておけばSNSシェアボタンを表示させたい箇所に、作ったブロックを簡単に設置できます。毎回コードをコピペする手間が省けます。記事下に限らず好きな個所にシェアボタンを設置できます。

STEP11: ドメインの登録

sharethisのダッシュボードにいくとドメインを追加するよう求められるのでサイトURLを登録します。これでSNSシェアボタンの設置完了です。記事投稿する際、sharethisの再利用ブロックを記事下に追加しておけば表示されます。

設置後にコードを確認する方法

シェアボタン設置後にコードを確認したいときはダッシュボードの「コードがアクティブ化されました」→「コードを紛失されましたか?」から確認できます。

上の図で囲った部分はコードが正常に設置されていない場合、「アクティベーションコード」と表示されます。本記事の下に表示されているSNSシェアボタンは今回紹介したやり方で設置しました。

最後までお読みいただきありがとうございました。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fourteen − 3 =