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

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

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

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

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

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

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

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

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

• 方法1：WPCodeでフローティングソーシャルシェアバーを追加する
• 方法2：プラグインでフローティングソーシャルメディアリンクバーを追加する
• ボーナス：WordPressにフローティングソーシャルフォローバーを追加する
• フローティングソーシャルシェアバーに関するよくある質問
• 追加リソース

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法2：プラグインでフローティングソーシャルメディアリンクバーを追加する

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

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

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

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

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

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

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

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

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

ソーシャルメディアのフォロワーを増やしたい場合は、WordPressにフォローボタン付きのフローティングバーを追加することもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フローティングソーシャルシェアバーに関するよくある質問

ユーザーがソーシャルリーチを拡大するのを支援する経験の中で、共有ボタンの設定に関する特定の質問にしばしば遭遇します。ここでは、WordPressのフローティングソーシャル共有バーに関する最も一般的な質問への回答を紹介します。

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

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

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

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

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

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

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

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

追加リソース

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

• WordPress 用の最高のソーシャルメディアプラグイン（専門家ピック）
• WordPressにソーシャル共有ボタンを追加する方法
• WordPress ユーザー向けの最高のソーシャルメディア監視ツール
• WordPress の投稿にクリックしてツイートするボックスを追加する方法

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