WordPressにフローティングソーシャルシェアバーを追加する方法

フローティングソーシャルシェアバーを追加すると、コンテンツの可視性が大幅に向上し、読者がソーシャルメディアで共有することを奨励できます。フローティングバーはユーザーのスクロールに合わせて表示されるため、いつでも簡単にコンテンツを共有できます。 

私たちのサイトを運営する中で、フローティングソーシャルシェアバーがエンゲージメントを促進し、トラフィックを増加させる効果を見てきました。この機能をウェブサイトに戦略的に追加することで、ソーシャルシェアの顕著な増加とコンテンツのリーチの拡大を観察しました。

ブログを運営している場合でも、ビジネスを運営している場合でも、フローティングソーシャルシェアバーを追加することは、エンゲージメントを促進し、オンラインプレゼンスを拡大するための簡単な方法です。

この記事では、WordPressサイトにフローティングソーシャルシェアバーを追加するプロセスを説明します。ステップバイステップの説明により、初心者でも簡単に設定できます。

WordPressにフローティングソーシャルシェアバーを追加する

WordPressにフローティングソーシャルシェアバーを追加する理由

目立つソーシャルシェアバーを追加すると、訪問者はあなたのコンテンツをソーシャルメディアプラットフォーム(Instagram、Facebook、Twitterなど)で簡単に共有できます。このバーをスクロール中に表示しておくことで、ユーザーはいつでもコンテンツを共有できる便利な方法を提供します。

これは、エンゲージメント、トラフィック、ブランド認知度の向上につながる可能性があります。さらに、ユーザーがコメントや「いいね!」を残したり、アップデートをフォローしたりする動機付けにもなります。

それ以外にも、フローティングソーシャルシェアバーは、ソーシャルシグナルを増やすことで間接的にウェブサイトのランキングを向上させることができます。ユーザーがソーシャルメディアでコンテンツを共有すると、ウェブサイトへの被リンクが生成され、検索エンジンのランキングに良い影響を与える可能性があります。

それを踏まえて、WordPressにフローティングソーシャルシェアバーを簡単に追加する方法を見ていきましょう。このチュートリアルでは、コードとプラグインの方法について説明します。お好みの方法にジャンプするには、以下のリンクを使用できます。

方法1:WPCodeでフローティングソーシャルシェアバーを追加する

カスタマイズ可能で簡単な方法でWordPressにフローティングソーシャルシェアバーを追加したい場合は、この方法が最適です。

このアプローチでは、市場で最高のWordPressコードスニペットプラグインであるWPCodeを使用します。このツールに関する詳細については、WPCodeのレビューをご覧ください。

WPCodeには、フローティングソーシャルシェアバーを追加するためのすぐに使用できるソリューションを含む、既製のコードスニペットの広範なライブラリがあります。これにより、カスタムコーディングの必要がなくなり、ウェブサイトにこの機能を簡単に実装できます。

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

注意: WPCodeには無料版があります。ただし、コードスニペットライブラリのロックを解除するには、プラグインのプロプランが必要です。

有効化したら、WordPressダッシュボードのコードスニペット » + スニペットを追加ページに移動し、検索ボックスを使用して「フローティングソーシャルメディアアイコン」スニペットを見つけてください。

それが終わったら、その下にある「スニペットを使用」ボタンをクリックするだけです。

フローティングソーシャルメディアアイコンのスニペットには「スニペットを使用」をクリック

これで、「スニペットの編集」ページが画面に表示されます。フローティングソーシャルシェアバーのコードスニペット(Facebook、Instagram、Twitter、LinkedInへのリンク付き)がすでに「コードプレビュー」ボックスに追加されていることに気づくでしょう。

コードスニペットをそのまま使用するか、下にスクロールして、アイコンの位置、マージン、幅、背景色、高さ、角の丸みを変更できます。

たとえば、これらのソーシャルメディアアイコンの背景色はデフォルトで黒です。ただし、ブランドによく合う色に置き換えることができます。

フローティングソーシャルシェアバーをカスタマイズする

その後、一番上までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。

次に、「更新」ボタンをクリックして設定を保存し、フローティングソーシャルシェアバーを追加します。

コードスニペットの更新を有効にする

これで、ソーシャルメディアアイコンが機能していることをウェブサイトで確認できます。

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

フローティングソーシャルシェアバーGIF

方法2:プラグインでフローティングソーシャルシェアバーを追加する

ウェブサイトでカスタムコードを使用したくない場合は、この方法が適しています。ただし、このアプローチではカスタマイズオプションがそれほど多く得られないことに注意してください。

