WordPressにソーシャルシェアボタンを追加する方法（簡単な4つの方法）

ソーシャルメディアは、今日人々が新しいコンテンツを発見する主な方法です。

そのため、WPBeginnerでは、訪問者がコンテンツをソーシャルメディアフィードで簡単に共有できるように、すべての投稿の先頭にソーシャルシェアボタンを追加しています。これにより、リーチが効果的に拡大し、新しいトラフィックが促進され、ユーザーエンゲージメントが向上することがわかりました。

単なる共有を超えて、ソーシャル共有カウントを表示することがユーザーの信頼を高め、クリックを促進することがわかっています。コンテンツの人気を強調することで、他の人があなたのウェブサイトや製品を高く評価している証拠を示します。

この記事では、WordPressウェブサイトにソーシャルシェアボタンを簡単に追加し、共有数を表示する方法を説明します。

WordPressにソーシャル共有ボタンを追加する理由

ソーシャルネットワーキングは、今日の最も人気のあるオンラインアクティビティの1つです。そのため、ソーシャルメディアマーケティングは、あらゆる中小企業の成長戦略の重要な部分となっています。

より多くの潜在顧客にリーチしたい場合、ソーシャルメディアプラットフォームは新しい人々とコミュニケーションをとるための非常に効果的なチャネルです。

問題は、コンテンツをソーシャルメディアプロフィールで共有しても、既存のフォロワーの限られた数にしか届かないことです。

ただし、ソーシャルシェアボタンをサイトに直接追加することで、訪問者がソーシャルフィードでコンテンツを共有することを促すことができます。これにより、コンテンツは友人やフォロワーにも表示され、彼らは「いいね！」、コメント、再共有することができます。

このように、ソーシャルシェアボタンは、より多くのトラフィックをサイトに誘導し、ソーシャルでの信頼性を向上させ、より多くのリードを生成し、エンゲージメントを高めるのに役立ちます。

とはいえ、WordPressにソーシャル共有ボタンを簡単に追加する方法を見てみましょう。以下のクイックリンクを使用して、チュートリアルのさまざまな部分にジャンプできます。

• 方法1：Novashareを使用してソーシャル共有ボタンを追加する（推奨）
• 方法2：Social Snapを使用してソーシャルシェアボタンを追加する（無料）
• 方法3：SeedProdを使用してカスタムランディングページにソーシャル共有ボタンを追加する
• 方法4：Sassy Social Shareを使用してWhatsApp共有ボタンを追加する（ボーナス）

方法1：Novashareを使用してソーシャル共有ボタンを追加する（推奨）

Novashare は、WordPress用の最高のソーシャルメディアプラグインの1つであり、投稿にソーシャル共有ボタンを簡単に追加する方法を提供します。Facebook、Pinterest、X（Twitter）、LinkedInなどの人気プラットフォームのボタンを追加して、さまざまなソーシャルプラットフォームでのコンテンツのリーチを向上させることができます。

各投稿の共有カウントを表示し、サイトに最適なボタンのスタイルを選択できます。このプラグインはWordPressの速度とパフォーマンスにも最適化されているため、サイトの速度が低下する心配はありません。

さらに、Novashareを使用すると、訪問者が記事の引用をすばやく共有できるように、 クリックしてツイートするボックス を作成できます。また、ソーシャルプロフィールを宣伝するために使用できるフォローブロックも提供しています。

開始するには、Novashareのウェブサイトにアクセスしてプランを選択してください。その後、プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

プラグインを有効化したら、WordPressダッシュボードの設定 » Novashareページに移動してライセンスを有効化する必要があります。

「ライセンス」タブにいることを確認し、プラグインを購入したときに提供されたライセンスキーを貼り付けます。次に、「ライセンスを保存」ボタンをクリックしてください。

ソーシャルシェアインラインボタンの有効化

ライセンスを有効にした後、「インラインコンテンツ」タブをクリックしてインラインコンテンツを有効にします。これにより、投稿やページにソーシャル共有ボタンを追加できるようになります。または、ソーシャルボタンをフローティングバーに追加することもできます。これは次のセクションで説明します。

「インラインコンテンツを有効にする」ボタンを「オン」に切り替え、追加したいボタンを選択するだけです。

Novashareには、X（Twitter）、Facebook、LinkedInなどの人気のネットワークを含む26個のボタンのライブラリが付属しています。また、メール、印刷、コピーのアクションボタンも提供しています。

次に、投稿やページにボタンが表示される場所を設定できます。

