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

, , , , , , , ,

  1. #1 by mestreseo on January 2, 2013 - 10:30 pm

    wow. great tips!

  2. #2 by lista de emails on January 3, 2013 - 12:02 am

    useful post and i think it is rather easy to see from the other comments as well that this post is well written and useful.

  3. #3 by lista de on January 3, 2013 - 7:33 am

    thank you for the article. i just about passed your web site up in bing.

  4. #4 by iphone on September 18, 2013 - 6:37 am

    This piece of writing offers clear idea for the new viewers
    of blogging, that truly how to do blogging.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 112 other followers

%d bloggers like this: