16
Nov

How to easily display a Facebook page’s feed on your website

I’ve only really had to do this myself a couple of times and each time I’m asked I’m always left thinking, now, where do I begin? For one thing getting the Facebook page’s RSS feed URL is hard enough, so I thought I’d write a little post on how to get that URL, parse it using PHP and then make it look all fancy with CSS.

View the demo for the Facebook RSS feed

First things first, getting the Facebook page’s RSS feed URL. Log into your Facebook account and then head over to the page that you want to turn into a feed. Click on the ‘Notes’ tab and then in the left hand column at the bottom there should be a ‘Subscribe’ section with a link to the RSS feed for the page’s notes. Clicking this, should give you a URL looking a little like the one below:

Facebook notes RSS URL
http://www.facebook.com/feeds/notes.php?id=XXX&viewer=XXX&key=XXX&format=rss20

Now all you need to do is change ‘notes’ in that URL to ‘page’ and you will have a full blown RSS feed of your Facebook page. I’m not sure exactly why this URL isn’t very accessible, perhaps someone can shed some light on the matter?

Facebook page RSS URL
http://www.facebook.com/feeds/page.php?id=XXX&viewer=XXX&key=XXX&format=rss20

This isn’t the final stage in the URL fetching process though. The PHP method I wanted to use (which I’ll come onto in just a few minutes) to parse this feed didn’t like it one bit. So after a bit of mucking around I thought about using FeedBurner to verify the feed and parse the new FeedBurner URL, and what do you know it worked!

So head on over to FeedBurner and burn that Facebook page RSS URL into a more friendly looking FeedBurner URL and you should be all set.

Onto the PHP

First lets set up a few things.

$feed_burner_url = 'http://feeds.feedburner.com/FacebookPage';
 
$doc = new DOMDocument();
$doc-&gt;load($feed_burner_url);
 
$feeds = array();
 
$limit = 2;
$counter = 0;

First we put our new fangled RSS feed URL into a variable. Load in the feed using PHP’s DOMDocument class, declare an array to store our feed into, a limit for the amount of posts you want to display (minus one, in actual fact I want to display 3 but the counter beneath is starting at 0) and a counter, to see how what position we are in the loop we are about to write.

Building the RSS feed into the $feeds array

Now I’m going to go through each item in the RSS feed and stick it into our feeds array.

foreach ($doc-&gt;getElementsByTagName('item') as $node) {
 
	if	($counter &lt;= $limit)
	{
	$items = array (
			'title' =&gt; $node-&gt;getElementsByTagName('title')-&gt;item(0)-&gt;nodeValue,
			'link' =&gt; $node-&gt;getElementsByTagName('link')-&gt;item(0)-&gt;nodeValue,
			'description' =&gt; $node-&gt;getElementsByTagName('description')-&gt;item(0)-&gt;nodeValue,
			'pubDate' =&gt; $node-&gt;getElementsByTagName('pubDate')-&gt;item(0)-&gt;nodeValue
		);
 
	array_push($feeds, $items);
	}
	$counter++;
}

You’ll see above that we’re building up the keys in the array with values from the RSS feed. The key part you need to notice is here: getElementsByTagName('pubDate')

This is the name of the node in the RSS feed, if you view the source of original RSS feed, you should be able to see all the different nodes available for you to use but here they are for you anyway: title, pubDate, author, link and description.

Actually displaying the feed

Well now the feed is an array we simply have to loop through it and we’ll have are RSS feed in an unordered list (or whatever format you want) on our page!

echo '
<ul id="facebook">';
 
foreach ($feeds as $feed)
{
	$date = strtotime($feed['pubDate']);
 
	echo '
	<li>';
	echo '
 
<strong><a href="http://www.facebook.com/'. $feed['link'] .'">FacebookPage</a></strong> '. $feed['description'] . ' '. date('jS F Y G:H' ,$date) .'
 
';
	echo '</li>
';
}
 
echo '</ul>
';

Don’t forget to style it up