少し下にスクロールして「表示」セクションに移動します。ここでは、投稿、ページ、メディア添付ファイルページにソーシャルボタンを表示するかどうかをチェックボックスで選択できます。オンラインストアをお持ちの場合は、製品用のチェックボックスも表示されます。

「ボタンの位置」ドロップダウンからボタンの配置を選択することもできます。ソーシャル共有ボタンをコンテンツの上、コンテンツの下、またはその両方に表示するオプションがあります。このショートコードを使用して、各ページにボタンを手動で配置することもできます。

[novashare_inline_content] 

モバイルブレークポイントを使用すると、ソーシャルボタンが特定の幅に達した後、2つ以上の行に分割されることで、小さなモバイルデバイスに表示できるようになります。デフォルトは1200ピクセルですが、小さなデバイスとの互換性を高めるには、768ピクセルに減らすことをお勧めします。

次のセクションでは、ボタンの外観をデザインできます。Novashareでは、次のような数十種類のスタイルと形状の組み合わせから選択できます。

デザインセクションまでスクロールすると、スタイル、レイアウト、配置、サイズ、形状などのボタン属性のドロップダウンメニューが見つかります。

ウェブサイトに最適なさまざまな属性を選択するだけです。

次に、ボタンの色を変更するオプションが表示されます。これらのボタンを空白のままにしておくと、ボタンを選択したときに表示されたデフォルトの色で表示されます。

このセクションで行うすべての色の変更は、すべてのボタンに影響します。ボタンの色、ホバー時の色、ボタンの右側にあるアイコンの色などのオプションがあります。

これらのオプションのいずれかをクリックすると、カラーピッカーが表示され、使用したい色を選択できます。

このセクションの下部にある「ラベルを表示」オプションを使用すると、各ソーシャルネットワークの名前をプラットフォームのアイコンの横に表示するかどうかを選択できます。

ソーシャルシェアボタンを提供するだけでなく、現在の投稿がすべてのソーシャルチャネルで何回共有されたかを表示することも良い考えです。

ブログ記事でシェア数を表示することは、コンテンツの人気を示すことで信頼性を高め、より多くのユーザーのエンゲージメントやシェアを促すことができます。ソーシャルプルーフを提供し、あなたのコンテンツが他者から高く評価されていることを示し、ユーザーの信頼を高めます。

この設定はデフォルトで有効になっています。現在の投稿の共有カウントをソーシャル共有ボタンの前または後に表示することを選択でき、色もカスタマイズできます。

ソーシャル共有ボタンの後に、白い背景の共有カウントが表示されている例を次に示します。

必要であれば、ボタンバーに「友達と共有！」のようなコールトゥアクションを追加することもできます。これにより、より多くの訪問者がコンテンツを共有するようになる可能性があります。

私たちのウェブサイトでは行っていませんが、「テキスト」フィールドにメッセージを入力するだけで、行動喚起を追加できます。フォントサイズや色もカスタマイズできます。

ソーシャルシェアボタンのカスタマイズが完了したら、ページ下部にある「変更を保存」をクリックすると、サイトに追加されます。

デモサイトではこのようになります：

ソーシャルシェアフローティングバーを有効にする

投稿やページにソーシャルシェアボタンを追加する代わりに、ウェブサイトの端にフローティングするバーや、モバイル画面の下部に固定されるバーに追加できます。

デフォルトでは、これは画面の左側に表示されるか、狭い画面では下部に表示されます。コンテンツをスクロールしても移動しません。

ウェブサイトにフローティングバーを有効にするには、設定 » Novashareに移動し、左側の「フローティングバー」タブをクリックする必要があります。

次に、フローティングバーオプションを有効にして、追加したいソーシャルシェアボタンを選択できます。

その後、バーの配置をカスタマイズできます。

インラインコンテンツオプションと同様に、チェックボックスをクリックして、投稿、ページ、メディアアーカイブ、さらにはオンラインストアがある場合は製品にもソーシャル共有ボタンを表示できます。

ボタンを投稿に表示するには、「投稿ページに表示」オプションを有効にする必要もあります。必要に応じて、「アーカイブに表示」設定をオンにして、ブログ投稿アーカイブページにフローティングバーを表示することもできます。

次に、「ボタン配置」ドロップダウンを使用して、ワイドスクリーンでバーをページの右側または左側に表示するかどうかを選択できます。ナロースクリーンでは、下部に表示されます。

