フローティングソーシャルシェアバーを追加すると、コンテンツの可視性が大幅に向上し、読者がソーシャルメディアで共有することを奨励できます。フローティングバーはユーザーのスクロールに合わせて表示されるため、いつでも簡単にコンテンツを共有できます。
私たちのサイトを運営する中で、フローティングソーシャルシェアバーがエンゲージメントを促進し、トラフィックを増加させる効果を見てきました。この機能をウェブサイトに戦略的に追加することで、ソーシャルシェアの顕著な増加とコンテンツのリーチの拡大を観察しました。
ブログを運営している場合でも、ビジネスを運営している場合でも、フローティングソーシャルシェアバーを追加することは、エンゲージメントを促進し、オンラインプレゼンスを拡大するための簡単な方法です。
この記事では、WordPressサイトにフローティングソーシャルシェアバーを追加するプロセスを説明します。ステップバイステップの説明により、初心者でも簡単に設定できます。
WordPressにフローティングソーシャルシェアバーを追加する理由
目立つソーシャルシェアバーを追加すると、訪問者はあなたのコンテンツをソーシャルメディアプラットフォーム（Instagram、Facebook、Twitterなど）で簡単に共有できます。このバーをスクロール中に表示しておくことで、ユーザーはいつでもコンテンツを共有できる便利な方法を提供します。
これは、エンゲージメント、トラフィック、ブランド認知度の向上につながる可能性があります。さらに、ユーザーがコメントや「いいね！」を残したり、アップデートをフォローしたりする動機付けにもなります。
それ以外にも、フローティングソーシャルシェアバーは、ソーシャルシグナルを増やすことで間接的にウェブサイトのランキングを向上させることができます。ユーザーがソーシャルメディアでコンテンツを共有すると、ウェブサイトへの被リンクが生成され、検索エンジンのランキングに良い影響を与える可能性があります。
それを踏まえて、WordPressにフローティングソーシャルシェアバーを簡単に追加する方法を見ていきましょう。このチュートリアルでは、コードとプラグインの方法について説明します。お好みの方法にジャンプするには、以下のリンクを使用できます。
方法1：WPCodeでフローティングソーシャルシェアバーを追加する
カスタマイズ可能で簡単な方法でWordPressにフローティングソーシャルシェアバーを追加したい場合は、この方法が最適です。
このアプローチでは、市場で最高のWordPressコードスニペットプラグインであるWPCodeを使用します。このツールに関する詳細については、WPCodeのレビューをご覧ください。
WPCodeには、フローティングソーシャルシェアバーを追加するためのすぐに使用できるソリューションを含む、既製のコードスニペットの広範なライブラリがあります。これにより、カスタムコーディングの必要がなくなり、ウェブサイトにこの機能を簡単に実装できます。
まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
注意: WPCodeには無料版があります。ただし、コードスニペットライブラリのロックを解除するには、プラグインのプロプランが必要です。
有効化したら、WordPressダッシュボードのコードスニペット » + スニペットを追加ページに移動し、検索ボックスを使用して「フローティングソーシャルメディアアイコン」スニペットを見つけてください。
それが終わったら、その下にある「スニペットを使用」ボタンをクリックするだけです。
これで、「スニペットの編集」ページが画面に表示されます。フローティングソーシャルシェアバーのコードスニペット（Facebook、Instagram、Twitter、LinkedInへのリンク付き）がすでに「コードプレビュー」ボックスに追加されていることに気づくでしょう。
コードスニペットをそのまま使用するか、下にスクロールして、アイコンの位置、マージン、幅、背景色、高さ、角の丸みを変更できます。
たとえば、これらのソーシャルメディアアイコンの背景色はデフォルトで黒です。ただし、ブランドによく合う色に置き換えることができます。
その後、一番上までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。
次に、「更新」ボタンをクリックして設定を保存し、フローティングソーシャルシェアバーを追加します。
これで、ソーシャルメディアアイコンが機能していることをウェブサイトで確認できます。
デモサイトではこのようになりました。
方法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でフローティングソーシャルシェアバーを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでソーシャルシェアボタンを追加する方法の初心者向けガイドや、サイトを成長させるためのおすすめのソーシャルメディアプラグインもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
zak
このサイトではどのソーシャルメディアプラグインを使用していますか？あなたのフローティングソーシャルシェアバーとは異なって見えますが？
WPBeginnerサポート
zakさん、こんにちは。
はい、WPBeginner専用に書かれています。
管理者
ステファニー
共有ボタンを投稿の上部ではなく下部に追加するにはどうすればよいですか？
ありがとう
ラルフ・イーストウッド
プラグインをインストールしました。見た目は良いです。バーを投稿の下部に表示する方法はありますか？そちらの方が理にかなっているように思えます。人々は投稿を読んで価値があると思った後に共有するでしょう。共有するために一番上までスクロールさせることに頼りたくありません！
Laura
Facebookを「有効なソーシャルサービス」ボックスにインストール、アクティブ化、追加しました。Twitterのアカウントを持っていないので、その部分は空白のままにしました。設定を保存しましたが、Facebookタブがウェブサイトに表示されません！何か見落としましたか？ありがとう
シャム
HTTPSに移行したらソーシャルカウントがゼロに戻ってしまいました。これを修正するにはどうすればよいですか？
Alan
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.)
編集スタッフ
Twitterのシェアボタンを有効にしないか、単に空白のままにしてください。そこにTwitter IDを入力すると、より多くのフォロワーを獲得できます。
管理者
Siska
このプラグインを使用したいのですが、背景色を変更する方法が見つかりません…私のウェブサイトは白ではありません。
Siska
このプラグインを使用したいのですが、背景色を変更する方法が見つかりません…私のウェブサイトは白ではありません。
WPBeginnerサポート
テーマのスタイルシートに以下を追加してみてください。
#fsb-social-bar { border-bottom: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #222; position: relative; clear: both; }1-click Use in WordPress
管理者
ジャン
これをありがとうございます！Googleアナリティクスでシェアを目標としてトラッキングするにはどうすればよいですか？
Elisa
Google +1ボタンを押すとエラーが発生します。赤い三角形が表示され、解決できません。
助けてください!!!
Rick
シェアされた回数を表示するのをオフにするにはどうすればよいですか？シェア数を表示したくありません。
レベッカ
こんにちは、良いプラグインです。ただし、問題があります。「ピン」ボタンを使用すると、写真が切り取られます。これを避けるにはどうすればよいですか？
Skwty
フローティングソーシャルバープラグインがWP-Boldテーマで問題を引き起こしていたことをお知らせしたかったのです。サイドバーに表示するために使用していた関連コンテンツのウィジェットから抜粋が削除されてしまいました。タイトルはありましたが、single.phpでのみ抜粋が消えていました。Solostreamのサポート担当者から、何か言うべきだとアドバイスされました。そのため別のプラグインに切り替えましたが、できればフローティングソーシャルバーを使用したいです。
ありがとうございます！
Zomi Daily
Facebookのシェアボタンを含めていただけますか？
ジョン・ブラウン
このサイトのようにコメント数を表示するバージョンをリリースする予定はありますか？リリース準備ができていなくても、そのコードは公開されていますか？
Jorge
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!
ジュリアス
素晴らしいプラグインですが、残念ながら多くのリソースを消費します。P3プラグインによると、私のプラグイン（12個あります）すべての中で51％を消費しています。
WPBeginnerサポート
私たちは自身のサイトでもそれを使用しており、ページの速度には非常に注意を払っています。P3プラグインに関しては、テスト結果はサーバーで実行されている他のサービスなど多くの要因によって影響を受ける可能性があり、共有サーバーを使用している場合は、それも結果に影響します。
管理者
Urmet
素晴らしいプラグインです。一つ知りたいのですが、あなたのページのように、カウンターがすぐにロードされるようにできますか？プラグインの上にカーソルを合わせていなくても、共有数が表示されます。
Haider
素晴らしいプラグインです！
I finally activated and modified it a little to suit my theme
いくつか質問があります：
1. いいねボタンと一緒に新しいFacebookシェアボタンを含める予定はありますか？ご検討ください。
2. インラインCSSではなく、別のCSSファイルでスタイリングを処理する方が良いのではないでしょうか？多くのプレミアムテーマにはヘッダーに追加されるカスタムCSSのオプションがありますが、この場合は機能しません。スタイルを変更するためにプラグインファイルを変更する必要がありました。
このような素晴らしい製品を本当にありがとうございます！
Jenn Marie
こんにちは！質の高い方からもう一人の方へ：あなたを見ています。このプラグインは素晴らしいです。そして、あなたのすべての作品に見られる細部へのこだわりが原因だと推測します！
質問です。iPhone（iOS7）でバーがスティッキーにならないのはなぜですか？Pointというレスポンシブテーマを使用しています。他のソーシャルプラグインを無効にしてみました。