Example 4 - Insert Sliding Tabs In Page Content

Example 4 - Insert Sliding Tabs In Page Content

If you want to include slide-out social media tabs in the actual page content you can use the "position" option:

jQuery Code

<script type="text/javascript">
	$(document).ready(function($){
	$('#social-tabs').dcSocialTabs({
		position: 'absolute',
		location: 'top',
		align: 'right',
		width: 380,
		offset: 20,
		widgets: 'twitter,fblike,fbrec,google,rss,pinterest,flickr,delicious,youtube',
		rssId: 'http://feeds.feedburner.com/DesignChemical',
		twitterId: 'designchemical',
		fblikeId: '157969574262873',
		fbrecId: 'http://www.designchemical.com',
		googleId: '111470071138275408587',
		flickrId: '',
		deliciousId: 'designchemical',
		youtubeId: 'wired',
		pinterestId: 'designchemical',
		twitter: {
				thumb: true
			}
	});
});
</script>

HTML

TO create the slider inside the page content the social-tabs div tag must be placed inside a tag that has the following CSS rules:

position: relative; 
overflow: hidden;

The slide out tabs will position themselves relative to the edge of this tag and the overflow: hidden; will hide the tab content when closed. The social-tabs div tag can then be included anywhere within the parent tag:

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

CSS

This setting requires a slight modification to the standard CSS in order to create the border on all 4 sides. If you dont want to add the extra border you can use the default CSS in file dcsmt.css.

.dcsmt.top .dcsmt-slider {
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.dcsmt.top .tab-inner {
	border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.dcsmt.top .tab-content {
	padding: 10px;
}

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.