Unbounce Answers/FAQ/Third Party - Social Media

How do I add a Facebook widget using Facebook's JavaScript SDK?

Ryan Engley
posted this on October 19, 2011 01:30 PM

NOTE: these instructions are for adding Facebook widgets using the Facebook JavaScript SDK and HTML5 code . If your widget can use of Facebook's iframe code, you can read this Get Satisfaction thread for an easier embed process

To add a Facebook widget such as a log-in or send button, you will need to complete two main steps:


Step A – Create an App ID for your Widget

The first step is to visit https://developers.facebook.com/apps to register a new Facebook widget and get a unique App ID.

Follow these steps to create your Facebook widget's App ID:

  1. Visit https://developers.facebook.com/apps
  2. Click Apps > Create New App and follow the instructions in the dialog box

    Create_new_app.png 
  3. Once you complete those steps, you should be forwarded to the overview screen for the app you just created.  Make note of your unique App ID as you will need it for the following step

    facebook_app_id.png 

You’re now ready to create the code for your widget!


Step B – Create the Code for your Widget and Embed it on your Landing Page

Next, you'll customize and generate the code for your widget.

  1. Visit https://developers.facebook.com/docs/plugins/ and choose the widget you want to use.  This will bring you to an overview page for that widget.
  2. Customize the widget using the provided interface and click 'Get Code' when you have finished making your tweaks.  This will open a dialog box.
  3. The dialog box will show you two pieces of code:
    1. The JavaScript SDK that runs the widget and
    2. The code for your plugin that displays the widget on your page 
      widget_code.png
  4. Copy the JavaScript that runs the widget and paste it onto your Unbounce landing page by clicking the Javascripts button in the bottom left of the editor.  This will open the javaScript dialog box.

    For Name type 'Facebook Widget', for Placement choose 'After Body Tag'.  Then paste in the script and replace the field APP_ID with your App ID from Step A. 

    widget_JS_scripts.png 
  5. Next, copy the plugin code that displays your widget and paste it onto your Unbounce landing page as a custom HTML component.  To do this, drag the the Custom HTML widget onto your page and paste the code into the dialog box.  Click 'Done. You can then position and resize the placeholder box on your page as need be.
That's it!  You are now ready to save, preview, and ultimately publish your page.

 

Comments

User photo
Chirag Patel

What does this widget do exactly? I'm looking to either (1) post on a wall or (2) send a Facebook message to one of the user's contacts. Any tips on how to do that?

February 23, 2012 05:20 PM
User photo
Matthias Förster

This doesn't work for me. I ve followed exactly this description and in the unbound preview I see my Facebook widgets correctly but after publishing the page its away and just blank.

April 18, 2012 05:50 AM
User photo
Terry Middleton

Unbounce - how can we add comments like this one here on this page to our landing pages?

September 30, 2012 08:51 AM
User photo
Ryan Engley
Unbounce

Hi Terry - the comments section here is provide through a different service (our help system isn't built in Unbounce.)  If you track down a comments widget, you should be able to embed it on your page by following these steps.  Once example is Facebook's comments widget.

I should mention though that while features like this are supported by Unbounce, the solution might not be as elegant as if you used a service focused on comment forums. 

October 04, 2012 10:27 AM