• HOME > 
  • WordPress > 
  • ワードプレスのサイトにSNSシェアボタンを設置するプラグイン

ワードプレスのサイトにSNSシェアボタンを設置するプラグイン

投稿日:

SNSシェアボタンとは?

さまざまなサイトで見かける下図のようなボタンを指します。

SNSシェアボタンイメージ

これらをクリックするとユーザーのSNSが開き、スムーズにサイトやページをシェアしてもらうことができます。

ここで説明するSNSボタンは、サイト側が保有するSNSアカウントページを開くリンクではありません。

シェアボタンを設置するメリット

ボタンがあることでユーザーの目に入り自然とシェアを意識してもらいやすくなります。

また、ボタンをサイトのリンク情報をそのままシェアできるので、ユーザーに気軽にシェアしてもらうことが可能です。

ワードプレスのサイトに設置するには?

サイト内にSNSシェアボタンを設置するにはHTMLでコードを記述する必要があります。

しかし、ワードプレスであればプラグインを利用して簡単に設置することができます。

AddToAny Share Buttonsの使い方

SNSシェアボタン設置できるプラグインは数多くありますが、ここではその中でも代表的なプラグインである「AddToAny Share Buttons」の使い方を説明します。

プラグインの使用は、サイトに予期せぬエラーを引き起こす場合があります。あくまでも自己責任で事前にバックアップを取ったうえでご使用ください。

インストールして有効化

ワードプレス管理画面左側のメニューから、「プラグイン」の「新規追加」をクリックして開きます。

プラグイン新規追加

検索ボックスに「AddToAny Share Buttons」と入力して検索します。

プラグイン検索

「AddToAny Share Buttons」をインストールして有効化して下さい。

インストールして有効化

プラグインを有効化するだけでページ内にSNSシェアボタンが表示されます。

SNSシェアボタン表示

プラグインの設定

表示自体はプラグインを有効化するだけでできましたが、SNSの種類やボタンのサイズなど細かい調整はプラグイン設定画面で行います。

プラグインを有効化すると、管理画面左側のメニュー「設定」の中に「AddToAny」という項目が追加されるのでクリックします。

プラグイン設定

次のようなプラグイン設定画面が開きます。

プラグイン設定画面

Standardタブ

「Standard」タブでは、設置したいSNSサービスを選択し、サイズなどを変更することができます。

各項目で変更したら、画面下にある「変更を保存」を押して完了です。

サイズと色を変更する

アイコンスタイルという項目では、ボタンのサイズをピクセル単位で変更できます。

backgroundではボタンの背景色、foregroundではSNSのロゴ部分の色を変更できます。

サイズと色を変更する

「Transparent」を選択すると背景無しになります。

サイズと色を変更する

SNSサービスの種類を追加削除する

「Share Buttons」の項目では、設置したいSNSサービスを追加したり削除したりできます。

サービスの種類を追加削除

ユニバーサルボタン

このボタンを押すことで前述のShare Buttonsの一覧を表示させ、その中からユーザーに選んでもらうことができます。

ユニバーサルボタン表示例

用意した別の画像を使用したり、非表示にするかを選べます。

ユニバーサルボタン設定

シェア・ヘッダー

ボタン表示の手前にテキストを表示させます。

シェア・ヘッダー入力

入力欄に記載したものが表示されます。

シェア・ヘッダー表示例

ブックマークボタンの場所

サイト内でのボタンの表示場所を設定します。不要な箇所はチェックを外します。

ブックマークボタンの場所

メニューのオプション

ユニバーサルボタンをマウスオーバーした際に一覧を表示させるか選択できます。

メニューのオプション

追加Javascript / 追加CSS

ボタン用にJavascriptやCSSを追記したい場合はここに入力することが可能です。

Floatingタブ

「Floating」タブでは、ボタンの固定位置表示の切替とその表示位置などを変更できます。

画面内指定の位置に固定表示され、スクロールしても追いかけるように表示し続けます。

縦ボタン

縦ボタン

縦並べたボタンを固定表示します。画面サイズが何PX以下になった非表示に切り替えるといったレスポンシブの設定も可能です。

縦ボタン表示

横ボタン

横ボタン

横に並べたボタンを固定表示します。縦ボタンと反対に画面サイズが何PX以上になったら非表示に切り替わるか設定できるので、主にスマホ表示に使います。

横ボタン表示

任意の位置に表示させたい場合

設定画面からでは、あらかじめ用意された場所にしか表示させることができません。

さらに自由に表示場所を変更するには、「PHPコード」をPHPファイルに記述するか、「ショートコード」をページ貼りつけます。

ヘッダーやフッターなどサイト内で共通で表示させたい場合は、header.phpやfooter.phpなど各PHPファイルに以下のコードを追記します。

PHP

<?php echo do_shortcode(‘[addtoany]’); ?>
php記述例 PHP記述後表示例

特定のページでのみ表示させたい場合は、固定ページ・投稿ページをHTML編集モードに切り替えて、下記のショートコードを貼り付けます。

HTML

[addtoany]

プレビュー

ショートコード表示例

まとめ

SNSシェアボタンがあれば、訪問した方々がサイトを広めてくれます。

シェアしたくなるようなコンテンツを用意したうえで、スムーズにシェアしてもらえるようボタンの表示を整えておく必要があります。

関連する記事

サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年03月10日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。
サムネイル

ワードプレスで文字数のカウントを行う方法【エディター搭載の便……

2023年01月26日
最終更新日:2023年03月10日
ワードプレスにはページエディターに標準的に文字数カウントが搭載されています。外部のWebサイトを利用する必要なく、ダイレクトにチェックすることができるので是非活用してみてください。
サムネイル

ワードプレスでnoindexを設定する方法【サイト全体や特定……

2023年01月17日
最終更新日:2023年01月24日
ワードプレスのサイト全体(すべてのページ)にnoindexを設定する方法はとても簡単で、管理画面の「表示設定」にある「検索エンジンでの表示」にチェックを入れるだけです。
サムネイル

ワードプレスでリダイレクトを設定する手順【.htaccess……

2022年10月28日
最終更新日:2023年01月24日
ワードプレスで制作したページにリダイレクトによる転送処理を設定するには、.htaccessを使う方法とプラグインを使う方法の2通りがあります。