「トップオフセット」と「エッジオフセット」オプションを使用して、フローティングバーが画面の端からどれだけ離れて表示されるかを制御できます。

「スクロール時に表示」オプションを使用すると、ユーザーがページを一定距離スクロールするまでソーシャルアイコンを非表示にできます。

このチュートリアルでは、ほとんどのウェブサイトでうまく機能するデフォルト設定を使用します。

デザインと共有カウントのセクションは、上記のインラインコンテンツ設定と同じように機能します。ただし、このページにはモバイルデバイス用の追加セクションがあります。

「モバイル」セクションのデフォルト設定は、ほとんどのウェブサイトで機能します。バーは画面の下部に固定されますが、幅が800ピクセル未満の画面では非表示になります。

ただし、この最大幅、背景色、およびボタンのパディングは簡単に変更できます。また、バーを利用可能な画面スペース全体に表示させるアクションや、合計共有数を非表示にしてスペースを節約するアクションもあります。

ソーシャルシェアボタンの設定が完了したら、画面の一番下までスクロールし、「変更を保存」ボタンをクリックして、ウェブサイトにフローティングバーを表示させてください。

デモサイトではこのようになります：

共有ボタンの設定

ボタンバーのスペースを節約する1つの方法は、共有ボタンを使用することです。これにより、主要なソーシャルネットワークを個別のボタンとして追加でき、ユーザーは共有ボタンをクリックすることで追加のプラットフォームに共有できます。

まず、「インラインコンテンツ」または「フローティングバー」のいずれかに「共有」ボタンを追加してください。

次に、**設定 » Novashare**に移動し、「シェアボタン」タブをクリックして、シェアボタンの設定を構成できます。

これにより、ユーザーが「共有」ボタンをクリックしたときに表示したい追加のソーシャルネットワークを選択できます。また、行動喚起を追加したり、これらの追加ボタンのデザインを選択したりすることもできます。

設定を保存するには、ページ下部にある「変更を保存」ボタンをクリックすることを忘れないでください。

デモウェブサイトで「共有」ボタンをクリックした後の表示は以下の通りです。

画像にPinterestボタンを追加する

Novashareは、ウェブサイトのすべての画像にPinterestの「ピン」ボタンを追加することもできます。デフォルトでは、このボタンはマウスカーソルを画像に重ねたときに表示されます。ただし、常にボタンを表示するようにプラグインを設定することもできます。

まず、設定 » Novashare に移動し、「Pinterest」タブをクリックします。そこに表示されたら、「画像ピンを有効にする」をオンの位置に切り替え、ボタンを表示したい「投稿タイプ」を選択します。

ボタンの位置、形状、色もカスタマイズできますが、ほとんどのウェブサイトではデフォルト設定で問題なく動作します（下のスクリーンショットを参照）。

画像にカーソルを合わせていないときでもPinterestボタンを表示したい場合は、「常に表示」オプションをオンにしてください。

最後に、共有したくない画像がある場合は、「Excluded Images」フィールドにファイル名を入力するだけで、それらの画像にはPinterestボタンが表示されなくなります。

設定を保存して画像にピンボタンが表示されるようにするには、「変更を保存」ボタンをクリックします。

これは、デモウェブサイトでマウスカーソルを画像の上に置いたときの表示です。

方法2：Social Snapを使用してソーシャルシェアボタンを追加する（無料）

サイトにソーシャル共有ボタンを追加する無料の方法を探しているなら、Social Snapプラグインは有料ツールの良い代替手段となります。

まず、Social Snap プラグインをインストールして有効化する必要があります。詳細な手順については、WordPress プラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPress管理画面のサイドバーからSocial Snap » Settingsページにアクセスします。次に、左側の列にある「Social Sharing」タブを展開します。

これにより、サイドバーに新しい設定が開きます。そこで「ネットワークの管理」タブを選択する必要があります。

次に、「+ネットワークを追加」ボタンをクリックして、プロンプトから選択したソーシャルメディアネットワークを追加します。Facebook、X（Twitter）、LinkedIn、メールなどのプラットフォームを追加できます。

マウスカーソルを目のアイコンに合わせ、モバイルスイッチを「オン」に切り替えることで、デバイスごとにボタンの表示を設定することもできます。これにより、モバイルデバイスでサイトを閲覧しているユーザーにソーシャル共有ボタンが表示されます。

その後、「ネットワークの管理」タブを終了します。

これにより、ソーシャル共有アイコン用のフローティングバーまたはインラインボタンを追加するかどうかを選択できる一般設定ページに移動します。

