jQuery Facebook Fanpage Feeds Widget With Like Button for Blogger
E
very business and most blogs now have their own facebook fan page. Now I introduce, a new jQuery plugin that creates a widget on your website. This widget will have the recent feeds of your fan page and will also display what other people are talking about it. A like box for the fan page is also displayed in the widget. Just include this plugin, specify your fan page URL and expose social content of your fan page on your website!Live Demo !
Features
- displays videos from your fanpage feeds.
- links on your fanpage are displayed and work correctly.
- more feeds from your fanpage shown as user scrolls down (infinite scroll).
- the widget itself loads asynchronously after your webpage is displayed, so it does not slow down your pageload speed.
- displays feeds from your facebook fanpage.
- also displays posts made by other people on your fanpage .
- a like box for your page is displayed at the top to increase your followers.
- customizable width and height of the widget.
- Copy and paste below code just above</head> in your blogs HTML.
- Enter you facebook fanpage URL in a piece of javascript as shown below. You may also customize the dimensions of your widget as required.
<script type="text/javascript">
var pageUrl = "https://www.facebook.com/makingdifferent";
var makingdifferentfbWidgetWidth = 500;
var makingdifferentfbWidgetHeight = 400;
function displaymakingdifferentfb() {
$('#makingdifferentfb').empty().append(' loading ...');
pageUrl=$('#pageUrl').val();
//alert(blogUrl);
onLoadmakingdifferentfb();
}
</script>
var pageUrl = "https://www.facebook.com/makingdifferent";
var makingdifferentfbWidgetWidth = 500;
var makingdifferentfbWidgetHeight = 400;
function displaymakingdifferentfb() {
$('#makingdifferentfb').empty().append(' loading ...');
pageUrl=$('#pageUrl').val();
//alert(blogUrl);
onLoadmakingdifferentfb();
}
</script>
- Include the jQuery plugin if not done already. Now, include the plugin fbfanpagefeed-plugin.js before the end of your body tag and you are done!
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://makingdifferent.github.com/blogger-widgets/fbfanpagefeed-plugin.js"></script>
<script src="http://makingdifferent.github.com/blogger-widgets/fbfanpagefeed-plugin.js"></script>
- Now go to blogger--->layout--->add a gadget
- Choose HTML/javascript from the list
- Copy and paste below code into it, This div will contain the widget and display likes with Fanpage feed.
<div id="makingdifferentfb"></div>
drop your comments and questions below...
No comments