Nowadays, regardless of a company or a person wanting to have a personal homepage they will still have a facebook page, twitter, blog, or something else - somewhere where they have been and will be posting updates and news about their product or services. That is also referred to as news feed or RSS (Rich Site Summary).
So, it makes a lot of sense to take that feed (or feeds) and implement them on the website under News section - this way the client won't have to worry about updating their website and can just keep posting where they are used to - everybody is happy - client doesn't need to learn anything or do anything and proceeds with his usual routine. And less work for you as a developer/webmaster - you don't have to go update the content.
Most websites make it pretty simple - you just find the RSS button and get the link. Facebook however does things differently. You can go here:
http://developers.facebook.com/docs/reference/plugins/like-box/
by default data-stream=true which means you will get all the posts feed. And you can adjust the width... but it's still not really good for most case scenarios. The result is shown right there next to the inputs - It looks like a scrollable iframe, you can't get rid of the borders or change anything about the styles.
Instead you can use this link:
http://fbrss.com/
It will give you lists of all the people you friended and all the pages you've liked. So go find the page you were looking for and click the link on the right side where it says "RSS some page". Great. Now copy the address from the address bar - just put it in notepad or somewhere else for now.
Now go here:
http://www.jquery-plugins.net/FeedEK/FeedEk.html
As you could've guessed from the link it's a jQuery plugin. Download it (will be a .rar - you will need a 7zip or a similar program to open it. There is a link to a free 7zip program right there on the page).
Unzip it. Put the JavaScript file into your javascrip folder and include it on your page, and do the same with the stylesheet - or if you already have a stylesheet just copy-paste the styles into your own file (you can do that with the js file as well). They are very small and lightweight. Make sure to have jQuery included (which you should regardless of what page you're making...) and it must be 1.9.1 version or higher.
Copy-paste this code in the <head> ... </head> portion of your page preferably right before the closing </head> tag.
<script type="text/javascript">
$(document).ready(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://rss.cnn.com/rss/edition.rss',
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 400
});
});
</script>
Go get the URL you pasted into your notepad at the beginning of this. replace the URL that appears in red with your own (the one in notepad where I told you to paste it ;) ).
And now wherever you want on your page the feed to show just make an empty div with the correct id:
<div id="divRss">
</div>
You can mess around with styles and parameters, add or remove stuff and customize it to your liking - I'm not explaining that - you will figure it out on your own :)).
This will work anywhere literally - your page can be a .html. So, even if you have the smallest hosting package out there this will still be usable and will work just fine.
Of course, if you know PHP or some other server-side language you can make it even better. There is a pretty good tutorial here:
http://nouveller.com/web-design/how-to-easily-display-a-facebook-page-feed-on-your-website/
If you do it with PHP you can easily get all of the posts and paginate it and make it pretty and put it in the format you want but if you want something small and easy to do the one I described should be sufficient.
So, it makes a lot of sense to take that feed (or feeds) and implement them on the website under News section - this way the client won't have to worry about updating their website and can just keep posting where they are used to - everybody is happy - client doesn't need to learn anything or do anything and proceeds with his usual routine. And less work for you as a developer/webmaster - you don't have to go update the content.
Most websites make it pretty simple - you just find the RSS button and get the link. Facebook however does things differently. You can go here:
http://developers.facebook.com/docs/reference/plugins/like-box/
by default data-stream=true which means you will get all the posts feed. And you can adjust the width... but it's still not really good for most case scenarios. The result is shown right there next to the inputs - It looks like a scrollable iframe, you can't get rid of the borders or change anything about the styles.
Instead you can use this link:
http://fbrss.com/
It will give you lists of all the people you friended and all the pages you've liked. So go find the page you were looking for and click the link on the right side where it says "RSS some page". Great. Now copy the address from the address bar - just put it in notepad or somewhere else for now.
Now go here:
http://www.jquery-plugins.net/FeedEK/FeedEk.html
As you could've guessed from the link it's a jQuery plugin. Download it (will be a .rar - you will need a 7zip or a similar program to open it. There is a link to a free 7zip program right there on the page).
Unzip it. Put the JavaScript file into your javascrip folder and include it on your page, and do the same with the stylesheet - or if you already have a stylesheet just copy-paste the styles into your own file (you can do that with the js file as well). They are very small and lightweight. Make sure to have jQuery included (which you should regardless of what page you're making...) and it must be 1.9.1 version or higher.
Copy-paste this code in the <head> ... </head> portion of your page preferably right before the closing </head> tag.
<script type="text/javascript">
$(document).ready(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://rss.cnn.com/rss/edition.rss',
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 400
});
});
</script>
Go get the URL you pasted into your notepad at the beginning of this. replace the URL that appears in red with your own (the one in notepad where I told you to paste it ;) ).
And now wherever you want on your page the feed to show just make an empty div with the correct id:
<div id="divRss">
</div>
You can mess around with styles and parameters, add or remove stuff and customize it to your liking - I'm not explaining that - you will figure it out on your own :)).
This will work anywhere literally - your page can be a .html. So, even if you have the smallest hosting package out there this will still be usable and will work just fine.
Of course, if you know PHP or some other server-side language you can make it even better. There is a pretty good tutorial here:
http://nouveller.com/web-design/how-to-easily-display-a-facebook-page-feed-on-your-website/
If you do it with PHP you can easily get all of the posts and paginate it and make it pretty and put it in the format you want but if you want something small and easy to do the one I described should be sufficient.
No comments:
Post a Comment