Adding Facebook Plugins is Easy with Catalyst

[surfjam]

Thought I'd take a second to share how easy it is to add Facebook plugins to your site with Catalyst.

I just completed a quick little revamp of my website and part of the update was to add a sidebar and a Facebook Like Box plugin to promote my corresponding Facebook page. I may technically be riding on the Facebook bandwagon but it's more like I'm sitting by the edge with my feet hanging off and ready to jump at the next opportunity. For this reason I am a little slow to fully take advantage of their promotional resources, even the ones we should all be using because they are, well... effective.

• To start off with, I went to Facebooks plugin page and created a Like Box for my I'm Not Marvin Facebook page. There's a few other types of plugins available and the same basic principles apply to don't feel you are limited to the Like Box.
• I used their Like Box builder tool to create the Like Box exactly how I wanted it, then, in the pop up that shows UP after clicking "Get Code," I selected iFrame for the type of code I wanted. If you have more than Facebook page, make sure the drop-down selector is set to the correct page so the page ID Facebook inserts into the code will be correct.
• Next, just copy and paste this code into a Catalyst Text | PHP widget that you've put in the correct widget area. That's literally all you have to do.
• Now if you're wondering how I added a custom border with border radius and a little bit of opacity to mine, when Facebook doesn't let you have this much control, that was easy too.
• It started when I created the Like Box because here I set it to have a white border.
• Then, in my Catalyst Text | PHP widget, I added a DIV tag (<div> </div>) around the iFrame code I pasted from Facebook. I gave this DIV an ID so I could easily add my own CSS styling to it. The rest was just a matter of trial and error until I found the exact positioning of the Like Box and other styling to meet my needs.

Viola!

BTW - If you "Like" my Facebook page you will get my occasionally sent blog posts directly in your news feed.

If you have more questions or would like additional help just let me know!

[moserw]

Hi,

Any pointers on where to include the JavaScript SDK? I'm not too sure it goes in the Core Options > Scripts.

I'd prefer not to hack header.php.

[surfjam]

Hi,

Any pointers on where to include the JavaScript SDK? I'm not too sure it goes in the Core Options > Scripts.

I'd prefer not to hack header.php.

Either there or add it to the footer on the same page. Footer is probably the more preferred method for scripts in general. Another option is to use the iFrame version of the Facebook plugin then you don't need to add anything.

[moserw]

Either there or add it to the footer on the same page. Footer is probably the more preferred method for scripts in general. Another option is to use the iFrame version of the Facebook plugin then you don't need to add anything.

Thanks for the heads up. Going with Footer.

[lesurel]

I thought it should be that easy, too. But when I added it to my site it gives me a "login to Facebook" box instead of the feed. Any ideas on what might be going on? I don't think this is a Catalyst issue because it is also happening on one of my older html/css sites, but was hoping someone would tell me it's an easy fix.

fb-likebox-screenshot.png

[moserw]

Either you have the wrong page feed or else there are no updates on the page yet.

You need to enter your fanpage URL when customizing the widget box so you might want to double check the fanpage URL is correct.