Facebook Group Plugin For Websites – The Ultimate Guide

Have you heard about the newly released facebook group plugin?

The group plugins by facebook allows people to join your awesome facebook group by clicking a facebook native link on your web page or in an email message.

facebook group plugin

It’s a sort of way to promote your facebook group via two of the best marketing channels for any business – talk of website traffic and email marketing.

Without wasting time, let go right in…

Why Facebook Group Plugin Is Important For Any Business

If you remember early this year, January 11th, 2018 to be precise, Mark Zuckerberg announced that the facebook algorithm would start prioritizing content from friends and family over content from brands?

They started boosting postings from facebook groups and lowered the reach of pages.

This means that facebook group is more valuable than pages even though your business still need a facebook page for running ads or for connecting your facebook messenger chatbot.

 

If facebook is giving preference to group posts in news feeds, don’t you think you need to include that in your marketing funnel and leverage it to grow your business?

Now, the way facebook group plugin comes into limelight is in helping you get as many valuable members that you can promote your products & services to into your group directly from your email marketing list and your website.

Once they are in your closed group, you would be able to reach out to your audience via multiple channel and that’s going to increase your chance of getting more sales for your products and services.

How to set facebook group plugin on any type of website

Here at kankoz studio, we are trying our best to create tools that would help business owners (especially those who are non-techies) to grow and get more sales for their businesses.

We know that different businesses have different website setups and hence the need to create tools that would cover as many content management systems as possible.

Few days ago, we released a free facebook group plugin for wordpress websites and you can start using it immediately to invite your website visitors into your group. We have plans to create its magento, prestashop and drupal versions if there is a real need for them.

If you would like to use the facebook group plugin on your website that is built on top of any of the three above CMSs urgently, just send us a message via here.

In this article, let start to cover businesses that use html websites and then we would touch the wordpress facebook group plugin and finally we would discuss how to use the same plugin in promoting our group via email marketing.

The facebook group plugin for websites

This plugin make use of Facebook SDK for JavaScript to display a button on your web page(s). Once any of your users chooses this button, the user will request access and once access is granted (in a closed group), he/she would eventually join your group.

Now let learn how to add a facebook join button on html website. For the group plugin for the web to work on any type of website, you need these:

  1. Have a Facebook app ID
  2. A working facebook group in the standard format starting with https://
  3. You need to configure your facebook app to include your website url.
  4. Get the code snippet for the plugin (which you have to put on your website).

Have a Facebook App ID:

Here is a link to the dashboard of all the apps you have on your facebook account. If you’ve created a public app for your website before now, you don’t need to create another one. Just go over to your dashboard and copy out the app ID.

For those that don’t have an app ID? please click here to create one for your business. It’s 100% FREE.

Configuring The Settings for Your Facebook App

To configure the facebook app, you have to go open up your facebook developer appp and you must enter your site url in Dashboard => Settings => Basic => App domains & save changes at the right side of the bottom of the window after creating your app from above step or else it won’t work.

Get the code snippet for the plugin

You have to copy and paste the code snippet below into the web page where you want the plugin to show up while substituting your group url and app ID respectively.

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

Looking for an easier way to do this without touching a single line of code? please read till the end of this article.

If you look at this code closely, you will notice that the code should be divided into two sections as follows:

  • The one that would be added to the header section of your website which is what is shown below:
<!-- 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>

  • The one that would be added within the body tag of your site
<!--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>

but you need to make sure you change <APP_ID> to the app ID of the facebook app you created for your website and also substitute <group_URL> to the URL of your own facebook group.

More settings for the plugin

In order to customize this further, facebook has provided the following attributes and their corresponding values and well as the functions they perform (via the description).

Like for example, let me choose data-skin. It has two values light & dark respective in which light is the default. This means that if you want to darken the background of the facebook group plugin in the above code you need to add this code : data-skin = “dark” just below the code below:

data-show-metadata=”false”>

and so the plugin banner would look like this on your website:

How to add a facebook join button to wordpress websites

You’ve probably been thinking how do i link to my facebook group since I don’t know how to code? There is no cause for alarm.

In order to save time and make things easier for business owners to use the facebook group plugin on their wordpress websites, we’ve created a wordpress plugin to get that done with couple of clicks.

In addition to that, we’ve also written a step by step documentation about various ways to display the plugin banner within posts, pages, in the sidebar aka widget areas, and below posts.

We are also working on including more awesome features to this list. Just download the plugin, effect it on your website and always watch out for our updates on your wordpress website(s).

Steps I want you to take immediately:

  • Go over to wordpress.org to download the wordpress version of the facebook group plugin
  • Follow this documentation to configure and customize the plugin. No coding is required.
  • Enjoy using it and feel free to share it with other businesses.

How to add a facebook join button within email marketing software

In this section, let me take you through how to use the group plugin for email so that your email recipients would be able to join your facebook group via an email message.

Please follow the steps below to set it up:

Open up your group and choose Embed Invite.

Just copy the code to your email campaign software

After clicking the embed invitation button, you should get a pop up with some weird code as shown below. Please note that you are not expected to modify the code.

Facebook group invitation Embed New

Test your code

I expect that you’re going to test this code by sending a message to yourself in order to make sure that everything is working perfectly before sending it massively to the subscribers in your email list.

Your turn

In this article, I have shown you how to setup facebook group plugin for html and wordpress websites (with & without using any code). In addition to that, I also explained to you how to use the plugin within your email marketing software.

Are you going to implement this as part of your marketing activities? I would love to know your feedback. Please write your comment below and let me know what you think or how I can help.

Gracias.

Leave a Comment

Help-Desk