Social Media Share Buttons and Social Iconsの使い方と設定

2017年7月24日

記事を読み終えた時点でシェアボタンをポップアップ表示できる WordPress 用プラグインの紹介です。
それは「Social Media Share Buttons and Social Icons」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

Social Media Share Buttons and Social Icons

Screenshot of wordpress.org

Social Media Share Buttons and Social Icons は、
ユーザーが記事を読み終えた時点でボタンをポップアップさせることができます。
設置に関する設定も 8 ステップでシェアボタンやメール購読フォームなどを簡単に設置できます。

細かく設定できるボタンに対応しているサービスは、
RSS, Email, Facebook, Twitter, LinkedIn, Google+, Pinterest, Instagram, Youtube です。

記事を作成もしくは更新時点でのバージョン:v 1.7.4
マルチサイトでの利用:可

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Social Media Share Buttons and Social Icons – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Social Media Share Buttons and Social Icons」と入力します。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Social Media Share Buttons and Social Icons を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

ダッシュボードの「設定」メニューの下に追加されています。

使い方

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

使用中のテーマで wp_head() 関数が使われていないと表示されます。

ステップ1

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

表示するアイコンボタンを選択します。
RSS, Email, Facebook, Twitter, Google+ にはデフォルトでチェックが付いています。
Youtube, LinkedIn, Pinterest, Instagram は、それぞれのアカウントが必要です。

Share を選択すると AddThis サービスを利用したユニバーサルボタンを表示可能となり、
様々なソーシャルネットワークアイコンを表示可能になります。

Custom1 を選択するとカスタムアイコンと URL リンクを設定できます。

ステップ2

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

RSS 購読時の フィード URL と Email アイコンと
Facebook, Twitter, Google+ アイコンをクリックした際の動作を設定できます。
Email アイコンをクリックすると SpecificFeeds に無料アカウントが作成されます。

ステップ3

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

アイコンボタンのデザインとマウスオーバー時などのアニメーション設定ができます。

ステップ4

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

シェア数の表示有無の設定ができます。

ステップ5

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

アイコンの表示順、アイコンの幅と高さ、表示位置と表示数を設定します。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

New window
アイコンをクリック時に新しいウィンドウで開くかどうか

Make icons float?
アイコンをフローティングで表示するかどうか

Make icons stick?
アイコンを固定で表示するかどうか

Disable float icons on mobile devices
モバイル端末でアイコンのフローティング表示を不可にするかどうか

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

Mouseover text
アイコンにマウスオーバーした時に表示するテキストを入力します。

ステップ6

記事の最後にボタンを表示する際の設定ができます。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

So: do you want to display those at the end of every post?
全ての投稿の最後にボタンを表示するかどうか。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

表示するアイコンを選択します。

Text to appear before the sharing icons:
アイコンの前に表示するテキストを入力します。

Alignment of share icons:
アイコンの位置揃えを指定します。

Do you want to display the counts?
シェア数を表示するかどうか

ステップ7

記事を読み終えた時点でポップアップ表示するボタンに関する設定ができます。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

ボタンと一緒に表示するテキストを入力し、フォントに関する設定をします。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

アイコンボタンの表示枠に関する設定をします。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

ポップアップ表示するページを選択します。

Nowhere
表示しない。

On every page
全てのページで表示する。

On blog posts only
投稿でのみ表示する。

On selected pages only
指定した固定ページでのみ表示する。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

ポップアップ表示するタイミングを指定します。

Once seconds after the user arrived on the site
ユーザーがサイトに訪問して、指定した秒数経過すると一度だけ表示します。

Every time user scrolls to the end of the page
ユーザーが各ページの最後までスクロール度に表示する。

ステップ8

メール購読フォームに関する設定ができます。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

専用ウィジェット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

サイドバーなどにシェアボタンを表示したい場合に使います。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

表示させると上のような感じになります。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

サイドバーなどにメール購読フォームを表示したい場合に使います。

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

表示させると上のような感じになります。

シェアボタンの表示例

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

WordPressプラグイン「Social Media Share Buttons and Social Icons」のスクリーンショット

代替プラグイン

Social Media Share Buttons and Social Icons にほしい機能が無かった場合には、
Social Media Share Buttons and Social Icons 以外にも SNS のシェアボタンを設置できるプラグインを記事にしています。
以下では、Social Media Share Buttons and Social Icons を含めて 11 個を簡単に紹介しています。

SNSのシェアボタンを設置できるWordPressプラグイン一覧

URL

Social Media Share Buttons and Social Icons – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています