Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでソーシャルシェアボタンを追加する方法(初心者ガイド)

今日の世界では、ソーシャルメディアが多くのユーザーにとってコンテンツ発見の主要な情報源となっています。私たちのチームは、コンテンツ制作者にとってのソーシャルシェアの計り知れない可能性を理解しており、ソーシャルメディアマーケティングに関する記事を何百本も投稿しています。

WordPressサイトにソーシャル共有ボタンを組み込むことで、訪問者がコンテンツをソーシャルメディアネットワークで簡単に共有できるようになります。これは、あなたのリーチを高め、新しいトラフィックを駆動し、ユーザーエンゲージメントを促進することができます。

単に共有するだけでなく、ソーシャルシェア数を表示することで、コンテンツの人気を示すことができ、ユーザーの信頼をさらに高め、クリックを促すことができます。

この投稿では、WordPressサイトにソーシャルシェアボタンを簡単に追加し、シェア数を表示する方法をご紹介します。

Add Social Share Buttons in WordPress (Beginner's Guide)

なぜWordPressにソーシャルシェアボタンを追加するのか?

ソーシャルネットワーキングは、今日最も人気のあるオンライン活動のひとつです。そのため、ソーシャルメディア・マーケティングは、今や中小企業の成長戦略にとって極めて重要な要素となっている。

より多くの潜在カスタマイザーにアプローチしたいのであれば、ソーシャルメディア・プラットフォームは、新しい人々とコミュニケーションをとるための非常に効果的なチャネルである。

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

しかし、ソーシャル共有ボタンを追加することで、訪問者が自分のソーシャルメディアハンドルでコンテンツを共有するよう促すことができます。これにより、あなたのコンテンツは彼らの友人やフォロワーに見てもらうことができ、彼らはコメントをつけたり、「いいね!」を押したり、再共有したりすることができる。

このように、ソーシャルシェアボタンは、サイトへのトラフィックを増やし、社会的信用を高め、リードを増やし、エンゲージメントを高めるのに役立ちます。

それでは、WordPressにソーシャルシェアボタンを簡単に追加する方法を見ていきましょう。以下のクイックリンクから、チュートリアルのさまざまな部分に飛ぶことができます:

WordPressの投稿とページにソーシャルシェアボタンを追加する方法

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

有効化したら、WordPressの管理サイドバーからSocial Snap ” Settingsページにアクセスします。次に、左の列から「ソーシャル共有」タブを展開します。

Expand the social sharing tab

サイドバーに新しい設定が開きますので、そこで「ネットワークの管理」タブを選択してください。

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

また、目のアイコンの上にマウスオーバーし、モバイルスイッチを「オン」に切り替えることで、異なる端末用にボタンの可視性を設定することもできます。こうすることで、モバイルデバイスでサイトを訪問しているユーザーにソーシャル共有ボタンが表示されます。

Click the Add Network button to choose social media platforms for social sharing buttons

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

一般設定のページに移動し、ソーシャル共有アイコンをフローティングバーにするかインラインボタンにするかを選択できます。

ソーシャル・シェア・インライン・ボタンの追加

ソーシャルシェアのインラインボタンは、投稿やページの上部または下部に表示されます。

サイトに追加するには、「インラインボタン」タブをクリックして展開するだけです。

Choose the inline buttons tab

画面右側にソーシャルシェアボタンのプレビューが表示されます。

ここからボタンの位置を設定することができます。コンテンツの下にボタンを表示するには「Below Content」オプションを、ページの上部にボタンを表示するには「Above Content」オプションを選択します。

また、ボタンの配置や共有ラベル、形状、サイズもここからカスタマイズできます。

Customize your social sharing buttons

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

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

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

Choose where you want to display your social sharing buttons

設定が完了したら、一番下にある「変更を保存」ボタンをクリックし、設定を保存することをお忘れなく。

WordPressサイトにアクセスして、ソーシャルシェアボタンの動作を表示できるようになりました。

Social sharing buttons preview

ソーシャル共有フローティング・バーの追加

フローティングバーを追加すると、ソーシャルシェアボタンがWordPressの投稿日やページのサイドに表示されます。

これを行うには、単に「フローティングサイドバー」タブを開きます。

Choose the floating bar option

左カラムに新しい設定が表示され、フローティングバーのアイコンの位置、サイズ、形状を設定することができます。

そうしたら、’Display On’セクションまでスクロールダウンし、ソーシャルシェアボタンを表示したいページを選択します。

例えば、ブログ投稿日のみにソーシャル共有フローティングバーを表示したい場合は、「投稿日」オプションを設定します。

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

Choose where to display your floating bar

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

WordPressブログにアクセスして、ソーシャル共有フローティングバーの動作を表示できるようになりました。

Social sharing floating bar preview

WordPressの画像にソーシャルシェアボタンを追加する方法

写真サイトを持っているなら、ソーシャルスナッププラグインの助けを借りて、画像にソーシャルシェアボタンを追加することもできる。

これにより、ユーザーがあなたの画像をソーシャルハンドルで共有し、あなたのサイトに多くのトラフィックをもたらすことができます。

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

Choose the On Media tab to expand it

ボタンの種類を選びます。ソーシャルシェアボタンを画像の上部にすべて追加したり、Pinterestボタンを追加したりできます。

その後、ボタンのサイズ、形状、可視性、位置を選択することもできます。

Choose social share buttons or Pinterest button to display on top of images

次に、画像の高さと幅の最小値を追加します。これは、あなたのサイトの画像で、高さと幅の最小制限を下回っている場合、共有ボタンが表示されないことを意味します。

次に、’Display On’セクションまでスクロールダウンし、画像にソーシャルシェアボタンを表示したいページまたは投稿のオプションにチェックを入れる必要があります。

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

Configure the display settings for the social share buttons in images

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

あとは、WordPressサイトにアクセスするだけで、ソーシャル共有ボタンが画像で表示される。

Social Share buttons in images preview

WordPressでソーシャルシェア数を表示する

ソーシャルシェアボタンの横にシェア数を表示したい場合は、 ソーシャルスナップ ” 設定ページにアクセスし、左の列から「ネットワークの管理」タブを展開する必要があります。

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

Choose SharedCount.com as the API for share counts

ただし、「SharedCount.com」オプションを設定することをお勧めします。そうすれば、カウントは SharedCount サービス API から取得されます。これにより、プラグインは2回のAPIコールだけですべてのカウントを取得することができ、WordPressのパフォーマンスにとって最適です。

Facebook Graph API」オプションを設定した場合、シェア数はFacebook APIから取得されるため、サイトの表示速度が遅くなる可能性があります。

SharedCount.comのサイトで無料アカウントにサインアップすれば、簡単にSharedCount APIを入手できる。

そのためには、メール・アドレスとパスワードをプロバイダーで入力し、「アカウント作成」ボタンをクリックします。

Create an account on SharedCount.com

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

あなたのアカウントを確認するためのリンクをクリックしてください。

Click account verification link

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

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

Copy your SharedCount API key

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

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

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

Paste your SharedCount.com API key

その後、このAPIキーをTwitterのシェア数に入力します。その後、「変更を保存」ボタンをクリックして設定を保存します。

あなたのサイトにアクセスすると、各ブログ投稿のソーシャル共有ボタンと共有数を確認できるようになりました。

Social share buttons with share count preview

カスタムランディングページにソーシャルシェアボタンを追加する方法

ソーシャルシェアリングボタン付きのサイト用のカスタムランディングページを作りたい場合は、SeedProdを使えば簡単にできます。

ドラッグ&ドロップビルダー、300以上のテンプレート、ソーシャルシェアボタン付きの素晴らしいランディングページを作成するための高度なブロックを備えた、市場で最高のWordPressページビルダーです。

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

:SeedProdには、このチュートリアルで使用できる無料プランもあります。しかし、有料プランにアップグレードすると、より多くの機能がアンロックされます。

有効化したら、WordPressダッシュボードからSeedProd ” ランディングページセクションにアクセスし、「新規ランディングページを追加」ボタンをクリックします。

Click the Add New Landing Page button

新規ページテンプレートの選択」画面が表示され、多数のテンプレートから選択できます。

選択すると、これから作成するランディングページの名前を入力するよう求められます。

これらの情報を入力したら、「Save and Start Editing the Page(保存してページの編集を開始する)」ボタンをクリックして次に進みます。

Enter your page details

すると、SeedProdのドラッグ&ドロップビルダーが起動し、左カラムにブロックのリスト、右カラムにページプレビューが表示されます。

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

その後、左の列からソーシャルシェアリングブロックを見つけて、ページ上のお好きな場所に追加するだけです。

Add the social sharing block to the landing page

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

カラムにある「+ Add New Share」ボタンをクリックして、新しいソーシャル共有ボタンを追加することもできます。

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

Choose a social media platform for the page

上部の「Advanced」タブに切り替えれば、スペーシングの変更、端末の可視性の選択、カスタムCSSの追加、アニメーション効果の使用も可能だ。

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

Publish the landing page with the social sharing block

では、カスタム・ランディング・ページにアクセスして、ソーシャル共有ボタンの動作を確認してください。

デモサイトではこのようなページになりました。

Landing page with the social sharing block

ボーナス: WordPressにWhatsApp共有ボタンを追加する

ソーシャルメディアプラットフォームとは別に、WordPressサイトにWhatsApp共有ボタンを追加することもできます。WhatsAppはインスタントメッセージングアプリです。

WhatsAppシェアボタンを追加することで、ユーザーがサイトコンテンツを友人、家族、同僚などの連絡先にシェアすることが有効化されます。これによりユーザーエンゲージメントを高め、コンテンツの認知度を向上させ、ブランドリーチを拡大することができます。

Sassy Social Shareプラグインを使えば、WordPress に WhatsApp シェアボタンを簡単に追加できます。

WhatsApp Share button

詳しくはWordPressにWhatsAppチャットボックスとシェアボタンを追加するチュートリアルをご覧下さい。

この投稿がWordPressでソーシャルシェアボタンを追加する方法を学ぶのにお役に立てば幸いです。WordPressのメニューにソーシャルメディアのアイコンを追加する方法や、フォロワーを増やすのに最適なWordPressソーシャルメディアプラグインのトップピックも参考にしてください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

62件のコメント返信を残す

  1. Moinuddin Waheed

    Having socail share buttons on website pages and posts is of utmost importance.
    It gives a way to reach more audience and it also gives a reason to share and save
    the useful article for future reference.
    I share the wpbeginner articles on my whatsapp personal contact and see later many times.
    Most of the socail share plugins doesn’t have option for whatsapp button.
    Thanks for mentioning sassy social share plugin, I will try to use it to include whatsapp butto as well.
    Very helpful article.

    • WPBeginner Support

      Glad we could share a helpful plugin :)

      管理者

  2. Saransh Agrawal

    really helpful for me

    • WPBeginner Support

      Glad to hear it was helpful :)

      管理者

  3. Pagula Majorda

    Hi
    Your writeup is good no doubt.
    I want to ask about the icons placed in the Top Bar, do you simply put the url, if so, what purpose does it serve? On a marketplace demos, I found the icons urls automatically changed to reflect the article I was reading. How does one do that? Any ideas will not only help your readers (I am one of them too), but it will increase the coverage of this article.
    Please keep up the good work

    • WPBeginner Support

      Using the Shared Count plugin would not require you to add a link to the social media platform, it would generate the post with a link to the post to share for the user and they would have the option to change the content before posting.

      管理者

  4. Sarwat

    Shared Count plugin is good but doesn’t have whatsapp.

    • WPBeginner Support

      Thanks for sharing that for those looking for a whatsapp button :)

      管理者

  5. Cathy

    do you know of a plugin that I could use my own custom icons for social sharing?

    • WPBeginner Support

      We do not have a recommended plugin for that at the moment but we will be sure to share if we have a recommended one :)

      管理者

  6. Robert B

    Well.. this plugin have not been updated since more than 2 years.

    Do you have an alternativ?

  7. Lynn Phillipi

    All these explanations were very helpful. Thanks so much.

    • WPBeginner Support

      Glad our guide was helpful :)

      管理者

  8. Allan Green

    New to the website builder club, and recently came across the wpbeginner group on facebook. Looking forward to learning lots of new things to build and improve my site.

    • WPBeginner Support

      We hope our content continues to be helpful :)

      管理者

  9. Izhar Ahmad Danish

    Wpbeginner is actually a WP-Pro

    I have been following your content for last two years, I have learned so many things from basic to pro. It also helped me in every minor errors, issues, even selection of Theme, hostings and Plugins.

    Kudos to Syed Balkhi and team

    • WPBeginner Support

      Glad our guides and content have been helpful :)

      管理者

  10. Sourabh

    Hey thanks for the guide.

    • WPBeginner Support

      Glad you found our guide helpful :)

      管理者

  11. Diane Hambrick

    Thank you for a great deal of valuable information! Sharing on social media is so important for our websites.

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      管理者

  12. Khalid

    Nice info and explanation, loved the floating icons, I will try them out.

    • WPBeginner Support

      Glad you liked our guide and recommendations :)

      管理者

  13. Christie

    So helpful! Thank you for adding the visuals!!

    • WPBeginner Support

      You’re welcome, glad our guide and visuals were helpful :)

      管理者

  14. Suzanne

    Thanks for your awesome tutorial solving step 1 in my issue with social media share butotns. Having successfully installed on a specific blogpost (icons are visible) the specific blogpost is not shared on fB, only a generic text and image about my site… what is missing?

  15. karima

    Great article as usual! Thanks

    • WPBeginner Support

      Thank you and you’re welcome :)

      管理者

  16. Syeda maham Fahim

    Great , Thank you

    • WPBeginner Support

      You’re welcome :)

      管理者

  17. Hemant Bisht

    Nicely Explained!

    • WPBeginner Support

      Thank you :)

      管理者

  18. Sojol Rana

    If you don’t mind, can you told me that what social share plugin you use in this site?

    • WPBeginner Support

      At the moment we’re using the shared counts plugin from this tutorial with custom styling :)

      管理者

  19. Ikechukwu

    Nice article but I have a little problem in displaying the share bottoms to my blog category post.

    The bottoms only show in pages instead of post how do I fix that

    Thank you.

    • WPBeginner Support

      You would want to reach out to the support for your theme and they should be able to help with the footer display.

      管理者

  20. Daniela

    Hi well written article thanks.. I was wondering is there a possibility to insert and have the same effect without a plugin I mean with php and jv using Facebook sharing.. Thanks for your reply.

    • WPBeginner Support

      We do not have a beginner-friendly method to add share buttons with JS and PHP

      管理者

  21. Benjamin

    Hi,

    What plugin are you using for your social shares?

    The share counts plugin doesn’t have an option to make it look like yours.

    Thanks

    • WPBeginner Support

      We added custom styling for the shared counts to look like they do on our site

      管理者

      • Benjamin

        Oh, I see

        Is there anywhere I can find this styling to make it look the same on my website? I really like the look!

        Thanks

        • WPBeginner Support

          Not at the moment but we will look into the possibility of including it in an article :)

  22. Martin Koss

    Which social sharing plugin do you use yourselves on your blog (and this post).
    Thanks.

    • WPBeginner Support

      At the moment we are using the shared counts plugin from the article :)

      管理者

  23. Valli

    As per this, am bit confused, whether you are suggesting to add both plugin “Shared count & Sassy social share” or any one is sufficient.
    curiously awaiting for your reply.

    • WPBeginner Support

      Either one is sufficient, they just have different design options depending on what you’re wanting to do.

      管理者

  24. Viktor

    Thanks for the description! I needed a few part of and I got the exact information!

    • WPBeginner Support

      Glad our guide was helpful :)

      管理者

  25. Lorelei

    Very helpful article and easy to follow! Thanks!

    • WPBeginner Support

      You’re welcome, glad you liked our article :)

      管理者

  26. Aman

    It was a fantastic blog post,
    Is there any step by step procedure for beginner in WP, like sequence of blog post or e-book

  27. Kane Martin

    I am regular visitor of wpbeginner. Thanks for doing great job again. Information is well organized and easy to understand, will help me. Can you suggest me some plugins which can display Flickr album on website?

    • WPBeginner Support

      Thank you, while we don’t have a recommendation at the moment, we will certainly keep an eye out :)

      管理者

  28. Xavier Jinan

    Should i use them when my theme already have share buttons ? Because a blog on Hostnoc suggested that adding the buttons can slowdown your website. So why should i use it ?

  29. Chukwuezugo

    What about AddToAny social share plugin? That’s what I use and I love it. You can tweak it to give you either the standard share icons or the floating icons.

  30. Micki

    I rely heavily on information found on WP beginner. The site has been invaluable to me in starting my blog.

    One question on this post: The plug in, Shared Counts, is untested with my version of WordPress. Since I update each time an update is available, I am assuming that it is untested with the most updated version of WordPress.

    I use the Classic Editor plug in, if that makes a difference.

    Is it still safe to use this plug in? It sounds like it is exactly what I am looking for but I am hesitant to install it.

    Any direction would be greatly appreciated.

    Thanks so much for the on-going help found on the site.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。