まず、Floating Social Share Iconsプラグインをインストールして有効化する必要があります。詳細は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

アクティベート後、WordPressダッシュボードから**フローティングリンク&ソーシャルアイコン**ページにアクセスしてください。デフォルトでは、プラグインは自動的にフローティングアイコンを追加し、ユーザーはホームページ、次の投稿、前の投稿、ページの上部、ページの下部に移動したり、現在のURLをコピーしたりできるようになります。

ただし、これらの機能のいずれも必要ない場合は、これらのオプションのスイッチをオフにすることができます。そうすると、変更は自動的に同期されます。

スイッチを切り替えて不要なアイコンを削除します

その後、管理サイドバーからフローティングリンク&ソーシャルアイコン » ソーシャルアイコンページに移動します。

フローティングソーシャルシェアバーをカスタマイズするには、目的のソーシャルメディアプラットフォームの横にあるスイッチを切り替えるだけです。これにより、対応するアイコンがバーに表示され、訪問者がコンテンツを簡単に共有できるようになります。

WordPressにフローティングソーシャルシェアバーを追加する

変更を行うと、設定は自動的に保存されます。

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

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

ボーナス:WordPressにフローティングソーシャルバーを追加する

必要であれば、WordPressにフォローボタン付きのフローティングソーシャルバーを追加することもできます。

これにより、訪問者はソーシャルメディアプロフィールに簡単に接続し、最新のニュースやイベントを把握できます。ユーザーがソーシャルメディアであなたをフォローするのを便利にすることで、リーチを拡大し、熱心なコミュニティを育成できます。

これを行うには、OptinMonsterが必要です。これは市場で最高のリードジェネレーションツールです。さらに、フローティングソーシャルバーを作成するための既製のテンプレートも付属しています。

まず、OptinMonsterのウェブサイトにアクセスしてアカウントにサインアップしてください。フローティングバーキャンペーンタイプが含まれているため、Basicプランを購入する必要があることに注意してください。

OptinMonster ウェブサイト

次に、WordPressダッシュボードに移動して、OptinMonsterコネクタープラグインをインストールして有効化します。詳細は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

アクティベートすると、ウェルカム画面とセットアップウィザードが表示されます。「既存のアカウントを接続」ボタンをクリックしてください。

既存のアカウントを接続

その後、画面の指示に従って、OptinMonsterアカウントをWordPressに接続できます。

それが完了したら、WordPressダッシュボードからOptinMonster » Templatesページに移動し、キャンペーンタイプとして「Floating Bar」を選択します。

次に、「ソーシャルメディアでのフォロー」テンプレートの「テンプレートを使用」ボタンをクリックします。これにより、作成しようとしているキャンペーンの名前を追加するプロンプトが開きます。

ソーシャルバーテンプレートのフォローを選択

OptinMonsterのドラッグ&ドロップビルダーが画面に表示されます。

ここでフローティングバーをデザインできます。

ソーシャルバーをお好みに合わせてカスタマイズ

このプラグインは、テンプレートにドラッグアンドドロップできるさまざまなブロックを提供します。たとえば、ソーシャルメディアバーに画像、テキスト、ボタンなどを追加できます。

詳細については、WordPressでアラートバーを追加する方法に関するチュートリアルをご覧ください。

その後、フローティングバー内のソーシャルメディアフォローボタンをクリックします。これにより、左側の列に新しい設定が開きます。

ここで、Facebook、Instagram、Twitterの各ページのURLをそれぞれ追加できます。

ソーシャルメディアページのURLとIDを追加してください

完了したら、上部から「公開」タブに切り替え、キャンペーンステータスを「公開」に変更します。次に、「保存」ボタンをクリックしてビジュアルビルダーを閉じます。

WordPressサイトにアクセスして、フローティングソーシャルバーが機能していることを確認できるようになりました。

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

この記事が、WordPressでフローティングソーシャルシェアバーを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでソーシャルシェアボタンを追加する方法の初心者向けガイドや、サイトを成長させるためのおすすめのソーシャルメディアプラグインもご覧ください。

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

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

