How to Create Facebook Widgets

Widgets are bits of interactive HTML code that gather certain information from designated websites so you don't have to continually check each website for new posts. Pre-scripted widgets are available for Facebook and require no knowledge of HTML coding, but if you want custom widgets and you have some experience with HTML, you can create Widgets and post them to your Facebook site.

Difficulty: Moderately Challenging

Instructions

1. Choose an online widget editor like Widgetbox to use in creating the widget. The widgets it creates need to be compatible with Facebook. Widgetbox is free and the widgets made there are compatible with Facebook.

2. Log in to the Widgetbox site. Click the "Make a Widget" link at the bottom of the page.

3. Select the type of content you want to use for the Facebook widget. Choices are "Flash," "HTML/JS," "Web Page," "Blog/Feed" and Gadget.

4. Enter a name for the Facebook widget if you are creating it from HTML code. For all other selections, enter the source URL for the content. Click "Continue."

5. Designate the width and height of the HTML Facebook widget in the boxes provided. Select a setting for the Widget from the "Insert Widget Setting" drop-down menu.

6. Insert a pre-coded "Snippet" code. Select either "Proxy Request" or "Links in New Window" from the "Snippet" drop-down menu. This inserts prewritten HTML code for either of these options.

7. Enter the HTML code in the box at the bottom half of the page. Click "Apply Changes." Preview the Facebook widget in the "Preview" box at the upper right of the screen.

8. Log in to Facebook.

9. Click on the "Developers" link in the fine print at the very bottom of the page. Select the "Get Started" link at the middle left of the Developer page.

10. Add the developer application to your Facebook profile by clicking the link "Add Facebook Developer Application." Click on the "Feed Profile Console" tab.

11. Plug your widget code into the console for posting to your Facebook site.

Tips & Warnings

• You need a working knowledge of HTML coding to customize a widget for a Facebook page.

[scottmitzi]

on 9/30/2009 Hope this works with the widget on the profile page. Thanks for getting me to the FB developer page ... pretty neat!

[agent311]

on 9/21/2009 excellent advice but FB did change the layout...any hope you'll update this for rookies like me?

[hiptoknit]

on 8/15/2009 great...thanks!

[novalove]

on 4/1/2009 I wasn't so lucky with steps 9, 10 and 11. Maybe I'm just too tech-nophobic...someone said the facebook layout was recently changed. Not sure. Help!

[elyria]

on 3/14/2009 Good instructions! 5*