Group Plugin

The Group Plugins lets people visit your Facebook group from a link in a web page.

Group Plugin for Web

The Group Plugin for the Web is a plugin that adds a Visit Group button to your web page that when clicked redirects a person to your Facebook Group. The plugin uses the Facebook SDK for JavaScript, to display a button on your web page.

Before You Start

To embed the Group Plugin on a webpage, you will need:

The URL for your Facebook Group
To register your web app with Meta with Basic Settings
Set the platform for your app to Website
App Review – When you want the plugin to be available for visitors to your webpage as well as people who have a role on your app, such as developer or tester, your app will need to be approved during App Review
Release your app

Limitations

The Group Plugin for Web can only be used on a webpage

Get the Code

To get the code for the Visit Button to embed in your webpage you will use the Code Configurator.

Step 1. Replace the URL with your URL for the Facebook Group .

Step 2. Update the pixel width for the Visit Group button.

Step 3. Add metadata if you would like to include additional information in the button code.

Step 4. Click Get Code.

Code Configurator

URL of group

The pixel width of the plugin

Include Metadata

Get Code

Step 5. Copy and Paste the HTML code snippet into the web page where you want the button to appear.

Plugin Attributes

The following are all the settings available for the Group Plugin for Web.

Attribute	Description
`data-href`	The URL of the Facebook Group
`data-show-metadata`	Show metadata about the Facebook Group, such as the description
`data-lazy`	`true` or `false`, the default. When set to `true` the browser will not render the plugin if the plugin might never be seen such as if the plugin is not close to the viewport
`data-width`	The width of plugin, in pixels. 280 is the default. The minimum width is 180 and the maximum width is 500
`data-skin`	The color theme for the plugin content. The following options are supported: `light`: Plugin renders with dark text, the default `dark`: Plugin renders with white text

Code Example

If you do not want to use the code configurator, you can copy and paste the following code into your webpage. Replace the following with your values:

In the js.src URL, replace LATEST-API-VERSION with the Graph API version your app is using
In the js.src URL, replace APP-ID with your app's Meta App ID
For data-href, replace GROUP-URL with the URL for your Facebook Group

<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>