ソーシャル共有インラインボタンの追加

ソーシャル共有インラインボタンは、投稿やページの先頭または末尾に表示されます。

それらをサイトに追加するには、「インラインボタン」タブをクリックして展開してください。

これにより、画面右側にソーシャルシェアボタンのプレビューが表示され、左側の列に新しい設定が開きます。

ここから、ボタンの位置を設定できます。「コンテンツの下」オプションを選択してコンテンツの下にボタンを表示したり、「コンテンツの上」オプションを選択してページの上部にボタンを表示したりできます。

ここから、ボタンの配置やシェアラベル、形状、サイズをカスタマイズすることもできます。

次に、「ボタンラベル」セクションまでスクロールし、ソーシャルメディアプラットフォームの名前、共有数、またはその両方を表示するかどうかを決定できます。

その後、「表示場所」セクションまでスクロールします。ここで、「投稿」ボックスにチェックを入れると、投稿にのみソーシャル共有ボタンを表示できます。「ページ」ボタンにチェックを入れると、「会社概要」、「お問い合わせ」、または「アーカイブ」ページにソーシャル共有ボタンを表示することもできます。

さらに、ソーシャル共有ボタンをホームページにのみ表示したい場合は、「ホーム」オプションを選択できます。

完了したら、設定を保存するために、下部にある「変更を保存」ボタンをクリックすることを忘れないでください。

これで、WordPressウェブサイトにアクセスして、ソーシャル共有ボタンが機能していることを確認できます。

ソーシャルシェアフローティングバーの追加

フローティングバーを追加することにした場合、ソーシャル共有ボタンはWordPressの投稿またはページの横に表示されます。

これを行うには、「フローティングサイドバー」タブを開くだけです。

これにより、左側の列に新しい設定が開かれ、フローティングバーアイコンの位置、サイズ、形状を設定できます。

それが完了したら、「表示場所」セクションまでスクロールダウンし、ソーシャルシェアボタンを表示したいページを選択します。

例えば、ソーシャルシェアのフローティングバーをブログ記事のみに表示したい場合は、「投稿」オプションを選択できます。

同様に、ウェブサイトのホームページにもフローティングバーを表示したい場合は、「ホーム」オプションを選択できます。

最後に、「変更を保存」ボタンをクリックして設定を保存します。

これで、WordPressブログにアクセスして、ソーシャルシェアフローティングバーが機能していることを確認できます。

画像にソーシャル共有ボタンを追加する

写真ウェブサイトをお持ちの場合は、Social Snap プラグインの助けを借りて、画像にソーシャル共有ボタンを追加することもできます。

これにより、ユーザーはあなたの画像をソーシャルフィードで共有できるようになり、あなたのサイトへのトラフィック増加に役立ちます。

まず、WordPressダッシュボードからSocial Snap » Settingsページにアクセスし、「On Media」タブをクリックして開く必要があります。

そこに着いたら、ボタンタイプを選択してください。画像の最上部に追加したり、Pinterestボタンを追加したりできます。

その後、ボタンのサイズ、形状、表示、位置も選択できます。

次に、画像の最小高さと幅を追加できます。これは、ウェブサイト上の最小高さと幅の制限を下回る画像では、共有ボタンが表示されないことを意味します。

次に、「表示先」セクションまでスクロールダウンし、画像にソーシャルシェアボタンを表示したいページまたは投稿のオプションにチェックを入れます。

次に、「モバイルで非表示」スイッチを「オン」に切り替えることで、モバイルデバイスで画像の共有ボタンを表示したくない場合にも対応できます。

最後に、「変更を保存」ボタンをクリックして設定を保存します。

さて、WordPressサイトにアクセスして、画像内のソーシャルシェアボタンを表示してください。

ソーシャル共有カウントの表示

ソーシャル共有ボタンの横に共有数を表示したい場合は、Social Snap » Settingsページにアクセスし、左側の列から「Manage Networks」タブを展開してください。

その後、「Facebook共有カウントプロバイダー」セクションまでスクロールダウンし、そこで2つのソースのいずれかを選択できます。

ただし、'SharedCount.com'オプションを選択することをお勧めします。すると、カウントはSharedCountサービスAPIから取得されます。これにより、プラグインはわずか2回のAPI呼び出しで全てのカウントを取得でき、WordPressのパフォーマンスに最適です。

