jQuery Social Media Tabs Plugin

jQuery Social Media Tabs Plugin – Example 1

Quick start using the plugin default settings – Social network tabs will appear down the right-hand edge of the browser window. Click any of the icons to slide open the tabs and view the profile & feed info.

Minimum required settings are the relevant ID’s, usernames or URLs for the individual social network tabs:

Add The Plugin jQuery & CSS Files

Link the supplied CSS style sheet and the jQuery plugin file in the head of the page:

<link rel="stylesheet" type="text/css" media="all" href="css/dcsmt.css" />
<script type="text/javascript" src="js/jquery.social.media.tabs.1.3.min.js">

Initialize the Plugin

The social network user details are passed as options when the plugin is initialized:

$(document).ready(function($){
	$('#social-tabs').dcSocialTabs({
			rssId: 'http://feeds.feedburner.com/DesignChemical',
			twitterId: 'designchemical',
			fblikeId: '157969574262873',
			fbrecId: 'http://www.designchemical.com',
                        facebookId: '157969574262873',
			googleId: '111470071138275408587',
			flickrId: '',
			deliciousId: 'designchemical',
			youtubeId: 'wired',
			diggId: 'remix4',
			pinterestId: 'jaffrey',
			lastfmId: 'lastfm',
                        dribbbleId: 'dribbble',
                        vimeoId: 'vimeo',
                        stumbleuponId: 'remix4'
		});
});

Add the HTML

<div id="social-tabs"></div>

The social media tabs are inserted into the “social-tabs” div tag when the page loads.

Using the plugin default settings, the social network tabs will appear in the following order:

Twitter, Facebook Like Box, Facebook Recommendations, Facebook Wall Posts, Google +1, RSS Feed, Flickr, Delicious, Youtube, Digg, Pinterest, Last.fm, Dribbble, Vimeo & Stumbleupon.

Other Premium Plugins

WordPress Social Stream Plugin WordPress Social Share Buttons Plugin Top Social Share Posts Plugin