jQuery Social Media Plugin is used to add feeds and profiles from your favorite social networks in slick slide out or static tabs yo you website. The interesting part of this plugin is, it has options to integrate nearly 17 social network site with feed options in your site. You can get this plugin here.

I’m not making an advertisement here. But I can guarantee that It’s worth the money and it gives a rich look to your site. It has  This plugin is available for integrating with wordpress. But unfortunately there is no modules to integrate it to Magento.

I happen to integrate to Magento for one of my client. Here is the tutorial on integrating it to magento.

  • Add CSS and jQuery files in your corresponding theme directory. I think CSS is named as dcsmt.css and Js would be named as jquery.social.media.tabs.js. 
    /Magento folder/skin/frontend/default/{YOUR THEME}/css/dcsmt.css
    /Magento folder/skin/frontend/default/{YOUR THEME}/js/jquery.social.media.tabs.js
  • Then declare it in the corresponding XML file. It may be in the following location:
    /Magento folder/app/design/frontend/default/{YOU THEME}/layout/page.xml
    or
    /Magento folder/app/design/frontend/default/{YOU THEME}/layout/local.xml

    You can declare the CSS and Js by adding this 2 lines in the node <reference name=”head”>.

    <action method="addCss"><stylesheet>css/dcsmt.css</stylesheet></action>
    <action method="addItem">
    <type>skin_js</type><script>js/jquery.social.media.tabs.js</script>
    </action>

    page-xml

  • Above picture will show the declaration of CSS and Js in Page.XML in your layout folder
  • Then add all your images in Images folder, which is inside your theme’s skin directory.
  • Then the final step is to call the script in your header or footer Phtml. You can find that in your theme template folder:
    /Magento folder/app/design/frontend/default/{YOU THEME}/template/page/html/header.phtml
    Or
    /Magento folder/app/design/frontend/default/{YOU THEME}/template/page/html/footer.phtml
  • Open any one of the file and add these HTML and JQuery code in that file.
    <div id="social-tabs"></div>

    jQuery Code:

    jQuery(document).ready(function(){
    	jQuery('#social-tabs').dcSocialTabs({
    		widgets: 'twitter,facebook,fblike,fbrec,google,linkedin,rss,youtube,pinterest',
    		rssId: 'http://feeds.feedburner.com/DesignChemical',
    		twitterId: 'WilII_Smith',
    		facebookId: '157969574262873',
    		fblikeId: "157969574262873",
    		fbrecId: "http://www.designchemical.com",
    		googleId: '111470071138275408587',
    		linkedinId: '589883,http://www.linkedin.com/in/leechestnutt',
    		youtubeId: 'wired',
    		pinterestId: 'designchemical/designchemical-premium-plugins',
    		location:'left',
    		align: 'bottom',
    		offset:140,
            imagePath:'getSkinUrl('images/icons/');?>',
    		twitter: {
    			thumb: true
    		},
    		tweetId: 'WilII_Smith'
    	});
    });

    You can learn more about configuring the social media widgets in the plugin site. Don’t forget to add jQuery noConflict method, if you haven’t declare before.

  • “imagePath” — on line 16 is the main part here. You can specify image path here as an absolute URL like given above which points to your theme’s skin directory.
  • Now save and load your site, It’ll work.
  • That’s It man! It’ll work! Happy coding!