SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

Facebookいいね!ブロック

Facebook Likeブロックを使用すると、SeedProdページにFacebookの「いいね!」ボタンを追加でき、訪問者はコンテンツに感謝の意を示し、Facebookネットワークと共有するための簡単な方法を得られます。

柔軟なレイアウトオプション、サイズコントロール、および任意のURLをターゲットにする機能により、Facebook Likeブロックは、ランディングページ、近日公開ページ、またはその他のSeedProdで構築されたページから直接ソーシャルエンゲージメントを高める簡単な方法です。

Facebookいいねブロックの例

要件: Facebook Likeブロックは、すべてのライセンスプランで利用可能です。いいね!ボタンが正しく機能するには、ページ設定またはSeedProd > 設定FacebookアプリIDを設定する必要があります。


Facebook Likeブロックをページに追加する

次の手順に従って、SeedProdページにFacebook Likeブロックを追加します。

ステップ1:ブロックを追加する

デザイン > ブロックの下で、目的のセクションにFacebook Likeブロックをドラッグアンドドロップします。

FacebookいいねブロックをSeedProdページにドラッグ

ステップ2:コンテンツ設定を構成する

追加したら、Facebook Likeブロックをクリックして設定を開きます。コンテンツタブで、いいね!ボタンの表示方法とターゲットとするURLを構成します。

Facebook設定:

  • FacebookアプリID:接続されているFacebookアプリを表示します。まだアプリIDが設定されていない場合は、ページ設定で設定するように促されます。接続されると、別のアプリに切り替えるためのアプリを変更オプションが表示されます。
  • レイアウト:いいね!ボタンの表示方法を選択します—標準(ソーシャルカウントとオプションのプロフィール写真付きのいいね!ボタン)、ボタン(カウントなしのシンプルないいね!ボタン)、ボタンカウント(インラインカウント付きのいいね!ボタン)、またはボックスカウント(上にカウントが表示されたいいね!ボタン)。
  • サイズ:いいね!ボタンのサイズを設定します—または
  • 共有ボタン:いいね!ボタンの横にFacebook共有ボタンを追加するにはオンに切り替えます。これにより、訪問者はコンテンツを拡散するための追加の方法を得られます。
  • ターゲットURL:いいね!ボタンに関連付けるURLを選択します—ブロックが配置されているページを使用するには現在のページ、または別のURLを指定するにはカスタム
  • リンク(ターゲットURLがカスタムに設定されている場合に表示):訪問者がボタンをクリックしたときにいいね!してほしい特定のURLを入力します。
  • URL形式(ターゲットURLが現在のページに設定されている場合に表示):現在のページURLがFacebookに渡される方法の形式として、プレーンパーマリンクまたはプリティパーマリンクを選択します。
  • 配置:いいね!ボタンの水平方向の配置を設定します—左、中央、または右。
Facebookいいねブロックのコンテンツ設定

ステップ3:デザインをカスタマイズする

高度な設定タブで、Facebook Likeブロックの間隔と表示を調整できます。

間隔:

  • マージン: Facebookいいねブロックの外側の余白(上、右、下、左)を制御します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
  • パディング: Facebookいいねブロックの内側の余白(上、右、下、左)を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。

属性:

  • CSS ID: SeedProdがカスタムスタイリングまたはJavaScriptターゲティングのために自動生成したFacebookいいねブロックの一意の識別子を表示します。
  • カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
  • カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。

デバイス表示:

  • デスクトップで非表示: デスクトップ画面でFacebookいいねブロックを非表示にします。
  • タブレットで非表示: タブレットデバイスでFacebookいいねブロックを非表示にします。
  • モバイルで非表示: モバイルデバイスでFacebookいいねブロックを非表示にします。

アニメーション効果:

  • 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、Facebookいいねブロックが表示領域に入ったときに再生されるアニメーション効果を選択します。
Facebookいいねブロックの詳細設定

ステップ4:変更を保存

Facebookいいねブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。


Facebookいいねブロックをページに追加しました!このブロックを使用すると、訪問者はサイトを離れることなくFacebookでコンテンツに「いいね!」を促すことができます。いいねボタンがすべての訪問者に対して正しく読み込まれ、機能するように、FacebookアプリIDが設定されていることを確認してください。

関連記事