I’ve written a few lines of CSS to make the feed look more ‘Facebook like’ if you so desire.

ul#facebook {
	padding: 10px 0 10px 0;
	margin: 0;
	list-style: none;
	font-size: 12px;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
 
ul#facebook img { margin-right: 5px; }
 
ul#facebook li {
	padding: 10px 0 10px 0;
	margin: 0;
	overflow: hidden;
	border-bottom: solid 1px #E9E9E9;
}
 
ul#facebook li p {
	padding: 3px 0 3px 0;
	margin: 0;
	line-height: 18px;
}
 
ul#facebook a {
 
}
 
ul#facebook li a { color: #3B5998 !important; text-decoration: none; }
 
ul#facebook li a:hover { text-decoration: underline; }

Anyway, I hope you find this useful, ’cause I know I’ll be coming back to look at it soon enough. Leave any questions in the comments!

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Tuesday, November 16th, 2010 at 1:35 pm and is filed under Web Design & tagged with Facebook, Feed, Page, Parse, PHP, URL. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

66 Responses | Make a comment

wqd3r wrote on February 9, 2011

pretty neat

Reply
Donkeyfourthumbs wrote on February 9, 2011

Doesn’t seem to work? Displays a blank page? Any ideas?

Reply
- Nouveller wrote on February 10, 2011
  
  It might not work if you didn’t specify you’re own FeedBurner URL. Or make sure you’ve got PHP error’s turned on and let me know the error message.
  
  Reply
  - Brandon wrote on August 17, 2011
    
    I Keep Getting This Error On Like 14 And 21
    “Parse error: syntax error, unexpected ‘&’ in /index.php on line 14″
    
    These 2 Lines
    “foreach ($doc->getElementsByTagName(’item’) as $node) {”
    And
    “$doc->load($feed_burner_url);”
Donkeyfourthumbs wrote on February 10, 2011

I did specify my own Feedburner URL, and don’t get any error messages. It is a facebook RSS feed converted to Feedburner. Don’t know if that matters? Seems to work as an RSS feed in a reader, just not this way?

Reply
Franky wrote on February 14, 2011

Hello! Thank you for the codes. I did it with your codes. How can I show comments and likes under each feed item? Is there a way to do that? What should I do?

Reply
Armin wrote on March 8, 2011

benjamin how we took it to a static html website ?

Reply
E-Siber wrote on March 10, 2011

Ok. This is very perfect method. But why could not we get feed of our sites ‘like’s or feed of recommandations box?

Reply
Eric wrote on May 4, 2011

I may just be out-dated or out of practice with my knowledge of PHP but the part where you have:

$doc->

is receiving an error message with my server, stating it’s an unexpected ‘&’ . I don’t really understand how that portion functions anyhow, maybe estimate what might be the problem?

Thanks, other than that, this script looks to be exactly what I want!

Reply
- Eric wrote on May 4, 2011
  
  nvm, i see what happened now… i’m dumb.
  
  cheers!
  
  Reply
  - E.J. wrote on August 16, 2011
    
    What did you see? I cannot figure out what is going on.. It continually says “Parse error: syntax error, unexpected ‘&’”on this line.
    
    $doc->load($feed_burner_url);
  - E.J. wrote on August 16, 2011
    
    ah i got it… it took posting here but the less than and greater than signs were replaced with HTML Entities. thanks for the post!
- Chris wrote on June 12, 2011
  
  I am getting this error as well, do you know how to fix it at all?
  
  Cheers
  
  Reply
  - josh stevens wrote on January 13, 2012
    
    $doc->load($feed_burner_url);
    
    is erroring for me as well
John wrote on July 7, 2011

Thanks for the article. Not sure if I overlooked it, but where do I get the “key” value:

http://www.facebook.com/feeds/page.php?id=XXX&viewer=XXX&key={XXX}&format=rss20

Reply
Jon wrote on July 18, 2011

Just tried to burn my facebook page RSS, it comes up as invalid and won’t allow it - any one else found this or a way around it?

Reply
Erik wrote on August 1, 2011

Working to get your script working in a custom build cms.. thanks for the work don… i was kinda left blinded.. could not figure out how to get the facebook feed in to the page.. your tut is already helping alot!

greetings!

Erik

Reply
Hogan Schuhe wrote on August 11, 2011

Hogan Schuhe

Reply
Kelly wrote on August 11, 2011

Thanks for your help! You helped me get my FB page to show on our website (a free sharesite on Shutterfly). Just like magic!

Reply
Erik wrote on August 23, 2011

Thank you for this post. I am not a programer, but I have a couple questions.

I am following the steps you have outlined, I am just not sure WHERE to put the code you have provided. Where in the page structure do I put it? We are building the site in Drupal 7.

Thank you, really appreciate it!

Reply
Al wrote on September 5, 2011

I think the facebook feed provides you with 29 30 items. Do you know if a ways where you could get more.

Reply
steve roberts wrote on September 27, 2011

And where does this code go?

Reply
เย็ด wrote on October 4, 2011

Thank you for this post. I am not a programer, but I have a couple questions.

Reply
saba wrote on October 19, 2011

Thank you so much! it works:)

