Tuesday’s Tip: Add Facebook comments to your Infusionsoft web forms

Adding Facebook comments to your web form can increase your conversions dramatically. For example, you might have a web form to sign people up for a webinar. Having a Facebook comment box gives your visitors the chance to leave positive comments about past webinars they’ve attended, or to express their excitement over the upcoming webinar. This social proof can provide the extra push that some visitors need to convince them to provide their personal information.

Unfortunately, you can’t just copy and paste the Facebook comments code into your web form. Infusionsoft sanitizes any HTML or JavaScript that you put on a web form, rendering the pasted code useless. Luckily for you we’ve come up with a workaround.

The first step is to create a Facebook app if you don’t already have one. It is common to name the app after your business or organization. For example, our app is named Novak Solutions. You’ll also need to go to settings and add a platform. Choose website. Enter your organization’s domain name for the site URL, and your Infusionsoft app URL for the mobile site URL. Then add both domains to the App Domains box. Click Save Changes. This will give you permission to use Facebook comments on your website and on hosted web forms. Finally, go to the Status & Review page and click the button to make your app available to the public.

Next, we need to add some code to our web form. Add an HTML snippet with the following contents:

<script src="//s3.amazonaws.com/novaksolutions/free/facebook-comments.js"></script>
<script>
jQuery(document).ready(function(){
    addFacebookComments('277515279073217', 'https://joey.infusionsoft.com/app/form/fa967baed77e42caecdf30e7c389a92d', 5, 'light');
});
</script>

There are a few parameters:

  1. 277515279073217 — Replace this with your own Facebook app ID.
  2. https://joey.infusionsoft.com/app/form/fa967baed77e42caecdf30e7c389a92d — Replace this with the URL of your web form.
  3. 5 — The number of comments to show by default. Has to be at least 1.
  4. light — The color scheme to use. Can be “light” or “dark”.

This code will load all the necessary Facebook code from an external JavaScript file. It also dynamically creates the HTML tags needed for the Facebook comments box.

facebook-comments

You can see an example of this code in action on our demo web form.

Have an idea for a tip? Let us know in the comments!

2 Comments

  1. Thanks for sharing Jacob. I’ve just tried doing this but I had a problem. I placed the html code snippet at the end of my form, but for some reason the comment box is showing at the top as well as the bottom. Any ideas why I’m seeing it twice?

    Reply
    • Clive, could you send me a link to your web form that you are testing this on? You can email me direct at jacob@novaksolutions.com if you don’t want to post as a comment.

      Reply

Leave a Reply