Add Facebook Feed to a Website

FB Like boxWith the holidays, it’s been a while since I posted. Good to be back!

My last post was about how to put a news feed (RSS) onto your organization’s Facebook fan page.  You can also very easily put a box on your website that shows the posts from your Facebook Fan page.  It’s called a “Facebook Like Box”.

To install this box, you will need to be an administrator on your FB page, as well as have access to the “backend” of your website.

To generate the code you will need, go to your FB page, and under the picture in the upper left corner, click on “edit page”.   On the page that pops up, in the left side menu, choose “Marketing”, and then “Add a Like Box to your Website”.  (You can also just click here.)  In the dialogue boxes, put the required information.  As you enter the info, the application changes to show how your box will look.

To get the URL (web address) of your FB Fan Page, go to your page, then refresh the page once to remove leftover tracking code, then copy the entire URL (including “http://www.”).

You might not know exactly how wide you want your box to be, so pick a ballpark number, knowing that you might have to come back a couple of times to refine the size.  Just for reference, the post box in this blog is 490 pixels wide.  Start small (say 300) and work your way up.

There are a few other choices there– click and unclick them to see what they will look like.  When you have your box looking like you’d like it, click on “Get Code”.  A box pops up with two sets of codes– use the “iframe” code.

Copy this code to your clipboard.  Then navigate to the edit function of the page you’d like it to appear on.  You will embed this code differently depending on what content management system or website builder you are using.  You may have to search in the support area to see how to do this.  Hint: Google calendars use the same iframe ebedding, so you might search for “Google calendar embed”.

I use mostly WordPress sites with my clients.  In WordPress, you’ll need to enter the code in the HTML editor in the placement on the page that you want it.  It may take a little guesswork, but you can usually figure this out.  WARNING: iframe codes do not “like” switching between the HTML & the Visual editors in WordPress and this will cause errors, so make sure that you don’t need to go back to visual editor before you embed the iframe.  (If you accidentally go back to the Visual editor, don’t panic. When errors display, go back to HTML editor, remove the iframe code, save the page/post again, fix any problems in visual if needed, then generate the iframe code and start again.

You won’t want to create a round-robin of updates between FB & your site, so decide if it makes more sense for your organization to put news feed posts from your site onto FB, OR your FB updates in a Like Box on your website.  I’d love to hear from you in the comments: does your organization send FB posts to your site? Or a news feed from your website to your FB Page?

6 Responses to Add Facebook Feed to a Website

  • share says:

    You can not imagine the time ive been googling for this. Through seven pages of Askjeeve results without finding anything at all. 1 search on Msn. There this is… Have to begin to use this more often

  • Thank you for the info. WIll be using it this week to get the FB Feeds up and running. TY Jeanine

  • Bet Hannon says:

    Hi Jeanine! Glad this post was helpful! Let me know how it goes for you. FB seems to be changing some of this stuff– let me know if I need to update this post!

  • Bill Horvath says:

    Works great, but for some reason, 1/2 of the posts that show up in the feed are getting cut off on the right side. Not all, just some. Any idea what might cause that? You’d think all of them would be cut off or none. But some…? Weird.

  • Bet Hannon says:

    Hi Bill! You’re right you should be getting either all or none of them cut off. Curious…. Have you tried starting over, generating the code fresh in FB? Perhaps there was a code error the first time around that is causing this.

  • Marie says:

    You have no idea how long I have wasted searching for ‘facebook feeds on your website’ ect ect and reading tutorials that just didn’t work. Your explanation is fantastic and worked first time for me, thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Constant Contact

Constant Contact

Resources

Christian churches may be interested in the resource Spiritual Formation Newsletter Content, and online resource that makes available short articles on spiritual formation appropriate for email newsletters.