The Group Plugins lets people visit your Facebook group from a link in a web page.
The Group Plugin for the Web is a plugin that adds a Visit Groupbutton 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.
To embed the Group Plugin on a webpage, you will need:
To get the code for the Visit Buttonto 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 Groupbutton.
Step 3.Add metadata if you would like to include additional information in the button code.
Step 4.Click Get Code.
Step 5.Copy and Paste the HTML code snippet into the web page where you want the button to appear.
The following are all the settings available for the Group Plugin for Web.
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 defaultdark
: Plugin renders with white textIf 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:
js.src
URL, replace LATEST-API-VERSION
with the Graph API version your app is usingjs.src
URL, replace APP-ID
with your app's Meta App IDdata-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>