Unbounce Answers/Next Steps/Social Media & Other Widgets
How to 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
- Step B - Create the code for your widget and embed the javascript SDK/plugin code on your landing page
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:
- Visit https://developers.facebook.com/apps
- Click Apps > Create New App and follow the instructions in the dialog box
- 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
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.
- 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.
- Customize the widget using the provided interface and click 'Get Code' when you have finished making your tweaks. This will open a dialog box.
- The dialog box will show you two pieces of code:
- The Javascript SDK that runs the widget and
- The code for your plugin that displays the widget on your page
- 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.
- 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.
You can also use Unbounce to create a Facebook fan page
Comments
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?
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.
Unbounce - how can we add comments like this one here on this page to our landing pages?
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.