最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

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

読者にコンテンツを共有してもらうことは、新しいオーディエンスにリーチするための最良の方法の1つです。しかし、標準的な共有ボタンは、訪問者がスクロールを開始した瞬間に表示されなくなることがよくあります。

フローティングソーシャルシェアバーは、常に表示されたままになることでこれを解決し、読者があなたの投稿を宣伝するのに便利です。私たちは自身のウェブサイトでこの配置をテストし、一貫してより多くのクリックとトラフィックを促進することを発見しました。

このガイドでは、WordPressにフローティングソーシャルシェアバーを追加する方法を説明します。

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

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

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

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

それ以外にも、フローティングソーシャルシェアバーは間接的にウェブサイトのSEOを改善することができます。より多くのユーザーがソーシャルメディアであなたのコンテンツを共有すると、あなたの認知度とトラフィックが増加し、他のウェブサイトからのバックリンクの可能性が高まります。

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

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

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

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

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

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

注意:WPCodeには無料版があります。ただし、(この特定のスニペットを含む)コードスニペットライブラリ全体をアンロックするには、プラグインのプロプランが必要です。

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

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

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

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

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

例えば、これらのソーシャルメディアアイコンの背景色はデフォルトで黒です。しかし、ブランドによりよく合う色の16進数コードに置き換えることができます。カラーコードがわからない場合は、無料のオンラインカラーピッカーツールを使用して見つけることができます。

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

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

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

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

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

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

フローティングソーシャルシェアバー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のフローティングソーシャル共有バーに関する最も一般的な質問への回答を紹介します。

1. フローティングソーシャル共有バーを追加すると、ウェブサイトが遅くなりますか?

コードが不十分なソーシャルプラグインは、多くの外部スクリプトを読み込むことでサイトを遅くする可能性があります。しかし、WPCodeライブラリスニペットのような軽量なソリューションを使用することで、共有機能を提供しながらサイトの速度を速く保つことができます。

2. フローティング共有バーはモバイルユーザーエクスペリエンスに影響しますか?

フローティングバーは、小さな画面ではコンテンツをブロックすることがあります。フローティングソーシャル共有バーの設定を、モバイルデバイスでは非表示にするか、画面下部に固定フッターとして表示するように構成することをお勧めします。

3. フローティングバーに含めるべきソーシャルメディアプラットフォームは何ですか?

特定のオーディエンスが最もアクティブなプラットフォームを優先する必要があります。ほとんどのブログやビジネスでは、Facebook、Twitter(X)、LinkedInをフローティングソーシャル共有バーに追加することで、最良の結果が得られます。

4. プラグインなしでフローティングシェアバーを追加できますか?

はい、HTMLとCSSを使用してフローティングシェアバーをコーディングできますが、これには技術的な知識が必要です。WPCodeを使用することをお勧めします。これにより、テーマファイルを直接編集することなく、必要なコードを安全に挿入できます。

追加リソース

この記事がWordPressにフローティングソーシャルシェアバーを追加する方法を学ぶのに役立ったことを願っています。これらの追加リソースも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

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

究極のWordPressツールキット

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

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

123 件のコメント返信する

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

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

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

  4. 指示には「次に、Twitter IDをフィールドに入力します…」とあります。
    私は自分でTwitterアカウントを持っていません。Twitterに参加せずにこのプラグインを使用することはできませんか?(私はFacebookとLinkedInを利用しています。)

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

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

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

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

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

    ありがとうございます!

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

  11. こんにちは!素晴らしいプラグインをありがとうございます。人々が良いねや+1を押したときに、私のブログでも投稿が共有されるのでしょうか?ソーシャルバーから人々はどのように私のコンテンツを共有できますか?ノースダコタ州の州都はどこですか? ;) 再度ありがとうございます!

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

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

      管理者

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

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

    ついに有効化し、私のテーマに合わせて少し変更しました :)

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

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

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

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

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

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

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

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

      /* FB投稿風ポップアップのクロッピングを修正するため */ .fb-like iframe { max-width: inherit !important; }

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

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

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

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

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

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

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

  19. こんにちは、

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

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

    ありがとう

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

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

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

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

      管理者

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

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

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

        ありがとうございます。

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

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

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

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

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

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

  26. こんにちは、

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

  27. ナイスプラグイン

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

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

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

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

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

  31. こんにちは、このプラグインと全般的に素晴らしい仕事です
    質問があります。
    私の投稿の評価PHPコードをバーに追加して、ソーシャルボタンと一緒にフロートさせる方法はありますか。
    それは素晴らしい機能になるでしょう :)

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

  33. こんにちは、

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

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

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

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

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

    – グレッグ

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

  35. 共有数の表示を無効にするオプションを作成する計画はありますか?今のところ、大きなゼロがあるので有効にしていません。オプションがあるか、まともな数字になったら有効にします。 ;-)

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

  37. ここに表示されているのと同じようにカスタマイズする方法はありますか?インストールしましたが、フォントが異なり、ボタン間の間隔が広く、区切り線がありません :)

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

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

      管理者

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

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

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

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

返信する

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