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:

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

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.

AttributeDescription

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>

See Also