WordPressでカスタムFacebookのようなボタンを作成する方法
公開: 2022-02-20WordPressにカスタムのFacebookのようなボタンを追加すると、投稿、ビデオ、画像のアウトリーチが強化されます。 この追加のアウトリーチは、追加のブランディングとコンバージョンをもたらします。
ただし、Facebookのようなカスタムボタンを追加するのは初心者にとって簡単ではありません。 このような場合、WordPressプラグインを使用するとプロセス全体が非常に簡単になります。 ただし、WordPressで利用できるソーシャルメディアプラグインが多数あるため、プラグインを選択するのが難しい場合があります。
そこで、このブログでは、多目的のWordPressプラグインElementsKitを使用してカスタムのFacebookのようなボタンを作成する方法を紹介します。
WordPressにFacebookのようなカスタムボタンを追加する必要があるのはなぜですか？
Facebookは、他のチャネルと比較して、米国で2番目に使用されているソーシャルメディアプラットフォームです。 実際、ユーザーを調査した結果、世界中で毎月約29億1,000万人のアクティブユーザーがこのプラットフォームを使用していることがわかりました。 これは、Facebookに参加したいユーザーが世界中にいることを証明しています。
Facebookの「いいね！」ボタンは、訪問者がそれを見るたびにWebサイトにもっと関与する傾向を高めます。 その結果、 Webサイト全体のパフォーマンスが向上し、ビジネス目標を達成できるようになります。
たとえば、訪問者はFacebookであなたのリソースを高く評価して共有できます。 その結果、あなたのリソースはより多くの人々に届き、より多くの訪問者の関与はより少ないバウンス率につながります。 さらに、エンゲージメントが高いと、コンバージョン率とともにサイトの平均セッション時間が長くなります。 それは訪問者を顧客に変える可能性を高めるからです。
そのため、Webサイトの訪問者の関与を最大化するために、Facebookのようなボタンを生成する必要があります。 ここでの主な関心事は、カスタマイズされたFacebookのようなボタンを追加する方法です。 WordPressサイトに「いいね」ボタンが必要な場合は、次の部分をスキップしないでください。
ElementsKitを使用してボタンのようなカスタムFacebookを追加する方法
カスタマイズされたFacebookのようなボタンの作成は、コーディングまたはWordPressプラグインの使用によって可能です。 ここでは、ユーザーフレンドリーなプロセスではないため、コードを使用して追加することは避けています。 WordPressプラグインを使用することは、WordPressプラグインをサイトに追加するための最も適切で使いやすいプロセスです。
この目的のために、フルパックのElementorアドオンと見なされるElementsKitを使用します。 それは、ボタンのようなカスタムFacebookを作成するために使用するクリエイティブなボタンウィジェットとともに、サイトを構築するための多数のウィジェットとモジュールを提供するためです。 ElementorはElementorのアドオンであるため、最初にElementorをインストールしてアクティブ化することを忘れないでください。
次に、以下の3つの手順に従って、公式のFacebookのようなボタンを追加します。
ステップ1：カスタマイズされたFacebookの「いいね！」ボタンのクリエイティブボタンウィジェットを有効にします。
まず、バックエンドからクリエイティブボタンウィジェットを有効にする必要があります。 これを行うには、 ElementsKitにマウスを合わせ、 ElementsKitをクリックしてから、ウィジェットにアクセスします。 次に、クリエイティブボタンウィジェットを有効にして、[変更を保存]ボタンを押します。
ステップ2：クリエイティブボタンウィジェットを追加します。
このウィジェットを使用して、Facebookのようなボタンを任意のページまたは投稿に追加できます。 追加するには、 [ページ]>>[新規追加]に移動します。
次に、[ Elementorで編集]ボタンを押すと、メインのカスタマイズを実行できる別のページにリダイレクトされます。
その後、検索ボックスでクリエイティブボタンウィジェットを検索し、ウィジェットをプラス記号にドラッグアンドドロップして、カスタムのFacebookのようなボタンを生成します。
ステップ3：ボタンのカスタマイズ。
ボタンのカスタマイズがあります。 WebサイトにカスタマイズされたFacebookのようなボタンを作成するには、次の設定を行います。
- ラベル：ここにボタンのテキストを入力する必要があります。
- URL：このフィールドにFacebook投稿のリンクを入力します。 これにより、誰かがボタンを押すたびに訪問者が投稿にリダイレクトされます。 そこから、投稿を高く評価したり共有したりできます。
- アイコンの追加：アイコンボタンを有効にしてアイコンを追加します。
- アイコン：親指を上に向けるか、ボタンのテキストとともに表示する別のアイコンを選択します。
- アイコンの位置：ボタンテキストの前後のアイコンの位置を選択します。
- 配置：カスタムFacebookのようなボタンの配置を選択します。
- ホバースタイル：ボタンにホバー効果を与えます。
ここでは、ボタンのクラスとIDの選択などの他のいくつかのオプションが表示されます。 これらは変更する必要はありません。
コンテンツをカスタマイズした後、ボタンのスタイルに変更を加える必要があります。 ここでは、ボタンに次の変更を加えました。
- パディング：パディングを-1に設定します。 ボタンのサイズに合わせて調整できます。
- タイポグラフィ：このセクションでは、ボタンテキストのタイポグラフィを変更するためのオプションが表示されます。 ここから、ファミリ、サイズ、重量、変換、スタイル、装飾、線の高さなどを選択します。
上記の調整後、次のように変更します。
- 境界線の種類：カスタムFacebookボタンを作成するには、実線の境界線の種類を選択します。
- 幅：ボタンの境界線の幅を入力します。
- 色：ここから境界線の色を追加します。
- 境界線の半径：ボタンの境界線の半径を選択します。
最後に、ボタンアイコンのフォントサイズとパディングを選択し、更新/公開ボタンをクリックします。
すべての編集を更新した後、カスタムFacebookのようなボタンの最終的な外観は次のようになります。
カスタムFacebookのようなボタンを作成する
Facebookのようなカスタムボタンをサイトに追加して、サイトのコンバージョン率、訪問者、エンゲージメントを高めます。 これは、訪問者がFacebookでコンテンツを高く評価して共有するのに役立ちます。 Facebookは最も使用されているソーシャルメディアプラットフォームの1つであるため、Facebookでコンテンツを宣伝すると素晴らしい結果が得られます。
このブログでは、 ElementsKitを使用してカスタマイズされたFacebookのようなボタンを追加する最も初心者に優しいプロセスを紹介しました。 上記の手順に従うことで、サイトのパフォーマンスも向上させることができます。 さらに、これをすべて1つのアドオンで使用して、FacebookフィードをWordPressサイトに追加することもできます。 それで、ElementsKitであなたのウェブサイトのコンバージョン率を上げ始めてください。