Reply
Cheap views wrote on October 26, 2011

Cheap views…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
facebook, twitter, google +1 wrote on November 3, 2011

I’m extremely inspired with your writing talents and also with the structure on your weblog. Is that this a paid subject matter or did you customize it your self? Either way stay up the excellent quality writing, it?s uncommon to see a nice blog like this one today..

Reply
Double coupons wrote on November 8, 2011

Double coupons…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
High Quality Web Design wrote on November 13, 2011

High Quality Web Design…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Billig Rieker Schuhe wrote on November 20, 2011

hi!,I like your writing so a lot! proportion we keep in touch more about your article on AOL? I need an expert in this space to unravel my problem. Maybe that’s you! Having a look ahead to look you.

Reply
emoticons do facebook wrote on November 21, 2011

I will right away grab your rss feed as I can’t in finding your email subscription hyperlink or e-newsletter service. Do you’ve any? Kindly let me understand so that I may just subscribe. Thanks.

Reply
apple ipad 2 wrote on November 28, 2011

I just like the valuable info you provide in your articles. I will bookmark your blog and check once more right here frequently. I’m rather sure I will be informed many new stuff proper here! Good luck for the following!

Reply
like on facebook wrote on November 28, 2011

like on facebook…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Stephen Costello wrote on December 9, 2011

Can’t get this working to save my life. Keep getting an error related to ‘DOMDocument::load’. Its in the line $doc = new

Any help would be great!!

Reply
dan leci wrote on December 10, 2011

רציתי לספר לך על בניית אתר איכותית ,ואני מקווה שאתה מבין למה אני מתכוון ,אתר איכותי אמין מאוד ויש גם בניית אתר טוב מאוד אצלנו המערכת קלה ומיוחדת הבנקים משתשמים בה

Reply
lowest prices on facebook templates wrote on December 21, 2011

lowest prices on facebook templates…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Hasbro Year 2001 Transformers Robots In Disgu wrote on December 22, 2011

weblog and had to write. I’m a latest school grad, journalism major if you need to know, and I absolutely adore images. I’ve received my website

Reply
超跑 wrote on December 24, 2011

超跑…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Facebook like wrote on December 30, 2011

Unquestionably believe that which you stated. Your favorite reason appeared to be at the internet the simplest thing to take note of. I say to you, I certainly get irked at the same time as other folks consider worries that they just do not know about. You controlled to hit the nail upon the highest as neatly as outlined out the entire thing with no need side effect , other people could take a signal. Will probably be back to get more. Thank you

Reply
Tony wrote on December 30, 2011

Everyone please note that when you put the php on your page change > to (Greater Than Sign) change < to (Less Than Sign)

For the newbies place the first 3 blocks of code above ALL html inside php tags.

