Unbounce Answers/Next Steps/Social Media & Other Widgets

How to add a Facebook widget using Facebook's iframe Code

Oli Gardner
posted this on October 21, 2010 05:50 pm

Adding a Facebook widget to your landing page is simple. Just follow these steps:

  1. First you need to get the widget scripts from this page. Or you can get the Share button code here.
  2. On your landing page click the "page section" or area on the page where you'd like to place the button (you'll see the page section highlighted by a dashed line)
  3. Click the Custom HTML button in the editor toolbar
custom_HTML.png
  1. Paste the script into the window and click "done"
  2. Stretch the Custom HTML to be the correct size for your button (you can see the height and width it should be if you look at the code you pasted in)
  3. Save your page
  4. Click "Preview" to see it in action. It won't show up in the editor, just preview mode and the final published page.
 

Comments

User photo
r k

Both xfbml and iframe versions work alike? Which one would you recommend using?

May 01, 2011 10:51 pm
User photo
Oli Gardner
Unbounce

I personally go with the iframe version.

May 03, 2011 01:37 pm
User photo
Scott Wormington

Thanks for sharing the Facebook widget implementation. A couple of additional (related) questions

  1. The Facebook Send button and additional functionality - The iFrame implementation of the Like button is obviously the easiest. But the XFBML implementation offers some added functionality (the Send button, ability to add comments to Likes, flyouts etc..). This implementation requires the Facebook Javascript SDK, which can easily be added (using Scripts). But in order to use XFBML on the page you must add the XML namespace attribute to the root <html> element. Is this even possible within Unbounce?
  2. Facebook Open Graph Tags - These are custom meta tags that can be added to the page, which I don't believe Unbounce has the functionality to define. If there is this functionality than how can it be achieved? If there isn't...would you consider adding it as a feature request?

Thanks for your help!

June 10, 2011 06:24 am
User photo
Oli Gardner
Unbounce

Hi Scott,

1. No, you're right, you can't do that right now.

2. Again, not currently (first request for this) - at some point in the future (can't really give an accurate timeline) we will be digging deeper into adding more social media features. The best way to get it added as a feature request is to jump over to Get Satisfaction and "Share an Idea" - http://getsatisfaction.com/unbounce

June 10, 2011 02:17 pm
User photo
Scott Wormington

Thanks Oli...I appreciate your insights.

June 13, 2011 08:36 am
User photo
Sebastien Fouillade

For others trying, step #6 is important (i.e. saving your page). Took me a while to figure out why it wasn't showing up.

June 19, 2011 02:36 pm
User photo
Chris Murphy

Oli, is there any workaround to make sure facebook doesnt pull a random image off the page?  I now have facebook pulling an image of a number off of my page, which isn't very useful.

 

Thanks!

September 12, 2011 01:08 pm
User photo
Oli Gardner
Unbounce

Not that I'm aware of Chris. Facebook is a bit annoying about how it handles this now (you used to be able to choose prior to it being shared).

One possible technique would be to add the image you want to be shown to your landing page "first" when constructing the page - so that it's closer to the top in the produced code. Obviously this wouldn't help an existing page.

September 12, 2011 02:01 pm
User photo
Yann Dautais

Hi,

Is there a plan to implement the XML namespace attribute to the root <html> in the coming future?

The Send/Like button we have added to our landing page does not work on IE9 otherwise (on IE7 it does, weird). This is a problem for us given the market share of IE...

Thanks,

Yann

September 13, 2011 08:20 am
User photo
Julian Leach

Hi.  I managed to get Facebook comments working on an unbounce page, which is great.  2 challenges I'm hoping someone can help me with:

(1) I can't moderate the comments.  A bit of google searching has identified that I need to add this code to the page:

<meta property=”fb:app_id” content=”{YOUR ID HERE}”/>

But I don't know where/how to do this, or even if I can using unbounce.

(2) The width of my FB comments box matches the width of the custom HTML box I created on the page so formatting is all good when there are a few comments only.  But whatever height I choose for the custom HTML box, when I get enough comments to exceed that length it just cuts off.  Is there a way to make this scroll, or for the page to extend, or for there to be multiple page tabs of comments.  Anything better than it just cutting off in the middle?

Thanks!

November 03, 2011 02:26 am
User photo
Ryan Engley
Unbounce

Hi Julian - glad to hear that you've been able to get your Facebook app working

To address your questions:

1) You can add extra meta data to your page using the JS Scripts dialog box.  For placement, choose 'head' and then just paste in your code.

2) This question is a bit trickier.  Because the object is embedded as in iframe, Unbounce sets the allowable height of the object based on the height of the grey placeholder box.  So you can either:
- make your placeholder box really tall to accomodate a ton of comments or
- revisit the Facebook app page at https://developers.facebook.com/docs/reference/plugins/comments/&nb... modify your code to limit the allowed number of displayed posts.  This should prevent the height of your widget from getting out of hand.

November 03, 2011 11:16 am
User photo
Julian Leach

Great, thanks!

November 03, 2011 02:49 pm
User photo
Jay Dias

How can I add my own title and description for the facebook like?

In the preview it is showing me unbounce's logo and after publishing it is showing my logo, which I put in meta configuration. But getting to post my own title and description using meta tags is a must! Especially when I am using a site like unbounce to get people to sign up or market my services. Showing them the ugly http url is not going help in conversions!!!

December 24, 2011 10:42 pm
User photo
Juri Totaro

Hi,

I'm getting struggled I added all meta of Facebook (og:title, og:description, ecc....) in Scirpts under "head" but when people share the contest on facebook they get an ugly url and the first image of the page. I think I used them correctly but I guess the issue happens because I can't add XML namespace attribute to the root <html>, RIGHT?

If so it's a huge problem because it has a significant impact on the conversion....please advice as soon as you can!

 

Thanks for your help....

 

Juri

 

June 09, 2012 09:48 am
Add a comment