ソーシャルプラグイン

グループプラグイン

グループプラグインを使うと、ウェブページのリンクから自分のFacebookグループにアクセスしてもらうことができます。

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

ウェブ用のグループのプラグインは、クリックするとFacebookグループにリダイレクトする[グループにアクセス]ボタンをウェブページに追加するプラグインです。このプラグインでは、JavaScript用Facebook SDKを使ってウェブページにボタンを表示します。

開始する前に

グループのプラグインをウェブページに埋め込むには、以下が必要です。

制限

  • ウェブ用のグループのプラグインは、ウェブページでのみ使用できます

コードを取得する

[アクセス]ボタンのコードを取得して、ウェブページに埋め込むには、コード設定ツールを使用します。

ステップ1. URLを、FacebookグループのURLに置き換えます。

ステップ2. [グループにアクセス]ボタンのピクセル幅を変更します。

ステップ3. ボタンコードに追加情報を含める場合は、メタデータを追加します。

ステップ4. [コードを取得]をクリックします。

コード設定ツール

There is something wrong with the configurator

ステップ5. HTMLコードスニペットをコピーして、ウェブページのボタンを表示する場所に貼り付けます。

プラグインの属性

ウェブ用のグループのプラグインで利用可能なすべての設定を、以下に示します。

属性説明

data-href

FacebookグループのURL

data-show-metadata

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

data-lazy

trueまたはfalse (デフォルト)。trueに設定すると、プラグインが表示されない場合(プラグインがビューポートの近くにないなど)、ブラウザーはプラグインをレンダリングしません

data-width

プラグインの幅(ピクセル単位)。デフォルトは280です。最小幅は180、最大幅は500です

data-skin

プラグインコンテンツのカラーテーマ。サポートされているオプションは以下のとおりです。

  • light: プラグインは暗いテキストで表示されます(デフォルト)
  • dark: プラグインは白いテキストで表示されます

コードの例

コード設定ツールを使用したくない場合は、以下のコードをコピーしてウェブページに貼り付けてください。次の値を実際の値に置き換えてください。

  • js.src URLのLATEST-API-VERSIONを、アプリで使用しているグラフAPIのバージョンに置き換えてください
  • js.src URLのAPP-IDを、アプリのMetaアプリIDに置き換えてください
  • data-hrefについては、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=LATEST-API-VERSION&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-metadata="false">
    </div>

</body>

</html>

参考情報