123 CommentsLeave a Reply

  1. このサイトではどのソーシャルメディアプラグインを使用していますか?あなたのフローティングソーシャルシェアバーとは異なって見えますが?

  2. プラグインをインストールしました。見た目は良いです。バーを投稿の下部に表示する方法はありますか?そちらの方が理にかなっているように思えます。人々は投稿を読んで価値があると思った後に共有するでしょう。共有するために一番上までスクロールさせることに頼りたくありません!

  3. Facebookを「有効なソーシャルサービス」ボックスにインストール、アクティブ化、追加しました。Twitterのアカウントを持っていないので、その部分は空白のままにしました。設定を保存しましたが、Facebookタブがウェブサイトに表示されません!何か見落としましたか?ありがとう

  4. HTTPSに移行したらソーシャルカウントがゼロに戻ってしまいました。これを修正するにはどうすればよいですか?

  5. Your instructions say, “Next, add your twitter ID in the field …”
    I do not have a Twitter account myself. Can I not use this plugin without joining Twitter? (I am on Facebook and LinkedIn.)

  6. このプラグインを使用したいのですが、背景色を変更する方法が見つかりません…私のウェブサイトは白ではありません。

  7. このプラグインを使用したいのですが、背景色を変更する方法が見つかりません…私のウェブサイトは白ではありません。

  8. これをありがとうございます!Googleアナリティクスでシェアを目標としてトラッキングするにはどうすればよいですか?

  9. Google +1ボタンを押すとエラーが発生します。赤い三角形が表示され、解決できません。
    助けてください!!!

  10. シェアされた回数を表示するのをオフにするにはどうすればよいですか?シェア数を表示したくありません。

  11. こんにちは、良いプラグインです。ただし、問題があります。「ピン」ボタンを使用すると、写真が切り取られます。これを避けるにはどうすればよいですか?

  12. フローティングソーシャルバープラグインがWP-Boldテーマで問題を引き起こしていたことをお知らせしたかったのです。サイドバーに表示するために使用していた関連コンテンツのウィジェットから抜粋が削除されてしまいました。タイトルはありましたが、single.phpでのみ抜粋が消えていました。Solostreamのサポート担当者から、何か言うべきだとアドバイスされました。そのため別のプラグインに切り替えましたが、できればフローティングソーシャルバーを使用したいです。

    ありがとうございます!

  13. このサイトのようにコメント数を表示するバージョンをリリースする予定はありますか?リリース準備ができていなくても、そのコードは公開されていますか?

  14. Hi! Thanks for the great plugin. I have some questions when people press like or +1 do they share the post in my blog too? How can people share my content from the social bar? What is the capital of North Dakota ;) Thanks again!

  15. 素晴らしいプラグインですが、残念ながら多くのリソースを消費します。P3プラグインによると、私のプラグイン(12個あります)すべての中で51%を消費しています。

    • 私たちは自身のサイトでもそれを使用しており、ページの速度には非常に注意を払っています。P3プラグインに関しては、テスト結果はサーバーで実行されている他のサービスなど多くの要因によって影響を受ける可能性があり、共有サーバーを使用している場合は、それも結果に影響します。

      管理者

  16. 素晴らしいプラグインです。一つ知りたいのですが、あなたのページのように、カウンターがすぐにロードされるようにできますか?プラグインの上にカーソルを合わせていなくても、共有数が表示されます。

  17. 素晴らしいプラグインです!

    I finally activated and modified it a little to suit my theme :)

    いくつか質問があります:

    1. いいねボタンと一緒に新しいFacebookシェアボタンを含める予定はありますか?ご検討ください。
    2. インラインCSSではなく、別のCSSファイルでスタイリングを処理する方が良いのではないでしょうか?多くのプレミアムテーマにはヘッダーに追加されるカスタムCSSのオプションがありますが、この場合は機能しません。スタイルを変更するためにプラグインファイルを変更する必要がありました。

    このような素晴らしい製品を本当にありがとうございます!

  18. こんにちは!質の高い方からもう一人の方へ:あなたを見ています。このプラグインは素晴らしいです。そして、あなたのすべての作品に見られる細部へのこだわりが原因だと推測します!

    質問です。iPhone(iOS7)でバーがスティッキーにならないのはなぜですか?Pointというレスポンシブテーマを使用しています。他のソーシャルプラグインを無効にしてみました。

  19. 私と同じように、フローティングバーが機能しないという問題を抱えている人がたくさんいます。サポートコメントを確認しましたか?あなたがフローティングバーが機能しない理由に対処しないので、壊れていると仮定するしかないと思います。別の解決策を探す必要があります。(悲しい顔)

    • Mike、WP 3.8でテストしましたが、正常に動作します。無料プラグインとして、サポートオプションは限られています。残念ながら、テーマ関連の問題には対応できません。

      管理者

  20. こんにちは、このプラグインを共有していただきありがとうございます。フローティングソーシャルバーの「いいね!」をクリックすると、友達に共有するためのウィンドウが表示されます。しかし、ウィンドウが切り取られてしまい、左側しか見えません。これはFacebookのいいねボタンだけで、G+では発生しません。これを修正する方法を知っていますか?

    • Brian、これをスタイルシートまたはテーマのカスタムCSSボックスに追加してみてください。

      /* to fix cropping of fb post-like popup*/
      .fb-like iframe {
      max-width: inherit !important;
      }

      同じ問題を抱えていましたが、これはすぐに解決しました!

  21. このプラグインは本当に気に入りました。ブログをより良くするために自分でいくつか変更を加えました。

    また、ThematoSoupのSticky Headerも使用しています。そのため、スクロールダウンすると、フローティングソーシャルバーがスティッキーヘッダーと完全に重なります。

    問題は、バーとfsb-sprite画像の背景です。
    そのため、このプラグインのCSSを編集して、バーの背景色を削除し、fsb-sprite画像の背景を削除しました。

    この動作は私のブログのどの投稿でも確認できます。私のブログ:Techpingo[dot]com。

    私の質問:無料版では画像がボタンとして使用され、カウンターは正しく配置されています。しかし、あなたのブログ「wpbeginner.com」や姉妹ブログ「list25.com」にあるような、実際のボタンを使ったカスタマイズ版をどのように使用できますか?

    どうすればできるか教えてください。ただし、ダメとは言わないでください。

  22. 素晴らしいプラグインをありがとうございます。いくつかのウェブサイトで使用しています。

  23. こんにちは、

    ソーシャル共有はiOSなどでネイティブ機能になっているため、モバイルデバイスでバーを無効にできるかどうかを知りたいだけです。もし可能であれば、その方法を教えてください。

    以前の会話で質問にすでに回答している場合は、申し訳ありません。ざっと見たところ、誰も見つけられませんでした。

    ありがとう

  24. ウェブサイトにインストールしたところ、うまく機能しています。ブログの背景色に合わせるために、共有バーの背景色を変更したいのですが。CSSファイルで試しましたが、うまくいきませんでした。どうすればできますか?よろしくお願いします。

    • Muhammadさん、透明な背景の独自のfsb-sprite.pngファイルを作成してみてください。このファイルはテーマのimagesフォルダにあり、現在ボタン画像は白い背景上にあります。Adobe Fireworksのような透明キャンバスをサポートする画像編集プログラムが必要です。

  25. こんにちは、Pinterestボタンでリダイレクトループが発生しています。他のボタンはすべて正常に動作しているようです。何か間違っている可能性のあるアイデアはありますか?

    • テストサイトでは正常に動作しています。他のソーシャルメディアプラグインを無効にして、これが機能するかどうか試してください。機能する場合は、競合しているプラグインについてお知らせください。

      管理者

      • こんにちは、ありがとうございます。私のサイトのPinterestボタンはあなたにとって機能しますか? – http://digitalvillas.com/portfolio/dvr43-modern-fantasy-villa/

        そのテーマで唯一の他のソーシャルプラグインは「Facebookソーシャルプラグインウィジェット」なので、新しいデモサイトにプラグインを追加してテストしています。このサイトは別のテーマを使用しており、他のソーシャルメディアプラグインは一切ありませんが、同じホスティングを使用しています。Pinterestボタンからも同じ応答が得られます。

        このページにはPinterestがないためテストできません。テストできる他のサイトはありますか?

        ありがとうございます。

  26. WordPressでフローティングソーシャルシェアバーを追加する方法についての素晴らしい情報ですね?
    探していた情報が見つかりました。

  27. Facebookのいいねについて質問があります。これを開くと、予想通りFacebookで共有するボックスが表示されます。しかし、複数のFacebookページを持っている場合、共有を特定のページ(個人ページかビジネスページか)に直接送信するにはどうすればよいですか?これはFacebookの共有やいいねでよくある問題です。何か考えはありますか?
    よろしくお願いします。
    Paul

  28. 質問があります。この新しいフローティングソーシャルバーを有効にすると、ジェットパックのソーシャル共有で有効になっている、世界中に公開されている、またはブログにある以前の投稿はどうなりますか?それらの投稿からソーシャルボタンは消えますか?

    • フローティングソーシャルバーには、それらの投稿の「いいね!」とツイート数が表示されます。このプラグインをインストールする前に、人々が投稿を共有する方法には影響しません。

      管理者

  29. 新しいプラグインを使いたいのですが、ただし

    カスタマイズされたグラフィックや、サブヘッダーに追加された「ナビゲーションアイコン」があるWordPressサイトにインストールしても大丈夫ですか? *
    (これは誰かに依頼して作成してもらいました)

    この件に関する情報やヘルプがあれば、大変助かります!

  30. こんにちは、

    wpbeginner様、このような素晴らしいプラグインを作成していただきありがとうございます。インストールしてみたところ、浮いていないことに気づき、ほとんどのプラグインを無効化し、一つずつ有効化していく中で原因を特定しました。このプラグインと競合するプラグインは2つあります:Facebook TrafficPop™ for WordPressWordpress Like Locker です。どちらもcodecanyon.netの同じ作者のものです。これを修正する方法について何かご存知ですか?

  31. ナイスプラグイン

    1つの観察:sprite.pngの白い背景を削除する必要があります。そうすれば、要素の周りに見苦しい白い境界線がない状態で背景を調整できます。

    その他は言うことなし、素晴らしい仕事です

  32. インストールしたばかりです。とても良い感じです。
    インストールした理由は2つあります。
    ユニークであること
    信頼できること

  33. この素晴らしいプラグインをありがとうございます。一点問題があります。プラグインを有効にすると、投稿をクリックした際に、htaccessからアクセス拒否のメッセージが表示されます(/wp-adminディレクトリを保護しています)。資格情報を入力せずにキャンセルをクリックすると、ページとプラグインはロードされ、すべて正常に見えます。このプラグインは/wp-adminフォルダへのアクセスを必要としますか?

  34. 気に入りませんでした。なぜなら、メールで送信するオプションが必要だったからです。このプラグインにはそれがありませんでした!

  35. Hello , great work with this plugin and in general
    I have a question .
    Is there a way to add my post rating php code in the bar , so it will float with the social buttons too .
    It will be a nice future :)

  36. 完璧なタイミングです!クロールやインデックスの問題を深刻に引き起こしていたソーシャル共有プラグインをちょうど削除したところでした。本当にありがとうございます。人生で最高のものは本当に無料です。寄付をさせていただきますし、将来的にはあなたの他の有料製品やサービスも検討させていただきます…あなたは最高です!

  37. こんにちは、

    このページの指示には次のように書かれています。

    「次に、次の形式でTwitter IDをフィールドに追加します @wpbeginner。」

    プラグインの設定ページにある説明には次のように書かれています。

    「訪問者があなたの投稿をリツイートする際のTwitterユーザー名(@記号なし)。」

    明確化していただき、ありがとうございます。

    – Greg

  38. このプラグインをありがとうございます。iPadで読書中にソーシャルバーが投稿テキストを覆わないことを常に感謝していました。他の多くのプラグインはそうではありません。また、多くのチュートリアルも感謝しています。WordPressで何かを行う方法を知る必要があるときは、一般的なGoogle検索よりも、あなたのサイトが最初に検索するサイトであることがほとんどです。

  39. 皆さん、本当にありがとうございます。大好きです。「Sociable」にはうんざりしていました。

  40. Are there any plans to create an option to disable the number of shares display? For now I’m not activating it because of the big fat zeros. Will activate when there’s an option or I have decent numbers. ;-)

    • はい、本日中に公開される予定の次のアップデートでは、カウントが0の場合は自動的に非表示になります。カウントが0より大きい場合は表示されます。

      管理者

  41. このプラグインは、新しく立ち上げたブログにまさに必要としていたものです。残念ながら、シェア数が0件というのは残念です。カウンターをオプションにするという考えはありますか?

  42. Is there a way to customize it so it looks just like the way you have it on here? I installed it, but the font is different, it’s more spaced out between the buttons, and there isn’t the line dividers :)

    • このサイトのカスタマイズは、当社のデザインに合わせて行われています。Oswaldというフォントを使用しており、バーで使用するにはまずデザインで読み込む必要があります。このプラグインを使用する何千ものユーザーのために、サイトのデザインに合わない外部フォントを読み込むのは意味がありません。

      要するに、もしそうしたいのであれば、プラグインのCSSスタイルを上書きすることができます。

      管理者

      • ありがとう、皆さん。これは素晴らしいプラグインです。ここのあなたのページにあるような線区切りを追加し、CSSでフォントを変更する方法を教えていただけますか?私は初心者でCSSはわかりませんが、試してみたいと思っています。線区切りを追加し、フォントを変更するには、CSSのどの行を変更すればよいですか?

        事前に感謝いたします。そして、最高のソーシャルメディアプラグインをありがとうございます。

  43. それがどのように見えるか、そしてどのように機能するかを示す例を見る場所はありますか?

    他のものはすべて試しましたが、満足のいくものはありませんでした。これが私たちにとって適切なものかどうか見てみたいです。

返信する

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