グループプラグイン

グループプラグインを使うと、メールメッセージやウェブページのリンクから、利用者にFacebookグループに参加してもらえます。

メールウェブ

メール用グループプラグイン

メール用グループプラグインを使うと、メールの受信者はメッセージからグループに参加することができます。メールサービスプロバイダーへのメッセージに追加するコードを生成すると、メールの受信者にはボタンが付いたメッセージが送信されます。

  • このコードは、メールキャンペーンソフトウェアでのみ使用してください。提供されるコードをメールクライアントのメッセージでは使用しないでください。
  • このコードはウェブページでは使用しないでください。

手順

次の手順を実施してプラグインのコードを取得します。

1. メールプラグインを選択する

グループページを開いて、[招待の埋め込み]を選択します。

メッセージに追加するコードを表示するウィンドウが開きます。

2. メールキャンペーンソフトウェアにコードをコピーする

メールキャンペーンソフトウェアのメッセージにコードをコピーします。

プラグインのコードを変更しないでください。

3. プラグインをテストする

メッセージを自分宛てに送信してプラグインをテストします。メッセージを受信したこととメッセージからグループに参加できることが確認できたら、キャンペーンを開始できます。

ウェブ用グループプラグイン

ウェブ用グループプラグインは、ウェブページに誰もがFacebookグループに参加できるようにするボタンを追加するプラグインです。このプラグインでは、JavaScript用Facebook SDKを使ってウェブページにボタンを表示します。このボタンを選択した利用者は、グループに参加します。

このプラグインのコードは、メールメッセージやメールキャンペーンソフトウェアでは使用しないでください。

このプラグインを使用するには、次の条件を満たす必要があります。

  • ステータスが実動で、一般公開されているFacebookアプリのアプリIDを持っていること。アプリのステータスがライブになっているかどうかは、アプリダッシュボード[アプリレビュー]タブで確認できます。FacebookアプリIDが必要な場合は、こちらのボタンを選択して作成できます。
新しいFacebookアプリを作成する

  • すでにFacebookグループが存在している必要があります。
コード設定ツールコードの例設定

手順

次の手順を実施してプラグインをウェブページに追加します。

1. Facebookアプリの設定を行う

  • アプリダッシュボード[設定] > [ベーシック]で、[+プラットフォームを追加]を選択します。[プラットフォームを選択]で、[ウェブサイト]を選択します。
  • [ウェブサイト][サイトURL]にプラグインを表示するURLを入力します。
  • [アプリのドメイン]にウェブサイトのドメイン名を入力します。
  • ウィンドウの右側にある[変更を保存]を選択します。

2. プラグインのコードを取得する

下の参加ボタン用コード設定ツールが、ウェブページに追加するプラグインに必要なコードを生成します。[グループのURL]にグループのURLを入力して、プラグインボタンのwidthなどの設定を調整します。[コードを取得]を選択して、ウェブページにコピーできるコードを生成します。

参加ボタン用コード設定ツール
グループのURL
プラグインのピクセル幅

2. HTMLスニペットをコピーして貼り付ける

参加ボタン用コード設定ツールからスニペットをコピーして、ボタンを表示するウェブページに貼り付けます。

詳細なコードの例

コードの例をコピーしてウェブページに貼り付けます。<APP_ID>をFacebookアプリのアプリIDに変更し、<group_URL>をFacebookグループのURLに変更します。

<html>

<head>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=<APP_ID>&autoLogAppEvents=1';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
</head>

<body>

    <!--Your Group Plugin for the Web code-->
    <div class="fb-group" 
         data-href="<group_URL>" 
         data-width="280" 
         data-show-social-context="true" 
         data-show-metadata="false">
    </div>

</body>

</html>

設定

このプラグインの設定は、以下のとおりです。

属性 説明 デフォルト

data-show-social-context

グループのメンバーである友達の数を表示します。

TRUE

data-href

グループの絶対URLであること。

なし

data-show-metadata

説明などグループに関するその他のメタデータを表示します。

FALSE

data-lazy

trueを指定すると、loading="lazy" iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。trueまたはfalse (デフォルト)のいずれかを指定できます。

FALSE

data-width

プラグインの幅(単位: ピクセル)を設定します。最小幅は180ピクセル、最大幅は500ピクセルです。

280

data-skin

任意。プラグインコンテンツの配色テーマを設定します。サポートされているオプションは以下のとおりです。

  • light: プラグインは暗いテキストで表示されます。
  • dark: プラグインは白のテキストで表示されます。

light

関連記事

よくある質問(ソーシャルプラグイン)ウェブ管理者向けシェア機能JavaScript用Facebook SDK