Integrate social [twitter,blogger,wordpress,flicker,youtube] feeds with your Website

Social, Socialize, Socialized . . . .

Nowadays if you visit any websites you will see some fancy icons that connects the site to their social sites.  Around 4 or 5 yeas back there is no such things exist but now it’s all over the internet.

This blog post describes about social site integration not as icon but as a feed, which means fetch the social updates from you social website and display it in your website. All the things are done with the help of JavaScript, and jQuery libraries.

There are lots of JavaScript/jQuery libraries to do this and here I’ll list some of those libraries I used,

Twitter feeds

seaofclouds twitter plugin  The feeds can be fetched by user name or key word also it comes with the style sheet that provides lot more styles.

jQuery(function($){

        $("#query").tweet({
          avatar_size: 32,
          count: 4,
          query: "tweet.seaofclouds.com",
          loading_text: "searching twitter..."
        });
      });

Flicker feeds

jFlickrFeed - It also provide more control to customize the view of the photos. As well as it has some nice features like applying nice border to photos and make a photo slide show.

$('#myFlickerFeedDiv').jflickrfeed({
	limit: 14,
	qstrings: {
		id: '44802888@N04'
	},
	itemTemplate: 
	'<li>' +
		'<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
	'</li>'
});

Blog feeds

RSS to Javascript Generator – You can generate the feed script by filling the requirements. It’s a single line script that run from their site and return the feeds of your bog.

But if you want more control over your fees and style, i think zRSSFeed will be better choice.

zRSSFeed – As i said earlier this feed reader plug-in has more control over feeds(no of feeds, including header or not, time format and etc) and style.

$('#myBlogFeedDev').rssfeed('http://ajithsrikukan.wordpress.com/feed/', {
    limit: 5
  });

YouTube feeds

Refer to this site : YouTube Data API via JSON: embedding videos in your site

As the code described in this website, it provides a facility to style the content as well as you can change the size of the video, number of videos to display and etc.

Click here for Demo          Happy Social Coding

I’m looking for Facebook and LinkedIn feed readers. Once I found I’ll share it. If you got it first please provide the  links as comment

About these ads