Place the last block of code in your css style sheet or inside style tags somewhere between the head and body tags.

Hope this helps.

Reply
Tony wrote on December 30, 2011

EDIT: Ok the comment box edited my post. I am going to use spaces here.

Change (& l t No spaces to less than sign.

Change (& g t No spaces to less than sign.

Reply
Tony wrote on December 30, 2011

Change & l t ; No spaces to less than sign.

Change & g t ; No spaces to less than sign.

Reply
Micke wrote on January 2, 2012

What if you dont want to show pictures? Can you remove them in any way?

Reply
damogari wrote on January 3, 2012

Hi! I really like your script, but it doesn’t work for me - it’s shoe me error:

Parse error: syntax error, unexpected ‘&’ in /home/arielo/public_html/machinan/burner_feed.php on line 7

what I have to do to make things work?

Reply
- Tori wrote on January 13, 2012
  
  That’s cleared my thoughts. Thanks for cotnrbuiting.
  
  Reply
- qvwpvzjqhgj wrote on January 14, 2012
  
  SpThjI tiqcptipxlqk
  
  Reply
- jxwhhtbosp wrote on January 16, 2012
  
  lh1uh0 twxtlerfmtuu
  
  Reply
damogari wrote on January 3, 2012

in this line I have this:

$doc->load($feed_burner_url);

Reply
damogari wrote on January 3, 2012

solved for now - this comments show how code has to be written in editor

Reply
damogari wrote on January 3, 2012

solution was to change every “& g t ;” to > etc which was posted before by Tony thx!

Reply
David Ruiz wrote on January 8, 2012

This worked great! This provided all the functionality I needed and with some of my tweaks it did it all.

Thanks for sharing.

David

Reply
php training videos wrote on January 11, 2012

php training videos…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
social media wrote on January 18, 2012

social media…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Wouter wrote on January 23, 2012

Looks like Facebook has a link to get a page’s RSS feed. Open your Facebook page, and look in the left column at the bottom. There you will see a “Get updates via RSS” link. There you go.

Reply
marketing internet wrote on January 24, 2012

marketing internet…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
pitipoance wrote on January 24, 2012

pitipoance…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
website blocker wrote on January 28, 2012

I am extremely inspired together with your writing abilities and also with the structure on your blog. Is this a paid subject or did you modify it yourself? Anyway stay up the excellent high quality writing, it is rare to peer a nice blog like this one these days..

Reply
facebook wrote on February 2, 2012

I like the valuable information you provide to your articles. I’ll bookmark your weblog and take a look at once more right here regularly. I’m reasonably certain I will be informed lots of new stuff right here! Best of luck for the following!

Reply
error 651 wrote on February 4, 2012

Thank you for every other informative website. The place else may just I am getting that type of information written in such an ideal manner? I’ve a undertaking that I’m just now operating on, and I’ve been on the glance out for such information.

Reply
monk wrote on February 7, 2012

it is easy you just need to add the code or use a plugin to add the fb to your page.

Reply
facebook likes,twitter followers,free twitter followers,free facebook likes wrote on February 7, 2012

Thank you a lot for sharing this with all people you actually realize what you are speaking about! Bookmarked. Kindly additionally discuss with my site =). We could have a hyperlink change contract among us

Reply
filmy download wrote on February 13, 2012

filmy download…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Home Shirt wrote on February 15, 2012

I just could not leave your website before suggesting that I extremely loved the standard information an individual supply for your visitors? Is going to be again incessantly to check out new posts

Reply
Jazzy wrote on February 15, 2012

there is no ‘Subscribe’ button. The notes tab just shows the notes i’ve posted??

Reply
burning software wrote on February 20, 2012

burning software…

[...]How to easily display a Facebook page’s feed on your website | Nouveller[...]…

Reply
Mavent wrote on February 20, 2012

It seems like maybe the simple answer would be to post the code correctly,

Reply
sondages payants wrote on February 21, 2012

I am really impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, it is rare to see a great blog like this one these days..

Reply