How to Create a Simple Facebook Feed on an HTML Website
Facebook Status/RSS Feed Tutorial
PLEASE NOTE! Several people have had difficulties getting this to work. As I state in my disclaimer below, I am not available to provide support on an individual basis, nor do I know why it worked for me and not for others. My guess is that Facebook has changed something… again (as usual). However, my example still works! So for those of you who are still interested in trying this, by all means give it a go! Others have gotten it to work, as seen in the last few comments. And apologies in advance if it doesn’t.
This tutorial will teach you how to place a Facebook Page’s wall status feed into an html web page using Feedburner. It’s very similar to how you would create an RSS feed for your blog. (This is not a tutorial on how to integrate a “Like Box” from Facebook, which in my opinion looks pretty clunky, and Facebook limits the amount of CSS customization since they host the CSS files themselves.) I’m not a programmer myself, but a basic knowledge of HTML and CSS is required to customize the look and feel of the feed, and an understanding of publishing html web pages is a must. The gist of this lesson is to get a Facebook Page wall’s status feed or simple RSS feed placed within a web page.
>> Click here for an example of the final.
I searched on and off for 3 days trying to figure out how to integrate a Facebook feed into a web page as a simple list, much like how you can integrate Twitter. It’s not near as easy as implementing a Twitter feed. Facebook’s documentation is really bad in my opinion, leading me to look elsewhere every time I want to create something in Facebook. I found one tutorial on Adding a Facebook news feed to a website and another tutorial on Adding a Facebook Status Feed to Your Website With PHP, yet both of these were beyond my understanding of programming. (I tried both ways, but could get neither to work!) I also found the article entitled Facebook RSS feed in which the author states, “Every Facebook page has an RSS feed. You can subscribe to that feed with your RSS reader.” (This article also explains how to get your page id from Facebook, in case this is what you are looking for.) But I was still lost and frustrated. I kept coming back to it, and finally after reading it the third or fourth time… a Eureka moment!
So for the simple web design folks out there—or any others who are looking for a different approach—I am trying to dumb it down just a bit more. I hope this lesson helps you! Let’s begin…
1) Establish your Facebook Page
If you are reading this tutorial, you probably already have a Facebook Page. Once your Facebook Page is established, grab the url of this “page” that you want to feed into your html layout, by copying the web address from your browser’s address bar. Only copy up until the end of your id numbers, and not any question marks or other characters after the end of the long list of numbers. For example, the full URL of my Facebook Page is “http://www.facebook.com/pages/MEDesignlab/132134083473766?sk=app_4949752878” but I would only copy this: “http://www.facebook.com/pages/MEDesignlab/132134083473766”
If you don’t already have a Facebook Page (previously referred to as a “Fan Page”), here’s a good tutorial and informational article on How to Create a Facebook Page for Your Business.
2) Create a Feedburner RSS feed
Once you have your Page URL, head over to Feedburner, which by the way, is now owned by Google. If you don’t have a Google account already, go ahead and create one. Otherwise, sign-in to Google and get started.
Find where it says, “Burn a feed right this instant” and paste your Facebook URL. (My comments are in red above) Then click the next button. Follow the appropriate steps in Feedburner to create your feed.
- Give your feed its title and feedburner.com address
- Click the “Next” button to proceed to Step 2 or skip directly to feed management
- Once the feed is created, you land on a page to distribute your feed to a blog. If this is what you are trying to accomplish, follow the necessary steps through Feedburner. If you want to publish your feed as html, continue to [this tutorial’s] Step 3.
3) Publicize your feed
Once you have created your feed, click the “Publicize” tab at the top, under the title of your feed. Then click “BuzzBoost” on the left to republish your feed as html. You will be able to customize what shows up in your feed. You will then be able to customize the feed settings and what is displayed. For this tutorial I have left all boxes under “Feed Content to Display” unchecked. Once you are satisfied, click “Activate” at the bottom and some code will appear in the box toward the top of the page under the “Your BuzzBoost is Ready” heading.
You can tweak the settings below this code to your heart’s content and click “Save” at the bottom for it to regenerate the code in this box. I have blurred out the name of my feed in the image above, but this is where yours will appear in the code.
4) Copy and paste the Feedburner code
Copy the code from Feedburner and paste it into the div or table in your html layout. You can leave out the stuff in the <p> tags if you’d like. All we are really looking for here is the Javascript.
5) Customize the look of the feed with CSS (optional)
Once you have placed the Feedburner code into your HTML document, you can style the feed any way you like through CSS. It’s just an unordered list, so you can adjust and style it any way you want!
There’s a great tutorial on how to Display Your Feed on a Static HTML Page Using FeedBurner’s BuzzBoost from Vandelay Design. Skip down to “Step 4: Customize” and they tell you which CSS styles to use.
6) Remove the Feedburner logo (optional)
I was originally creating this kind of setup for a client of mine, where I did not want Feedburner’s branding showing up at the bottom of the feed. You can’t get rid of the Feedburner logo through html code, because I believe it’s somehow hidden/included in their Javascript code. However, you can make it not appear through CSS. Just add the following lines of code into the CSS file associated with your page…
#creditfooter { display: none; }
And shabam, it’s gone!
Tutorial Disclaimer
I hope this has helped some of you along the way. If not, I hope I didn’t make you read a long article that got you nowhere—believe me, that’s what I’ve been doing the last couple of days. But since I figured this out, I just had to share. This is my first-ever tutorial, so please forgive any missteps or cloudiness at this point. If you need technical support with this, I may not be much help, but I will try to answer any questions to the best of my ability. Like I mentioned before, I am no programmer!
Hey, thanks for trying out my php tutorial. Sorry you couldn’t get it working. If you would like to give it another go, feel free to post any errors or problems you get along the way on the comments section and I can help you out. The code can’t be copied and pasted ‘as is’ and used right away without setting certain facebook credentials first (the blue uppercase text). Also, you must ensure the cache folder/file is writeable.
It’s worth having another go as it will add your feed as html without javascript so non-javascript users will see it and search engines will pick it up as though it is original content on your site.
I was excited to find your articles, it seemd simple and exactly what I need, but I got jung up on the first step. Even though my facebook url looked exactly like yours, I got a message that the URL does not appear to have a valid XML file. “Error on line 10: The entity name must immediately follow the ‘&’ in the entity reference”
Help? I hope this can still be an easy process??
Hi Erin,
Sorry for the late reply. I’m not the foremost authority on errors, which I didn’t think to mention I probably wouldn’t be much good at support for these kinds of things. Did you ever get it to work? If not, I will go through and set one up exactly how my tutorial says to. Perhaps I may have left something out, and this is why you are getting an error.
I get an invalid feed error when putting into feedburner or blogger even though the feed is validated?
feed:https://www.facebook.com/feeds/page.php?format=atom10&id=292814240826163
@Aundra what does your javascript code look like? It should look like mine in the “buzz boost” image in the article. I haven’t created another RSS feed since this tutorial, so I may be a bit rusty on troubleshooting.
I’m getting the same errors as everyone else.. please remove this article.. waste of time.
So bummed. I thought I had found the answer I was looking for, but when I put the facebook page in Feedburner, it returned an error – “The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line 9: The entity name must immediately follow the ‘&’ in the entity reference.” No go.
@Robyn: Were you able to compare the html source code of my example page with yours? That may be an option…
Doesn’t look like anyone has got this working. You should probably delete this post
Hey guys I found out how to get past the step I was stuck on. Go to http://ooiks.com/blog/how-to-2/get-facebook-fans-page-news-feed-rss-feed-atom-feed. This will tell you how to create the correct address for feedburner.
It then all worked fine for me.
Hi there, I think I have the solution to your feed problems. Heres what you need.
http://www.facebook.com/feeds/page.php?format=atom10&id=159438217527061
change the number 159438217527061 to your facebook page id.
To get your facebook page id just go to your page, for example here’s my page http://www.facebook.com/IncentCash
just change the www to graph and you will end up like this http://graph.facebook.com/IncentCash and you will see your facebook page id there. Hope it helps and it is working for me. Thank you for this blog post because I have solve my problem.
Ha-ta. Got it to work. I followed the first reference listed on the page: Facebook RSS feed.
At the bottom of that page was a link to a facebook app: FB RSS Facebook application.
That gave the all the Facebook feed urls that I needed to get the tutorial on this page to work. Considering there I’ve spent a few hours surfing, this tutorial worked out well.
Always wanted to do this. Thanks for the write-up ;o)Works like a charm.
Well, it is official. Facebook killed the RSS feeds. (https://developers.facebook.com/docs/apps/changelog#v2_3_90_day_deprecations).
90-day deprecations (effective Tuesday, June 23, 2015)
Page RSS Feed endpoint – at https://www.facebook.com/feeds/page.php is now deprecated and will stop returning data from June 23, 2015. Developers should call the Graph API’s /v2.3/{page_id}/feed endpoint instead. This returns JSON rather than RSS/XML.
I am trying to wrap my head around how to replace the feedburner solution with the new /v2.3/{page_id}/feed … A new write-up would be great 🙂 !
Update: I found a solution that can replace the deprecated feeds/page.php method.
Have a look here: https://www.powr.io/plugins/social-feed/standalone