jQuery Plugin - Social Media Tabs Example 1

Example 1 - Default Settings

Quick start - no customized options!

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

jQuery Code

<script type="text/javascript">
	$(document).ready(function($){
	$('#social-tabs').dcSocialTabs({
		widgets: 'twitter,facebook,fblike,fbrec,google,linkedin,rss,flickr,delicious,youtube,digg,pinterest,lastfm,dribbble,vimeo,stumbleupon,tumblr,deviantart',
		rssId: 'http://feeds.feedburner.com/DesignChemical',
		twitterId: 'designchemical',
		facebookId: '157969574262873',
		fblikeId: '157969574262873',
		fbrecId: 'http://www.designchemical.com',
		googleId: '111470071138275408587',
		google: {
			api_key: ''
		},
		linkedinId: '589883,http://www.linkedin.com/in/leechestnutt',
		flickrId: '/63277308@N00',
		deliciousId: 'designchemical',
		youtubeId: 'wired',
		diggId: 'remix4',
		pinterestId: 'designchemical/designchemical-premium-plugins',
		lastfmId: 'lastfm',
		dribbbleId: 'frogandcode',
		vimeoId: 'brad',
		stumbleuponId: 'remix4',
		deviantartId: 'wyv1',
		tumblrId: 'richters',
		instagramId: '',
		tweetId: 'designchemical'
	});
});
</script>

Note:

Twitter - to set up your Twitter API credentials see Social Networks Details -> Twitter API Credentials.

Google + - to set up your Google API key see Plugin Options -> Creating Your Own Google API key.

Instagram is not included in the demo as this requires you to set up your own client ID in order to access the API - see Creating Your Own Instagram API Client ID & Access Token for more information and step-by-step instructions.

HTML

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

The social media tabs is inserted into the "social-tabs" div tag when the page loads. The social network tabs will appear in the following default order:

twitter
facebook
facebook like box
facebook recommendations
google
rss
flickr
delicious
youtube
digg
pinterest
lastfm
dribbble
vimeo
stumbleupon
tumblr
deviantart
instagram