# 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.

Social Media Tabs plugin was created by Design Chemical.