「Facebook Graph API」オプションを選択すると、Facebook APIからシェア数が取得されるため、サイトの速度が低下する可能性があります。

SharedCount.comのウェブサイトで無料アカウントにサインアップすることで、簡単にSharedCount APIを取得できます。

これを行うには、メールアドレスとパスワードを入力し、「アカウントを作成」ボタンをクリックする必要があります。

ウェブサイトは、あなたのメールアドレスに確認リンクを送信します。

アカウントを認証するには、リンクをクリックしてください。

次に、SharedCountアカウントに再度ログインし、画面右上隅のドロップダウンメニューから「設定」ページにアクセスする必要があります。

これにより、SharedCount APIキーが表示される新しいページに移動します。

このキーをコピーして、WordPressサイトのプラグイン設定ページに戻る必要があります。

次に、APIキーを「SharedCount API Key」フィールドに貼り付けます。

その後、「変更を保存」ボタンをクリックして設定を保存します。

次に、このAPIキーをX（Twitter）の共有数に再度入力できます。その後、「変更を保存」ボタンをクリックして設定を保存します。

これで、ウェブサイトにアクセスして、各ブログ投稿の共有数とともにソーシャル共有ボタンを表示できます。

方法3：SeedProdを使用してカスタムランディングページにソーシャル共有ボタンを追加する

ソーシャルシェアボタン付きのカスタムランディングページをウェブサイトに構築したい場合は、SeedProdを使用すると簡単に実現できます。

私たちの意見では、これは市場で最高のWordPressページビルダーです。ドラッグアンドドロップビルダー、300以上の既製のテンプレート、ソーシャルシェアボタンを備えた素晴らしいランディングページを作成するための高度なブロックが付属しています。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベートしたら、WordPressダッシュボードからSeedProd » Landing Pages セクションにアクセスし、「新しいランディングページを追加」ボタンをクリックします。

これにより、「新しいページテンプレートを選択」画面に移動し、多数の既製のテンプレートから選択できます。

選択が完了すると、作成しようとしているランディングページの名称を入力するように求められます。

この情報を入力したら、「保存してページの編集を開始」ボタンをクリックして続行してください。

これにより、SeedProdのドラッグ＆ドロップビルダーが起動し、左側の列にブロックのリストが表示され、右側にページのプレビューが表示されます。

これで、さまざまなブロックをドラッグアンドドロップしてページを作成できます。詳細については、WordPress でランディングページを作成する方法に関するチュートリアルをご覧ください。

その後、左側の列から「ソーシャル共有」ブロックを見つけて、ページのお好みの場所に簡単に追加します。

次に、ブロックを再度クリックしてサイドバーで設定を開く必要があります。ここで、ドロップダウンメニューから追加したいボタンのソーシャルメディアプラットフォームを選択できます。

列にある「+ 新規共有を追加」ボタンをクリックすることで、新しいソーシャル共有ボタンを追加することもできます。

その後、ボタンのサイズや配置も設定できます。

上部の「高度」タブに切り替えて、スペーシングを変更したり、デバイスの表示を選択したり、カスタムCSSを追加したり、アニメーション効果を使用したりすることもできます。

完了したら、上部にある「保存」ボタンをクリックしてから「公開」ボタンをクリックして設定を保存します。

次に、カスタムランディングページにアクセスして、ソーシャルシェアボタンが機能していることを確認してください。

これは、デモウェブサイトでのページの表示方法です。

方法4：Sassy Social Shareを使用してWhatsApp共有ボタンを追加する（ボーナス）

ソーシャルメディアプラットフォーム以外にも、WordPress サイトに WhatsApp 共有ボタンを追加することもできます。WhatsApp は、世界中の人々がお互いに連絡を取り合うことができるインスタントメッセージングアプリです。

WhatsApp共有ボタンを追加することで、ユーザーは友人、家族、同僚を含む連絡先とサイトのコンテンツを共有できるようになります。これにより、ユーザーエンゲージメントを高め、コンテンツの可視性を向上させ、ブランドリーチを拡大するのに役立ちます。

WordPressにWhatsApp共有ボタンを簡単に追加するには、Sassy Social Shareプラグインを使用できます。

詳細については、WordPressにWhatsAppチャットボックスと共有ボタンを追加する方法に関するチュートリアルをご覧ください。

この記事がWordPressにソーシャルシェアボタンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressメニューにソーシャルメディアアイコンを追加する方法や、フォロワーを増やすためのWordPressソーシャルメディアプラグインのトップピックもチェックしてみてください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。