Elementor Pro『 Facebookボタン』ウィジェットの使い方

『Facebookボタン』とはその名の通り、Facebookの投稿とサイト内の記事などをリンクすることのできるボタンです。
FacebookボタンウィジェットはElementor Proのみに搭載されたウィジェットです。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor Pro『 Facebookボタン』ウィジェットの使い方Elementor Pro『 Facebookボタン』ウィジェットの使い方

Facebookボタンウィジェットの挿入

Facebookボタンウィジェットの挿入

『Facebookボタン』ウィジェットをドラッグ&ドロップでカラムに挿入します。

ウィジェット挿入後の表示画面

こちらはFacebookボタンウィジェット挿入後の表示画面です。
Facebookボタンウィジェットに関しては『スタイル』の編集タブは存在しません。

Facebook App IDをサイトに紐付けする

Facebook App IDをサイトにリンクする方法・Integrations Settingsをクリック

サイト上でこのFacebookボタンウィジェットとFacebookをリンクさせるには、まずWordPress内の設定にFacebookのApp IDを入力し、サイトとFacebookを紐付けする作業をしなくてはなりません。

編集タブの一番上に『Set your Facebook App ID in the Integrations Settings』(連携設定でFacebook App IDを設定する)とありますので『Integrations Settings』をクリックします。

Integrations Settingsをクリックした後の表示画面

すると上記のElementorの『連携』の設定画面に切り替わりますので画面を下にスクロールしてください。

Facebook SDKのApp IDにFacebook App IDを入力

『Facebook SDK』という設定の項目の一つに『App ID』とありますのでそこに紐付けさせたいFacebookのApp IDを入力します。

『変更を保存』をクリック

Facebook App IDを入力したら、設定画面を一番下までスクロールさせ、『変更を保存』をクリックします。
これでサイトとFacekbookが連携し、Facebookボタンがアクティブになります。

Facebook App IDの取得方法はGoogle検索してください!

Facebook App ID取得方法はGoogle検索

タイプ

タイプの説明

『タイプ』はボタン及びボタン右側の文章のタイプを以下から選択することができます。

  • いいね(デフォルト):『Like』You like this.
  • Recommend:『Recommend』You Recommend this.
タイプ・いいね/Recommendのサンプル

これらの各ボタンはデフォルトですでにボタンを押した『いいね(Like)』または『おすすめ(Recommend)』した状態になっています。

各ボタンのチェックを解除した時の表示画面

ボタンをクリックすると上記画面のように、

  • 『Like』Be the first of your friends to like this.
  • 『Recommend』Be the first of your friends to recommend this.

という表示に変わります。

レイアウト

レイアウトの説明

『レイアウト』はボタンの見た目を以下より選択できます。

  • Standard(デフォルト)
  • ボタン
  • Button Count
  • Box Count
各レイアウトのサンプル表示

上記は各レイアウトのサンプル画像です。

サイズ

サイズの説明

『サイズ』はボタンのサイズを

  • 小(デフォルト)

から選択します。

Color Scheme

Color Schemeの説明

『Color Scheme』(カラースキーム)は

  • Light(デフォルト)
  • Dark

より選択します。
このColoe Schemeがどういうものかと言うと、背景色が明るい場合は『Light』を選択すればウィジェットの文字が暗めの色で表示され、背景色が暗い場合に『Dark』を選択すればウィジェトの文字が明るく表示されます。

Light

Color Scheme/Lightのサンプル表示

こちらはColor Schemeをどちらも『Light』に設定し、背景色のトーンをそれぞれ変更したものです。
暗い背景色でColor SchemeをLightに選択したものが『You like this.』の文字も暗くなるため見えづらいのがお分かり頂けると思います。

Dark

Color Scheme/Darkのサンプル表示

こちらはColor Schemeをどちらも『Dark』に設定し、背景色のトーンをそれぞれ変更したものです。
明るい背景色でColor Schemeを Darkに選択したものが『You like this.』の文字が背景と同化して見えづらいのがお分かり頂けると思います。

シェアボタン

シェアボタンの説明

『シェアボタン』は『Like』または『Recommend』ボタンの右側に『Share』と言うボタンを表示させるかさせないかの選択になります。
※デフォルトは『いいえ』に設定されています。

シェアボタンを『はい』とターゲットURL/URL Formatの関連性

またシェアボタンを有効にした場合、

  • ターゲットURL
  • URL Format

の設定も有効になります。

ターゲットURL

ターゲットURLの説明

『ターゲットURL』は

  • Current Page:現在のページ
  • カスタム:閲覧者を飛ばしたい特定のリンク先

からリンク先の選択ができます。

Current Page

閲覧者がサイト上の『Share』ボタンをクリックすると、その閲覧者のFacebook上でそのサイトがシェアされます。

カスタム

ターゲットURL/カスタムにした時の説明

『カスタム』を選択すると、編集タブに『リンク』とURL入力バーが表示されますので、シェアボタンを押したらリンクさせたいページのURLをこちらの入力します。

URL Format

URL Formatの説明

『URL Format』は シェアされた時にシェアした側に表示されるURLの仕様を以下より選択します。

  • Plain Permalink:そのままの通常のURLがシェアされます。( %,=,&,?など、沢山の記号が含まれとても長いURLになることもある)
  • Pretty Permalink:Facebook独自のドメインに変換され、短くなったURLがシェアされます。

Faces

 Facesの説明

『Faces』を『はい』に設定すると、サイト上のFacebookボタンで『Like(いいね)』した人の顔がボタンの右横に表示されます。
※デフォルトは『いいえ』に設定されています。


『Facebookボタン』ウィジェットをサイトに挿入するだけで気軽にFacebookと紐付けすることができるので、サイトや記事の拡散能力が更に上がります。

サイトをシェアしてくれた人のFacebookを通じてその友達の同系統の興味を持った人に拡散されれば宣伝の効率もより高まりますね。

また、Facebookを紐付けできるウィジェットが他にもいくつか存在します。


ぜひ、サイトの宣伝にFacebookボタンウィジェットを活用してみてはいかがでしょうか?

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通