Create unlimited contact tabs with customised AJAX powered forms and display in slide out or static tabs. Plugin includes 12 different form elements and client-side validation.

Our latest premium jQuery form generator plugin makes it easy to add stylish slide out contact tabs to any website. Add multiple tabs, each with its own custom form or use the built-in default standard contact form. All form HTML and styling generated by the plugin – both “light” and “dark” skins available.

Configure your own forms from the following form elements:

• Text block
• Text fields
• Textarea
• Select lists
• Radio button groups
• Checkboxes
• Hidden fields
• Email to & email from text fields
• IP field for including user’s IP address
• URL field for including URL of page where form was submitted
• Submit button

Go To jQuery Contact Tabs Demo Site

Plugin Features

• jQuery form generator – create custom forms with 12 different form elements
• Submit form via AJAX
• Display either using slide out tabs or static tabs in your page content.
• Fully flexible positioning.
• Position sliding tabs relative to browser window or within the page content.
• Includes validation options for form input
• Includes both light & dark skins
• Includes PHP file for sending email via PHP mail or SMTP mail
• Option to load open for slide out tabs.
• Control order of tabs & select default tab on page load.
• Show/hide slide out tabs or change active contact tab using external links.
• Default contact form very easy to use – just add a single div tag to your web page & initialize the plugin!
• Full documentation.
• Multiple examples including configurable demo.
• Tested up to jQuery 1.9.1

jQuery Contact Tabs Plugin Demos

• Quickstart (Dark Skin)
• Quickstart (Light Skin)
• Options
• Static Tabs
• Inline Sliding Tabs
• Using External Links

Purchase From Codecanyon

jQuery Contact Tabs is now available from codecanyon.

In our latest jQuery social network tutorial we are going to create a jQuery plugin to display Pinterest feeds via AJAX from either a username or pinterest board and display them in a masonry style wall using jQuery Isotope.

The plugin will also include code to display time since posted, options to set the number of feed items to display plus Facebook and Twitter share links to help boost the traffic to your pins.

View jQuery Pinterest Feed Plugin DemoDownload Demo Source Files

The Pinterest Feed Plugin Options

• id – this is where the username or pinterest board will be added when initialising the plugin
• results – set the number of pins to display
• tweetId – set the twitter username for share links

The Pinterest Feed Plugin Components

• AJAX function that will load the pins from a Pinterest RSS feed.
• A function that will convert the Pinterest post date to a relative “time since” date.
• A function that will add both Facebook and Twitter share links & open in popup window.
• A function to generate the wall layout using jQuery Isotope.

The Plugin Code

Since Pinterest have not yet released their latest API (at time of post) we are going to use their public RSS feeds to create the wall along with the Google Feed API, which makes it easier to download RSS feeds using jQuery/javascript.

We are using a standard jQuery pattern to create the plugin. See comments in plugin code for more information on each section:

(function($){

	PinterestFeedObject = function(el, options) {
		this.create(el, options);
	};

	$.extend(PinterestFeedObject.prototype, {

		create: function(el, options) {

			// Set the default options
			this.defaults = {
				id: '', // enter username, pinterest list ID or search keyword
				results: 10, // number of results to display
				tweetId: '' // twitter username for share links
			};

			var o = $.extend(true,this.defaults,options);

			// Add ul tag to target element
			$(el).append('<ul class="stream"></ul>');

			// Set Pinterest RSS url using Google Feed API
			var cp = o.id.split('/'),
				ext = cp.length > 1 ? '/rss' : '/feed.rss',
				href = 'http://www.pinterest.com/'+o.id,
				url = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+o.results+'&callback=?&q=' + encodeURIComponent(href+ext);

			// jQuery AJAX call
			jQuery.ajax({
				url: url,
				cache: true,
				dataType: 'jsonp',
				success: function(a){
					a = a.responseData.feed.entries;
					$.each(a, function(i,item){
						if(i < o.results){
							var d = item.publishedDate,
								img = '<a href="'+item.link+'"><img src="'+$('img',item.content).attr('src')+'" alt="" /></a>',
								html = '<li>' + img + item.contentSnippet;

							// Add share links
							html += '<span class="section-share">'+shareLink(item.contentSnippet,item.link,o.tweetId)+'</span>';

							// Get time since
							d = d != '' ? html += '<span class="date">'+nicetime(new Date(d).getTime())+'</span></li>' : '' ;
						}

						// Add pinterest feed items to stream
						$('.stream',el).append(html);
					});
				},
				complete: function(){

					// Code to open new popup window for share links + open other links in new browser tab
					$('.stream a',el).click(function(e){
						if($(this).parent().hasClass('section-share')){
							var u = $(this).attr('href');
							window.open(u,'sharer','toolbar=0,status=0,width=626,height=436');
							return false;
						} else {
							if(external){this.target = '_blank';}
						}
					});

					// jQuery Isotope function
					var $c = $('.stream',el);
					$c.imagesLoaded( function(){
						$c.isotope({itemSelector : 'li'});
						$('li',$c).fadeIn();
					});
				}
			});
		}
	});

	$.fn.dcPinterestFeed = function(options, callback){
		var d = {};
		this.each(function(){
			var s = $(this);
			d = s.data("pinterestfeed");
			if (!d){
				d = new PinterestFeedObject(this, options, callback);
				s.data("pinterestfeed", d);
			}
		});
		return d;
	};

	// Creates facebook & twitter share links
	function shareLink(st,sq,tweetId){
		var sq = encodeURIComponent(sq), st = encodeURIComponent(st);
		var s = '<a href="http://www.facebook.com/sharer.php?u='+sq+'&t='+st+'" class="share-facebook"></a>';
		s += '<a href="https://twitter.com/share?url='+sq+'&text='+st+'&via='+tweetId+'" class="share-twitter"></a>';
		return s;
    }

	// Function to convert date to relative date
	function nicetime(a){
		var d = Math.round((+new Date - a) / 1000), fuzzy;
		var chunks = new Array();
			chunks[0] = [60 * 60 * 24 * 365 , 'year'];
			chunks[1] = [60 * 60 * 24 * 30 , 'month'];
			chunks[2] = [60 * 60 * 24 * 7, 'week'];
			chunks[3] = [60 * 60 * 24 , 'day'];
			chunks[4] = [60 * 60 , 'hr'];
			chunks[5] = [60 , 'min'];
		var i = 0, j = chunks.length;
		for (i = 0; i < j; i++) {
			s = chunks[i][0];
			n = chunks[i][1];
			if ((xj = Math.floor(d / s)) != 0)
				break;
		}
		fuzzy = xj == 1 ? '1 '+n : xj+' '+n+'s';
		if (i + 1 < j) {
			s2 = chunks[i + 1][0];
			n2 = chunks[i + 1][1];
			if ( ((xj2 = Math.floor((d - (s * xj)) / s2)) != 0) )
				fuzzy += (xj2 == 1) ? ' + 1 '+n2 : ' + '+xj2+' '+n2+'s';
		}
		fuzzy += ' ago';
		return fuzzy;
    }

})(jQuery);

To make it easy to use copy the above plugin code into a file and name it jquery.pinterest.feed.js.

Using Your jQuery Pinterest Feed Plugin

1. Add the jQuery Library, jQuery Isotope & Pinterest Plugin

Add the plugin link, link to the jQuery Isotope plugin & link to the jquery library to the document head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jquery.pinterest.feed.js"></script>

2. Initialise the jQuery Pinterest Feed Plugin

The minimum options required are the id for your pinterest feed and the tweetId for the share links. There are 2 options for the id:

• To show a feed from a Pinterest username just enter the username – e.g. “jaffrey”
• To show a feed for a Pinterest board enter the username + “/” + board slug, which you can get from the Pinterest board URL – e.g. “jaffrey/movies-to-watch”

To initialise the plugin add the following code in your document head after the links to the plugin file and the jQuery library:

<script type="text/JavaScript">
    $(document).ready(function() {
        $('#pinterest-feed').dcPinterestFeed({
            id: 'jaffrey',
            tweetId: 'designchemical'
        });
    });
</script>

To change the number of results:

<script type="text/JavaScript">
    $(document).ready(function() {
        $('#pinterest-feed').dcPinterestFeed({
            id: 'jaffrey',
            tweetId: 'designchemical',
            results: 20
        });
    });
</script>

3. The Pinterest Feed CSS

The styling for the wall is fairly easy – create the drop-shadow for the feed items, position the date and create the Twitter & Facebook share links using a css background sprite (included in demo download files):

ul.stream li {
	display: none;
	width: 195px;
	margin: 0 6px 12px 6px;
	background: #fff;
	font: normal 13px/18px Arial, sans-serif;
	color: #333;
	position: relative;
	padding: 10px 15px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
ul.stream li img {
	padding: 1px;
	background: #fff;
	border: 1px solid #ececec;
	margin: 3px 0 5px 0;
}
ul.stream li .date {
	display: block;
	clear: both;
	margin: 10px 0 0 0;
	line-height: 12px;
	color: #666;
	font-size: 11px;
	font-style: italic;
}
ul.stream li .section-share {
	bottom: 8px;
    right: 15px;
    position: absolute;
	z-index: 2;
}
ul.stream li .section-share a {
	display: block;
	width: 16px;
	height: 16px;
	float: left;
	margin: 0 2px 0 0;
	background: url(images/share.png) no-repeat 0 0;
}
ul.stream li .section-share a.share-twitter {
	background-position: 0 -16px;
}
ul.stream li .section-share a.share-facebook:hover {
	background-position: -16px 0;
}
ul.stream li .section-share a.share-twitter:hover {
	background-position: -16px -16px;
}

4. The HTML

The only HTML required in your page is an empty div tag with the ID set to the same as that used in the initalisation code – e.g. pinterest-feed:

<div id="pinterest-feed"></div>

Just place the above tag in your page between the body tags where you want the Pinterest wall to appear.

Show Multiple Pinterest Walls Per Page

The plugin can show multiple feeds per page, as shown in the demo. To do this just add multiple div tags with unique IDs and enter the initialisation code – e.g:

jQuery Code

<script type="text/JavaScript">
$(document).ready(function() {

    $('#pinterest-feed-1').dcPinterestFeed({
        id: 'jaffrey',
        tweetId: 'designchemical'
    });

    $('#pinterest-feed-2').dcPinterestFeed({
        id: 'jaffrey/movies-to-watch',
        tweetId: 'designchemical',
        results: 20
    });
});
</script>

HTML Code

<div id="pinterest-feed-1"></div>
<div id="pinterest-feed-2"></div>

View jQuery Pinterest Feed Plugin DemoDownload Demo Source Files

Credits

• jQuery Isotope Plugin – for licensing terms please refer to the jQuery Isotope website.
• Google Feed API.

In the following tutorial we are going to go show how to create a jQuery plugin to display Twitter feeds via AJAX from either a username or search using the Twitter API.

The plugin will also include code to display time since posted, retweet, reply & favourite links plus options to set the number of feed items to display, turn on/off retweets and replies, show the user’s avatar and also include any embedded images.

View jQuery Twitter Feed Plugin DemoDownload Demo Source Files

The Twitter Feed Plugin Options

To make the plugin more versatile we are going to include several options, which you can use to customise the output:

• id – this is where the username or search term will be added when initialising the plugin
• retweets – option to include/exclude retweets
• replies – option to include/exclude replies
• avatar – option to include the tweet author’s avatar
• results – set the number of results to display
• images – option to include embedded images and also set the display size
• tweetId – set the twitter username for share links

The Twitter Feed Plugin Components

There are several functions we need to use that will make up the complete twitter feed plugin:

• The AJAX function that will call the Twitter API and dynamically generate the feed items.
• A function to search the twitter text and generate clickable links from URLs.
• A function to generate the reply, retweet and favourite share links for each tweet.
• A function that will convert the tweet date to a relative “time since” date.

The Plugin Code

We are using a standard jQuery pattern to create the plugin. See comments in plugin code for more information on each section:

(function($){

	TwitterFeedObject = function(el, options) {
		this.create(el, options);
	};

	$.extend(TwitterFeedObject.prototype, {

		create: function(el, options) {

			// Set the default options
			this.defaults = {
				id: '', // enter username, twitter list ID or search keyword
				retweets: true, // include/exclude retweets
				replies: true, // include/exclude replies
				avatar: true, // include/exclude user avatar
				results: 10, // number of results to display
				images: '', // large w: 786 h: 346, thumb w: 150 h: 150, medium w: 600 h: 264, small w: 340 h 150
				tweetId: '' // twitter username for share links
			};

			var o = $.extend(true,this.defaults,options);

			// Add ul tag to target element
			$(el).append('<ul class="stream"></ul>');

			// Set Twitter API url
			var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name='+o.id+'&count='+o.results+'&include_entities=true&include_rts='+o.retweets+'&exclude_replies='+ o.replies+'&callback=?';

			// Check if search feed & change API url if true
			var cq = o.id.split('#');
			if(cq.length > 1){
				var rts = o.retweets == false ? '+exclude:retweets' : '' ;
				url = 'https://search.twitter.com/search.json?q='+encodeURIComponent(cq[1])+rts+'&rpp='+o.results+'&include_entities=true&result_type=mixed';
			}

			// jQuery AJAX call to Twitter API
			jQuery.ajax({
				url: url,
				cache: true,
				dataType: 'jsonp',
				success: function(a){

					if(cq.length > 1){a = a.results} ;

					$.each(a, function(i,item){
						if(i < o.results){
							var html = '<li>',
								d = item.created_at,
								user = cq.length > 1 ? item.from_user : item.user.screen_name,
								name = cq.length > 1 ? item.from_user_name : item.user.name,
								avatar = cq.length > 1 ? item.profile_image_url : item.user.profile_image_url ;

							html += o.avatar == true ? '<a href="http://www.twitter.com/'+user+'" class="thumb"><img src="'+avatar+'" alt="" /></a>' : '' ;
							html += '<a href="http://www.twitter.com/'+user+'" class="user"><strong>'+name+'</strong> @'+user+'</a>';
							html += linkify(item.text);

							// Show images if images: true
							if(o.images != '' && item.entities.media){
								$.each(item.entities.media, function(i,media){
									html += '<a href="'+media.media_url+'" class="twitter-image"><img src="'+media.media_url+':'+o.images+'" alt="" /></a>';
								});
							}

							// Add share links
							html += '<span class="section-share">'+shareLink(item.title,item.id_str,o.tweetId)+'</span>';

							// Get time since
							d = d != '' ? html += '<span class="date">'+nicetime(new Date(d).getTime())+'</span></li>' : '' ;
						}

						// Add twitter feed items to stream
						$('.stream',el).append(html).slideDown();
					});
				},
				complete: function(){

					// Code to open new popup window for share links + open other links in new browser tab
					$('.stream a',el).click(function(e){
						if($(this).parent().hasClass('section-share')){
							var u = $(this).attr('href');
							window.open(u,'sharer','toolbar=0,status=0,width=626,height=436');
							return false;
						} else {
							if(external){this.target = '_blank';}
						}
					});
				}
			});
		}
	});

	$.fn.dcTwitterFeed = function(options, callback){
		var d = {};
		this.each(function(){
			var s = $(this);
			d = s.data("twitterfeed");
			if (!d){
				d = new TwitterFeedObject(this, options, callback);
				s.data("twitterfeed", d);
			}
		});
		return d;
	};

	// Function to convert URLs in twitter feed text to links
	function linkify(text){
		text = text.replace(
			/((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,
			function(url){
				var full_url = !url.match('^https?:\/\/') ? 'http://' + url : url ;
				return '<a href="' + full_url + '">' + url + '</a>';
			}
		);
		text = text.replace(/(^|\s)@(\w+)/g, '$1@<a href="http://www.twitter.com/$2">$2</a>');
		text = text.replace(/(^|\s)#(\w+)/g, '$1#<a href="http://twitter.com/search/%23$2">$2</a>');
		return text;
	}

	// Creates share links
	function shareLink(st,sq,tweetId){
		var s = '';
		var intent = 'https://twitter.com/intent/';
			s = '<a href="'+intent+'tweet?in_reply_to='+sq+'&via='+tweetId+'" class="share-reply"></a>';
			s += '<a href="'+intent+'retweet?tweet_id='+sq+'&via='+tweetId+'" class="share-retweet"></a>';
			s += '<a href="'+intent+'favorite?tweet_id='+sq+'" class="share-favorite"></a>';
		return s;
    }

	// Function to convert date to relative date
	function nicetime(a){
		a = $.browser.msie ? a.replace(/(\+\S+) (.*)/, '$2 $1') : a ;
		var d = Math.round((+new Date - a) / 1000), fuzzy;
		var chunks = new Array();
			chunks[0] = [60 * 60 * 24 * 365 , 'year'];
			chunks[1] = [60 * 60 * 24 * 30 , 'month'];
			chunks[2] = [60 * 60 * 24 * 7, 'week'];
			chunks[3] = [60 * 60 * 24 , 'day'];
			chunks[4] = [60 * 60 , 'hr'];
			chunks[5] = [60 , 'min'];
		var i = 0, j = chunks.length;
		for (i = 0; i < j; i++) {
			s = chunks[i][0];
			n = chunks[i][1];
			if ((xj = Math.floor(d / s)) != 0)
				break;
		}
		fuzzy = xj == 1 ? '1 '+n : xj+' '+n+'s';
		if (i + 1 < j) {
			s2 = chunks[i + 1][0];
			n2 = chunks[i + 1][1];
			if ( ((xj2 = Math.floor((d - (s * xj)) / s2)) != 0) )
				fuzzy += (xj2 == 1) ? ' + 1 '+n2 : ' + '+xj2+' '+n2+'s';
		}
		fuzzy += ' ago';
		return fuzzy;
    }

})(jQuery);

To make it easy to use copy the above plugin code into a file and name it jquery.twitter.feed.js.

Using Your jQuery Twitter Feed Plugin

1. Add the jQuery Library & Twitter Plugin

Add the plugin link & link to the jquery library to the document head as you would do with any other plugin:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.twitter.feed.js"></script>

2. Initialise the jQuery Twitter Feed Plugin

The minimum options required are the id for your twitter feed and the tweetId for the share links. There are 2 options for the id:

• To show a feed from a username just enter the username (without the “@”) – e.g. “designchemical”
• To show a feed for a search enter “#” followed by the the search term – e.g. “#designchemical”

To initialise the plugin add the following code in your document head after the links to the plugin file and the jQuery library:

<script type="text/JavaScript">
    $(document).ready(function() {
        $('#twitter-feed').dcTwitterFeed({
            id: '#designchemical',
            tweetId: 'designchemical'
        });
    });
</script>

To change any of the default options – e.g. disable replies, retweets & avatar image, show 20 feed items and include any embedded images:

<script type="text/JavaScript">
    $(document).ready(function() {
        $('#twitter-feed').dcTwitterFeed({
            id: '#designchemical',
            tweetId: 'designchemical',
            retweets: false,
            replies: false,
            avatar: false,
            results: 20,
            images: 'small'
        });
    });
</script>

3. The Twitter Feed CSS

The CSS is fairly easy – the feed items, which are returned as an unordered list plus styling for share links and the avatar image:

ul.stream {
	display: none;
}
ul.stream li {
	background: #fff;
	font: normal 13px/18px Arial, sans-serif;
	color: #333;
	position: relative;
	padding: 10px;
	margin: 0 0 2px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
ul.stream li a {
	color: #009999;
	text-decoration: none;
}
ul.stream li a:hover {
	text-decoration: underline;
}
ul.stream li .thumb img {
	padding: 1px;
	background: #fff;
	border: 1px solid #ececec;
	float: left;
	margin: 3px 7px 5px 0;
}
ul.stream li .user {
	display: block;
	font-size: 12px;
	color: #999;
}
ul.stream li a.user:hover {
	color: #999;
	text-decoration: none;
}
ul.stream li strong {
	font-size: 13px;
	color: #333;
}
ul.stream li a:hover strong {
	color: #009999;
	text-decoration: underline;
}
ul.stream li .twitter-image img {
	padding: 1px;
	background: #fff;
	border: 1px solid #ececec;
	clear: both;
	margin: 5px 0;
}
ul.stream li .date {
	display: block;
	clear: both;
	margin: 5px 0 0 0;
	line-height: 12px;
	color: #666;
	font-size: 11px;
	font-style: italic;
}
ul.stream li .section-share {
	bottom: 10px;
    right: 10px;
    position: absolute;
	z-index: 2;
}
ul.stream li .section-share a {
	display: block;
	width: 16px;
	height: 16px;
	float: left;
	margin: 0 2px 0 0;
	background: url(images/share.png) no-repeat 0 0;
}
ul.stream li .section-share a.share-retweet {
	background-position: 0 -16px;
}
ul.stream li .section-share a.share-favorite {
	background-position: 0 -32px;
}
ul.stream li .section-share a.share-reply:hover {
	background-position: -16px 0;
}
ul.stream li .section-share a.share-retweet:hover {
	background-position: -16px -16px;
}
ul.stream li .section-share a.share-favorite:hover {
	background-position: -16px -32px;
}

For the share links we have used an image sprite (see download files).

4. The HTML

The only HTML required in your page is an empty div tag with the ID set to the same as that used in the initalisation code – e.g. twitter-feed:

<div id="twitter-feed"></div>

Just place the above tag in your page between the body tags where you want the feed to appear.

Show Multiple Feeds Per Page

The plugin can show multiple feeds per page. To do this just multiple div tags with unique IDs and enter the initialisation code – e.g:

jQuery Code

<script type="text/JavaScript">
$(document).ready(function() {

    $('#twitter-feed-1').dcTwitterFeed({
		id: '#designchemical',
		tweetId: 'designchemical'
	});

	$('#twitter-feed-2').dcTwitterFeed({
		id: 'MCFC',
		tweetId: 'designchemical',
		results: 20,
		images: 'small'
	});
});
</script>

HTML Code

<div id="twitter-feed-1"></div>
<div id="twitter-feed-2"></div>

View jQuery Twitter Feed Plugin DemoDownload Demo Source Files

The latest updates to our popular WordPress Social Network Tabs Plugin & jQuery Social Media Tabs Plugin, versions 1.6.1, now include facebook and twitter share links to help promote your social network posts and boost your traffic!

The latest versions of the plugins also include 2 new feed options; Pinterest boards & Flickr Group Feeds bringing the total number of feed options to 70 across 17 social networks.

Additions available with versions 1.6.1

• Share feed items via facebook
• Share feed items via twitter
• Retweet link on twitter posts
• Reply link on twitter posts
• Favorite link on twitter posts
• Show feed from pinterest boards
• Option to show twitter images & select image size
• Show feed from flickr groups
• Option to hide on mobile devices (< 400px) - WordPress version

Purchase WordPress Social Network Tabs From Codecanyon – only $12

WordPress Social Network Tabs Plugin

Purchase Jquery Social Media Tabs From Codecanyon – only $7

jQuery Social Media Tabs Plugin

With the recent update to WordPress 3.5 the following free and premium plugins have been updated to ensure that all of our WordPress plugins will continue to work with the latest version of WordPress:

WordPress Social Network Tabs – v 1.6.0.2

http://www.designchemical.com/blog/index.php/premium-wordpress-plugins/premium-wordpress-plugin-social-network-tabs/

WordPress Social Share Buttons – v 1.1.1

http://www.designchemical.com/blog/index.php/premium-wordpress-plugins/wordpress-social-share-buttons/

Top Social Share Posts – v 1.4.1

http://www.designchemical.com/blog/index.php/premium-wordpress-plugins/premium-wordpress-plugin-top-social-share-posts/

Slick Social Share Buttons – v 2.4.7

http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/

The latest update to the jQuery Social Stream Plugin, version 1.4.2, includes many new additions to make the social network streams more interactive, help promote your social network posts and boost your traffic!

Update now also available for WordPress Social Stream Plugin – version 1.4.3

In addition to 3 new feed options; show Facebook page galleries, Pinterest boards & Youtube playlists, the plugin now also includes share links for both facebook and twitter on each social network post plus retweet, reply and favourite links on all twitter posts.

This latest version of jQuery Social Stream now supports 15 social networks with a total of 60 feed options.

Additions available with version 1.4.2

• Show feeds from pinterest boards
• Show feeds from facebook galleries including latest comments
• Show feeds from youtube playlists
• Share feed items via facebook
• Share feed items via twitter
• Retweet link on twitter posts
• Reply link on twitter posts
• Favorite link on twitter posts
• Option to show twitter images + twitter image size options
• Option to show twitter retweets & replies

Updates available with version 1.4.2

• No access token required for Instagram tag searches
• Add count parameter to Instagram URL
• Change item selector for jQuery isotope
• Facebook relative links
• Add max limit of 50 to youtube feeds

View The Latest Social Network Wall Demo

jQuery Social Stream Plugin

Purchase From Codecanyon – only $7

jQuery Social Stream Plugin

Version 1.6 of jQuery Social Media Tabs and WordPress Social Network Tabs now includes the Instagram API, bringing the total number of supported networks to 17 with 49 feed options!

Instagram Tab Feed Options

• Show an Instagram user feed
• Search Instagram tags
• Show an Instagram Location ID feed
• Search by latitude/longitude + distance
• Show post likes with user thumbnail avatar
• Show latest comments
• Select image size – 306 px, 150 px or 612 px

In addition to the Instagram update the plugin now includes the ability to display twitter search feeds and options to disable both retweets and twitter replies.

View The Plugin Demos

• jQuery Social Media Tabs
• Social Network Tabs for WordPress

Purchase From Codecanyon

• jQuery Social Media Tabs
• Social Network Tabs for WordPress

Our latest premium WordPress plugin is a WordPress implementation of our successful jQuery Social Share Buttons plugin.

The plugin adds jQuery social share buttons to WordPress in a stylish floating panel, toolbar or display inline. The plugin supports 10 social network share buttons + bonus print & email buttons.

For more information and plugin demos go to the WordPress Social Share Buttons Demo Site or download via codecanyon.

Supported Social Networks

• Twitter
• Facebook
• Google +1
• LinkedIn
• Delicious
• Digg
• Pinterest
• Stumbleupon
• Buffer
• Xing

Check Out Our Full Range of Premium WordPress & Jquery Plugins:

• WordPress Social Stream
• WordPress Social Network Tabs
• WordPress Social Share Buttons
• WordPress Top Social Share Posts
• jQuery Social Media Tabs
• jQuery Social Share Buttons
• jQuery Social Stream

Version 1.4 of jQuery Social Stream and WordPress Social Stream now includes the Instagram network. With the addition of the Instagram API both plugins now support a total of 15 social networks with 37 feed options!

Instagram Feed Options

• Show an Instagram user feed
• Search Instagram tags
• Show an Instagram Location ID feed
• Search by latitude/longitude + distance
• Show post likes with user thumbnail avatar
• Show latest comments

The jQuery Social Stream plugin and the WordPress version can handle multiple Instagram searches and feeds in a single stream.

Display your streams as a rotating feed widget or a jQuery isotope network wall – see demo of social network wall showing Instagram search + user feed.

View The Plugin Demos

• jQuery Social Stream
• WordPress Social Stream

Purchase From Codecanyon

• jQuery Social Stream
• WordPress Social Stream

Xing social share button is now included in our popular jQuery Social Share Buttons Plugin. The Xing button is available in 3 sizes – vertical with count, horizontal with count and horizontal with no count.

Xing Hovercard Statistics

Xing also offer an extra feature with their share buttons – a hovercard, which shows the popularity of your website content with additional statistics such as the total number of clicks, likes and comments for the link on XING.

The jQuery Social Share Buttons Plugin now includes 10 social network share buttons:

• Twitter
• Facebook
• Google +1
• LinkedIn
• Delicious
• Digg
• Pinterest
• Stumbleupon
• Buffer
• Xing
• Print Button
• Email Button

For more information go to the plugin demo site – jQuery Social Share Buttons Plugin or purchase directly from Codeanyon.

Version 1.5 of both the jQuery Social Media Tabs plugin and the WordPress Social Network Tabs plugin now include the option to add a LinkedIn tab showing up to 4 LinkedIn plugins:

Member Profile Plugin

A personal profile widget displaying your LinkedIn profile image, name, current position, location plus a link to your main profile page. Also includes the option to show links to related profiles.

Company Profile Plugin

A company profile widget showing the company name, logo, summary text and “follow” button with an additional option to show company employees in the viewers network.

Company Insider Plugin

A more detailed company plugin, which includes tabs to show employees in the viewers network, new hires and promotions/changes.

Jobs You May Be Interested In

A widget showing a list of jobs that may be interesting to a viewer – this can be set to either show jobs from a specific company or a general list from the linkedin network.

The latest versions of the plugins, which support 16 social networks with a total of 41 different feed options are now available for download at codecanyon:

jQuery Social Media Tabs

Social Network Tabs For WordPress

The Tumblr feed includes specific styling and formatting for all tumblr content types – photo, video, regular, quote, audio, conversation & link, including an inline video player for video posts and options for setting thumbnail and video player width.

Other updates to both plugins include:

• Added option to show tweets from a twitter list
• Option to display twitter profile avatar image in each tweet
• Option to display complete text & images for both facebook and RSS feed posts

Latest versions now available from codecanyon

• Social Network Tabs For WordPress
• jQuery Social Media Tabs

Plugin Demo Sites

Social Network Tabs For WordPress

jQuery Social Media Tabs

Starting version 1.2 our popular premium jQuery plugin, jQuery Social Stream, now includes the Tumblr network, bringing the total number of supported networks to 14 with 26 different feed options.

The Tumblr feed includes specific styling and formatting for all tumblr content types – photo, video, regular, quote, audio, conversation & link, including an inline video player for video posts.

Options for the tumblr feed include set thumbnail width, video player width as well as being able to control the feed item content.

jQuery Social Stream can handle multiple, unlimited tumblr profiles in a single stream or create multiple streams per page. Streams can be displayed as a rotating feed widget or a jQuery isotope network wall.

Tumblr version now available from codecanyon or view the live demo site

Go to WordPress Social Stream Demo Site

Combine all of your social network interactions into one single network stream or create a single feed for multiple social network profiles. Display using a filterable jQuery isotope powered Social Network Wall or a rotating feed list!

Includes 13 social networks & 25 feed options:

• Twitter – Latest Tweets
• Facebook – Page Latest Wall Posts
• Google +1 – +1 Latest Posts
• RSS Feed – Latest Posts
• Delicious – Latest Likes
• Stumbleupon – Favorites or Reviews
• Pinterest – Latest Pins
• Dribbble – Latest Shots or Likes
• Youtube – Latest Uploads, Favorites or new subscription videos
• Vimeo – Likes, Videos, Appeared In, Albums, Channels or Groups
• Flickr – Latest Uploads
• last.fm – Loved Tracks, Recent Tracks or Reply Tracker
• Deviantart – Latest Deviations

Check out our full range of premium WordPress and Jquery plugins at codecanyon.

Combine all of your social network interactions into a single network stream or create a single feed for multiple social network profiles. Includes 13 social networks with a total of 24 different feed options.

Using only jQuery, the social stream plugin can be used for ANY website … including WordPress … no PHP required!

View jQuery Social Stream Plugin Demo Site

Plugin Supports 13 Social Networks

• Twitter – Latest Tweets
• Facebook – Page Latest Wall Posts
• Google +1 – Latest +1 Posts
• RSS Feed – Latest Posts
• Delicious – Latest Likes
• Stumbleupon – Favorites or Reviews
• Pinterest – Latest Pins
• Dribbble – Latest Shots or Likes
• Youtube – Latest Uploads or Favorites
• Vimeo – Likes, Videos, Appeared In, Albums, Channels or Groups
• Flickr – Latest Uploads
• last.fm – Loved Tracks, Recent Tracks or Reply Tracker
• Deviantart – Latest Deviations

Social Stream Display Options

Display using rotating feed list or a filterable jQuery Isotope powered Social Network Wall!

Options include setting the stream to display items by date based on total number of days or number of latest feed items from each network.

jQuery Social Media Tabs Plugin Demos

Check out the plugin home page for more details or view the social stream demos:

• Quickstart
• Quickstart – Light Skin
• Using Multiple Profiles
• Custom Output
• Social Network Wall

jQuery Social Stream Plugin is now available from codecanyon.

Go To Social Network Tabs for WordPress Demo Site

Plugin Supports 13 Social Networks with 30 Feed Options

• Twitter – Latest Tweets
• Facebook – Wall Posts
• Facebook – Like Box
• Facebook – Recommendations
• Google +1 – Latest google profile +1
• RSS Feed – Latest Posts
• Delicious – Latest Likes
• Digg – Latest Diggs
• Pinterest – Latest Pins
• Youtube – Latest Uploads or Favorites
• Flickr – Latest Uploads
• last.fm – Loved Tracks, Recent Tracks or Reply Tracker
• dribbble – Latest shots & Likes
• Vimeo – Likes, Videos, Appeared In, Albums, Channels & Groups
• Stumbleupon – Favorites or Reviews

Set up is quick and easy via the user interface in the plugin settings page in WordPress admin:

Plugin Demos

• Quickstart
• Options
• Static Tabs
• Inline Sliding Tabs
• Using Links Shortcode

Purchase from codecanyon

Includes 13 social networks with a total of 30 different feed options – Combine all of your favorite social networks profiles & feeds into slick slide out or static tabs.

jQuery Social Media Tabs gives similar functionality to our WordPress Social Media Tabs Plugin but with even more social networks and can be added to ANY website … including WordPress … no PHP required!

Go To jQuery Social Media Tabs Demo Site

Plugin Supports 13 Social Networks

• Twitter – Latest Tweets
• Facebook – Wall Posts
• Facebook – Like Box
• Facebook – Recommendations
• Google +1 – Latest google profile +1
• RSS Feed – Latest Posts
• Delicious – Latest Likes
• Digg – Latest Diggs
• Pinterest – Latest Pins
• Youtube – Latest Uploads or Favorites
• Flickr – Latest Uploads
• last.fm – Loved Tracks, Recent Tracks or Reply Tracker
• dribbble – Latest shots & Likes
• Vimeo – Likes, Videos, Appeared In, Albums, Channels & Groups
• Stumbleupon – Favorites or Reviews

Each social network tab loaded using AJAX only when required making the plugin very fast loading! Also includes option for auto or manual ticker style rotating content for each social network feed, which gives you unlimited capacity for listing your feed items.

jQuery Social Media Tabs Plugin Demos

Check out the plugin home page for more details or view the social media tabs demos, include the configurable “Create your own demo”:

• Quickstart – default plugin options
• Create your own demo
• Static Tabs
• Inline Sliding Tabs
• Using External Links

jQuery Social Media Tabs is now available from codecanyon.

The new Premium jQuery Social Share Buttons plugin uses jQuery to quickly and easily add all of the main social share buttons in a floating panel.

This now gives the same functionality as our WordPress Slick Social Share Buttons Plugin and can be added to ANY website.

Plugin Supports 9 Social Networks

• Twitter
• Facebook
• Google +1
• LinkedIn
• Delicious
• Digg
• Pinterest
• Stumbleupon
• Buffer

The plugin has a range of options giving you full control of location of button panel (top, bottom, left or right) and offset from edge of browser. Select the size of the social media buttons, display order and which buttons to display.

The button panel can be set to open on page load, auto-close, disable floating effects and adjust both the floating and panel sliding animation speeds.

Social Share Buttons Plugin Demos

• Introduction
• Demo 1 – Quickstart
• Demo 2 – Custom Buttons
• Demo 3 – Positioning
• Create a Toolbar
• Purchase From Codecanyon

The latest version of the Social Media Tabs WordPress plugin adds 3 new social network tabs; google plus, pinterest & flickr plus a custom tab for adding your own widgets.

Google Plus Feed

After the shutdown of the google buzz API in November last year the plugin has been without a decent google tab. The latest version finally now includes a google plus feed, using the google plus activity jQuery plugin.

The widget requires a google API key – see plugin project page for more details on how to create your own API key.

Pinterest Latest Pins & Follow Button

Pinterest continues to become more and more popular as a social sharing tool. The new pinterest tab now gives you the ability to list your latest pins with the thumbnail images, description and date it was pinned. The pins are displayed individually in a carousel so there are no restrictions on the number of results.

The pinterest tab also includes the option to add a “Follow Me” button linked to your profile.

Flickr Thumbnails

The third major update to the plugin is a Flickr tab, which you can use to display a gallery of thumbnails from any Flickr User.

Custom Tab

To make the plugin even more flexible we have now added a “custom” tab, which allows you to add your own social network feed or widget.

The custom icon can be set via the plugin options page in admin and the content added to the tab via a shortcode.

Social Media Tabs Plugin

With the new additions the plugin now includes tabs for – Twitter, Facebook, Google Plus, RSS, YouTube, Flickr & Pinterest.

For more information and download go to – Social Media Tabs WordPress Plugin project page.

The latest version of the Slick Social Shares Buttons WordPress Plugin includes a new addition – the Buffer button and an exciting feature addition to the increasingly popular pinterest pinit button.

Buffer Button

Buffer is a social network sharing service, which allows you to add Tweets and Facebook posts to your Buffer account and automatically share that content throughout the day. Let Buffer handle the work maintaining your social network presence, allowing you to concentrate on finding great content!

Check out the Buffer website for more info – ttp://bufferapp.com/.

New Pinterest Image Feature

The new and improved pinterest button for the WordPress slick social share buttons plugin now comes with the option to use a feature, which allows the user to select which image to pin based on all of the available and suitable content on the page.

When the user clicks the “Pin It” button the image thumbnails are shown in a gallery overlay.

The latest version of Slick Social Share Buttons Plugin now gives you the option to use the standard button, which automatically uses the post’s featured image or the new system and give the control to your users. To try out the new button

Both updates are available starting with Slick Social Shares Buttons version 2.4.

Maximising Your Social Network Data

Dont forget to take a look at our latest commercial social network plugin – Top Social Share Posts.

Promote both your content and increase your social network activity by showing your most popular posts based on total facebook likes, total number of tweets, pins, diggs, plus ones, etc

Now you can list most popular posts according to social shares/likes.

With full support for Facebook, Twitter, Google +1, Linkedin, Digg, Delicious, Stumbleupon, Reddit & Pinterest it offers a great range of options for promoting both your content and your social networks.

Go to plugin demo & home page or Purchase at Codecanyon.

Top Social Share Posts Demo Pages

• Top Social Share Posts Carousel & Accordion
• Top Post For Each Social Network
• Total Social Share Statistics
• Top Social Posts By Post Type
• Top Social Posts by Category
• Example Using Shortcodes

The plugin includes 2 easy to use widgets:

Top Social Share Posts

• Show top posts by social network.
• Display using built-in jQuery accordion widget or a slick carousel.
• Option to display total share counts for all networks.
• Option to list all share counts for each post.
• Option to include excerpt in post lists.
• Filter by category using the built-in shortcode version.
• Include custom post types and display top custom post shares.

Top Social Share Statistics

• Add a new widget to your site displaying your total shares per network.
• Also includes option to add a grand total for all social shares

Plugin Options & Admin Statistics

• Automatically identifies your custom post types.
• Adds option to include custom post types in the share data & widgets.
• Enable/disable networks via plugin settings.
• Add your own custom social network icons.
• Advanced settings for controlling data updates and caching.
• Option to cache widget results to minimize loading time
• Limit age of posts included in social share counts.
• “Update All” button for mass update of share counts.
• Color pickers and custom CSS field for customising front-end widgets.
• Preview widgets in plugin options page.
• Plugin includes full documentation & inline admin help.
• Social statistics page in admin provides complete overview of all post data.
• Sort by date, title or social network & filtter by category or post type
• View data using jQuery data heatmap.
• Update individual post share data via statistics table.

Top Social Share Posts finally adds the ability to list your most popular posts according to social network shares/likes.

Top Social Share Posts now available from Codecanyon.

Go to plugin demo & home page.

Reddit button options include either a horizontal button with/without count or a vertical button with count. Reddit is also included in the plugin’s Social Statistics page, which provides a summary of share button counts for all pages, posts, category pages and even the site’s home page.

The Reddit button is available starting with version 2.3. For more info check out the Slick Social Share Buttons Plugin page.

Caprice is a modern, elegant and clean WordPress theme, suitable for businesses, portfolios and personal blogs. Added features include Social media pages/shortcodes, which allow you to create content pages directly from your twitter, flickr, dribbble, last.fm or tumblr feeds. Combined with the built-in social share button features and facebook API widgets, Caprice offers excellent opportunities to integrate with your social networks.

70+ Built-In Shortcodes & jQuery Features

Caprice is jQuery enhanced and includes over 70 built-in shortcodes with a shortcode generator, which make creating any layout easy.

The theme also includes jQuery masonry portfolios, a video/image showcase which is created automatically from your portfolio, evolution sliders with 10+ effects as well as a 3D Flash slider, 3 or 4 column elegant pricing table, option to use Facebook Comments, rich styling elements such as buttons, tabs, toggle, pricing table, testimonials, typography, service icons etc, and much more …

Check out the Caprice live preview site, including online style switcher or purchase from mojo themes.

Caprice WordPress Theme Features

• WordPress 3.0+ with menus & featured images
• A clean & flexible design
• 4 portfolio layouts
• Slick jQuery masonry portfolio with category filters
• Showcase feature – single page portfolio with individual sliders
• Easy color change via the options panel
• 70+ shortcodes
• Built-in shortcode generator for text editors
• 19 header fonts options using @font-face
• Custom slider posts with drag/drop order
• 2 different slider types including evolution & 3D Flash slider
• Shortcodes for social buttons – facebook, twitter, linkedin, digg, stumbleupon, google plus one & pin it button
• Add Twitter, flickr, Dribbble, Last.fm or Tumblr feeds
• Sidebar generator
• Contact form generator with jQuery validation and AJAX submit
• jQuery PrettyPhoto lightbox gallery
• Rich styling options: Tabs, toggle, tables, Buttons, boxes, images, Lists, Pricing Table, Testimonials, Typography elements & a complete Service icons set
• Layered and grouped PSDs included
• Valid xHTML
• Thorough help documentation & technical support

Live Preview Site

http://themes.designchemical.com/#caprice

Purchase Caprice WordPress Theme

Purchase from mojo themes

In addition to the option to add either a horizontal button or a vertical button with count, delicious is also included in the Social Statistics page, which is one of the relatively newer features added to the plugin.

Social stats gives a complete breakdown of all share button counts for both posts and pages. The statistics can either be viewed as a table of share buttons, text counts or text counts with a data heat map to help show which posts are the current hot favourites.

The Delicious button is available starting with version 2.2. For more info check out – Slick Social Share Buttons Plugin.

Zeences WordPress Portfolio & Business theme is our latest premium template with dark and light skin options and includes a full-screen background image slideshow option. Zeences also includes portfolio posts, a custom system to create your own image or video sliders and a slick portfolio page layout using jQuery masonry.

This jQuery enhanced template contains a useful collection of custom shortcodes, an online shortcode generator and thorough help documentation, making it easy to create high quality, interactive and feature rich pages or posts.

Check out the Zeences live preview site, including online style switcher or purchase from themeforest.

Zeences WordPress Theme Features

• WordPress 3.0+ with menus & featured images
• Full-screen background image slideshow feature
• Slick jQuery masonry portfolio with category filters
• Both a light & dark theme style
• Fully customised font colors via options page color pickers
• 14 header fonts options using @font-face
• Custom slider posts with drag/drop order
• 2 different slider types including video slider
• Over 60 custom shortcodes with built-in shortcode generator
• Shortcodes for social buttons – facebook, twitter, linkedin, digg, stumbleupon, google plus one & pin it button
• Sidebar generator
• Contact form generator with jQuery validation and AJAX submit
• jQuery PrettyPhoto lightbox gallery
• jQuery enhanced
• Layered and grouped PSDs for both light and dark styles
• Valid xHTML
• Full-width page template
• 2-column page template
• Thorough help documentation & technical support

Live Preview Site

http://themes.designchemical.com/#zeences

Purchase Zeences WordPress Theme

Purchase from themeforest

The following are examples of useful code snippets that can be used – some of the examples use standard javascript functions and are not specific to jQuery:

1. Get The Current Page URL

A very simple snippet, which stores the current page URL in a variable:

// Retrieve current URL
var url = document.URL;

2. Get The Current Root URL

A very simple snippet, which stores the root URL in a variable:

// Retrieve root URL
var root = location.protocol + '//' + location.host;

3. Get A URL Hash Parameter

Retrive a hash parameter and store in a variable:

// Get # parameter
var param = document.URL.split('#')[1];

4. Change Browser Address Bar Hash Parameter

In the example below we replace the hash parameter, which we get from the clicked link. Useful for adding bookmarking capabilities when using AJAX:

// update browser address bar URL
$('a.demo-link').click(function(){
	var hash = $(this).attr('href');
	location.hash = hash;
});

5. Redirect Using Javascript

If you need to redirect a page using jQuery:

// Redirect - insert required URL
window.location.href = "http://designchemical.com/";

6. Get Querystring Parameters

If the URL contains a querystring with multiple parameters the following snippet will parse each parameter and store the array as a variable:

var vars = [], hash;
	var q = document.URL.split('?')[1];
	if(q != undefined){
		q = q.split('&');
		for(var i = 0; i < q.length; i++){
			hash = q[i].split('=');
			vars.push(hash[1]);
			vars[hash[0]] = hash[1];
		}
}

To use any of the parameters you can access the value using the parameter name. E.g. if the URL contains the querystring “?a=3&b=2&c=1″ you can access the value for “a” using:

// Will alert the value of parameter a
alert(vars['a']);

7. Highlight Current Menu Item

Rather than manually modify navigation menus to add an “active” class to the current page we can use jQuery to identify which link contains the current URL:

var url = document.URL;
$('#menu a[href="'+url+'"]').addClass('active');

8. Check If Link Contains External URL

The following snippet will check if a clicked link contains a URL to an external web page and if so, open in a new browser window:

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

Add more excitement to data tables using jQuery and conditional formatting to generate flexible data “heat maps”.

Long tables of numbers are never fun to look at and when presenting this kind of data on the web, where attention spans are already at their limits, you need to be able to present the highlights as quickly as possible.

Data heat maps provide the perfect way of taking ordinary data and creating something more visually appealing and informative.

jQuery Data Heat Map Demo

Download tutorial source files

Tutorial Objectives

To create our heat map in a way that is flexible enough to cover any range of values, there are several key components to our jQuery code that we need to consider:

• Capture and statistically analyze all data points
• Have a method of then grouping the data and being able to identify what formatting should be applied
• Dynamically generate the CSS to be used for each group to create a heat map style effect
• Apply the correct CSS to each data point

For this tutorial we will be using a random table of numbers and the formatting will be applied based on each value as a % of the largest value.

The Basic HTML

The complete table can be found on the demo page. The HTML below gives the basic table structure, showing one row of data and the CSS classes we will be using:

<table cellpadding="0" cellspacing="0" border="0" class="heat-map">
    <thead>
        <tr>
		    <th class="first">Title</th>
			<th>data 1</th>
			<th>data 2</th>
			<th>data 3</th>
			<th>data 4</th>
			<th>data 5</th>
			<th class="last">data 6</th>
		</tr>
    </thead>
	<tbody>
	    <tr class="stats-row">
		    <td class="stats-title">Wanda</td>
			<td>25</td>
			<td>55</td>
			<td>26</td>
			<td>19</td>
			<td>39</td>
			<td>21</td>
		</tr>
	</tbody>
</table>

The jQuery Code

1. Capture and analyze the data

The first thing we need to do is find out the largest value within the data range. To do this we use fairly simple but useful code to create an array of all data points and then return the maximum value:

<script type="text/JavaScript">
$(document).ready(function(){

	// Function to get the max value in an Array
    Array.max = function(array){
        return Math.max.apply(Math,array);
    };

	// Get all data values from our table cells making sure to ignore the first column of text
	// Use the parseInt function to convert the text string to a number

    var counts= $('.heat-map tbody td').not('.stats-title').map(function() {
        return parseInt($(this).text());
    }).get();

	// run max value function and store in variable
	var max = Array.max(counts);

});
</script>

2. Group data points

For this tutorial we have already decided that we will use % of each value from max value. We do this so that we can find exactly where the data point is positioned on a scale of 1 – 100. This is the critical part in creating the heat map as we will then use this scale to dynamically generate the CSS styles

100 is probably a little excessive but is an easy number to work with for the tutorial. You can obviously adjust this number to suit your data and style of heat map.

We only want to use integers so we also include some additional rounding of the results

n = 100; // Declare the number of groups

// Loop through each data point and calculate its % value
$('.heat-map tbody td').not('.stats-title').each(function(){
	var val = parseInt($(this).text());
	var pos = parseInt((Math.round((val/max)*100)).toFixed(0));
});

The above code is not yet complete since we will add the actual formatting into the same loop but have broken it down to explain how we create each step.

3. Dynamically generating the heat map styles

To create the heat map effect we are basically going to use background colour.

Technically there is no restriction on how you apply the styles and background colour is only one option. The code is fairly flexible and with some minor adjustments can be applied to font size, container size, background image, etc.

Colour is easy because we can directly calculate each colour value between 2 defined colours – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate colour we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.

// Define the ending colour, which is white
   xr = 255; // Red value
   xg = 255; // Green value
   xb = 255; // Blue value

// Define the starting colour #f32075
   yr = 243; // Red value
   yg = 32; // Green value
   yb = 117; // Blue value

// Calculate a specific colour point
// pos - calculated in the earlier code identifies where on the scale the data point is

red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0));
green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0));
blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0));

// Once we have our RGB values we combine them to create our CSS code
clr = 'rgb('+red+','+green+','+blue+')';

4. Apply the heat map styles to each data point

Finally we apply the new RGB value by setting the background colour of the table cell.

$(this).css({backgroundColor:clr});

We combine steps 2, 3 & 4 so that this is all being carried out within the same loop.

The Complete jQuery Code

The code below shows all 4 steps combined to create the complete heat map function:

<script type="text/JavaScript">
$(document).ready(function(){

	// Function to get the max value in an Array
    Array.max = function(array){
        return Math.max.apply(Math,array);
    };

	// Get all data values from our table cells making sure to ignore the first column of text
	// Use the parseInt function to convert the text string to a number

    var counts= $('.heat-map tbody td').not('.stats-title').map(function() {
        return parseInt($(this).text());
    }).get();

	// run max value function and store in variable
	var max = Array.max(counts);

	n = 100; // Declare the number of groups

    // Define the ending colour, which is white
    xr = 255; // Red value
    xg = 255; // Green value
    xb = 255; // Blue value

    // Define the starting colour #f32075
    yr = 243; // Red value
    yg = 32; // Green value
    yb = 117; // Blue value

    // Loop through each data point and calculate its % value
    $('.heat-map tbody td').not('.stats-title').each(function(){
	    var val = parseInt($(this).text());
	    var pos = parseInt((Math.round((val/max)*100)).toFixed(0));
		red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0));
		green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0));
		blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0));
		clr = 'rgb('+red+','+green+','+blue+')';
    });
});
</script>

To completely change the look of the heat map all it requires is to change the start colour and end colour RGB values!

Check out the demo page for more examples – jQuery Data Heat Map Demo or Download the tutorial source files

The WordPress Plugin Slick Social Share Buttons now includes live social statistics, giving you complete summaries of all of your posts, pages and category page share totals for each social media button.

Features for the social statistics include:

• View home page, posts, pages or category page social metrics
• Filter posts by category
• Order results by post date or alphabetically by post/page title
• Select number of URLs to display per page
• Display total share counts as active share buttons or text
• Total counts of all shares for each website page
• Total counts for each button type across each category

The new statistics page allows you to quickly and easily see your best performing posts and pages.

Check out the Slick Social Share Buttons plugin project page for more information and download links. Social Stats is available starting with version 2.0 of the plugin.

After requests from many users, our popular WordPress plugin Slick Social Share Buttons now includes the “Pin It” social media share button developed for pinterest.com.

Pinterest is a fast growing social share website, which allows its users to create online “pinboards” to organize and share theme based collections of images and descriptions as you browse the internet.

Especially popular with creative types, the pin it button offers yet another interesting way of making it easier for your visitors to share your content and grow your traffic.

The “Pin It” button is ideal for very visual websites such as photography and portfolio style sites and also product catalogs – great for online stores!

As with the other buttons on the Slick Social Share plugin, which includes the tweet button, google plus one, google buzz, facebook like, linkedin, stumbleupon and digg, the Pin It button is available in 3 sizes and includes the option of showing a count of the total number of pinterest.com followers for each specific page.

The “Pin It” button is available starting with version 1.4 – check out the WordPress Slick Social Share Buttons plugin for more information.

Updated 27th February 2013

Add a facebook like box, twitter feed with follow button, rss feeds, flickr gallery, pinterest pins, YouTube subscription with embedded video and google +1 social network profiles in a static or slide out tabbed widget.

Compatible with Twitter API v1.1

Premium Plugin – Social Network Tabs for WordPress

We now have a more advanced version of the social media tabs plugin, which includes tabs for 17 different social networks and 70 feed options. To check out this plugin go to – Social Network Tabs for WordPress.

WordPress Social Stream

If you are looking for something similar we also have our WordPress Social Stream plugin, which combines all network feeds into one single stream! Display this either as a rotating feed in your sidebar or a unique jquery isotope powered network wall.

Non-WordPress Version?

If you are looking for a non-Wordpress version that can be used in ANY website see our jQuery social media tabs premium plugin.

Plugin Options

The plugin has a range of options giving you control of position of social media tabs panel, display order for tabs, the default profile to display on page load and whether to show or hide the the sliding panel on page load.

The plugin uses widgets to add the tabs to the website pages and can handle mulitple media tabs per page, allowing you to add several different profiles for each tab type.

Download Social Media Tabs plugin

http://wordpress.org/extend/plugins/social-media-tabs/

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `social-media-tabs` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Configure the plugin options via the “Social Media Tabs” menu option in WordPress admin -> Settings

Using The Social Media Tabs Plugin

In order to add social media tabs to your WordPress website you will need a widget area in your theme files.

For slide out tabs location of the actual widget is not important since the plugin automatically sets the position at the side of the browser. For static tabs the widget needs to be located where you would like the tabbed box to appear.

To learn more about adding widget areas to WordPress see our WordPress tutorial – Adding A Widget Area To Your Theme Files.

Social Media Tabs Configuration

Icons

To change the icons used for the facebook, google, rss and twitter tabs enter the full URL to your new icon image in the text boxes. The current active icons will show in the right-hand column.

To return back to using the default social media icons delete the URLs from the text fields.

Disable Default Skin:

Check this box to disable the default skin that comes with the plugin. To use your own styles check the box and add the CSS to your theme’s style sheet. The default CSS file can be used as a template.

Open Links In New Window

Check the box if you wish all links within the media tabs open in a new browser window.

Google +1 Options

• API key – The API Key is required by google in order to access your google feed. For more details on how to create your own API Key refer to our FAQ – Create Your Own Google API Key.

Social Media Tabs Widget

Tabs

Select either a static tabbed box or a slide out tabbed panel

Slider

Direction of sliding animation for tabs – horizontal or vertical.

Width

Width of widget in pixels.

Height

Height of widget in pixels.

Location (for slide out tabs only):

The position of the social media tabs panel in the browser window.

Offset (for slide out tabs only):

Offset allows you to fine tune the positioning by adding the number of pixels that you would like to offset the panel from the edge of the browser window.

Animation Speed (for slide out tabs only):

The speed in milliseconds to open and close the tabbed panel.

The default speed is set to 0.6 secs.

Auto-Close (for slide out tabs only):

If checked, the tabs will automatically slide closed when the user clicks anywhere else in the browser window

Load Open (for slide out tabs only):

If checked, the social media tabs will be displayed open when the page first loads. The tab will still close the panel when clicked.

Tabs

Select the location of each profile type – tabs 1 to 4

Open Tab

Select default tab that will be open when the page first loads.

Facebook Like Box

• Facebook ID – Enter the facebook page ID
• Size – Width & Height of Facebook box in pixels
• Connections – Enter the number of connections to be displayed

For more information on how to get your facebook page ID see our FAQ – How to get your facebook page ID

Google

• Google ID – Enter the google profile ID
• Results – Maximum number of buzz results to show

For more information on how to get your google profile ID see our FAQ – How to get your google profile ID

Twitter

• Widget URL – Enter the Twitter widget URL
• Widget ID – Enter the Twitter widget ID

For step-by-step instructions on how to create your own Twitter Widget ID refer to:
FAQ -> Create Your Twitter Widget ID

RSS

• URL – Enter the RSS Feed URL
• Title – The heading for the RSS feed tab
• Results – The number of feed results to display

YouTube

• Username – Enter your YouTube profile username
• Video ID – To include an embedded YouTube video enter the YouTube Video ID

Flickr

• Username – Enter the User ID of the flickr gallery
• Title – The heading for the Flickr feed tab
• Results – The number of thumbnails to display

Pinterest

• Username – Enter the User name of the pinterest account
• Title – The heading for the Pinterest feed tab
• Results – The number of pins to display

“Custom”

• Title – The heading for the custom tab tab
• Shortcode – Enter the shortcode that will be used to create the content for the custom tab

Frequently Asked Questions

Check out our Frequently Asked Questions for Social Media Tabs.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please check previous comments and FAQ for further information/tips.

For plugin customisations or additional support please contact us for a quotation.

Download Social Media Tabs plugin

http://wordpress.org/extend/plugins/social-media-tabs/

Feedback

If you find this plugin useful please take the time to rate it at wordpress.org.

Screenshots

Example of vertical sliding social buttons panel

Example of social media tabbed box

Other Social Media/Network Plugins

If you like Social Media Tabs then why not try out our other social network WordPress plugins:

Premium Plugin – Social Network Tabs for WordPress

Combine all of your favorite social networks profiles & feeds into slick slide out or static tabs with Social Network Tabs for WordPress – supports 13 social networks & 30 feed options – see plugin page

Premium Plugin – WordPress Social Stream

Combine all of your social network interactions into one single network stream or create a single feed for multiple social network profiles. Display using a filterable jQuery isotope powered Social Network Wall or a rotating feed list. Supports 15 social networks & 60 feed options – see plugin page

Slick Social Share Buttons

Add facebook, twitter, google +1, linkedin, digg, and stumbledupon social media buttons to your website in either a floating or sliding panel – see plugin page

Floating Tweets

The Floating Tweets plugin adds a floating, slide out tab containing the latest tweets from any twitter account. The widget is easily set up via any widget panel and can handle multiple twitter feeds per page – see plugin page

Updates

Version 1.5 27th February 2013

• Updated: Twitter tab to use Twitter API v1.1

Version 1.4.3 20th October 2012

• Added: Code to reload jquery plugins if overwritten
• Edited: Change plugin path to use plugins_url()

Version 1.4.1 1st September 2012

• Updated: Redeclare class name

Version 1.4

• Added: Caching option for tab results

Version 1.3 – 17th February 2012

• Added: Google Plus feed
• Added: Flickr feed
• Added: Pinterest feed
• Added: Custom tab option

Version 1.2.3 – 10th November 2011

• Fixed: Bug with twitter layout.

Version 1.2.2 – 7th October 2011

• Fixed: Bug with widget class.

Version 1.2.1 – 25th September 2011

• Added: Twitter follow button and language options
• Fixed: Error with Magpie get_author on google plusone feed.

Version 1.2 – 8th September 2011

• Added: YouTube subscription tab with embedded YouTube video
• Removed: Google +1 feed. +1 feed used a 3rd party API since there is currently no official google +1 API. This feed has unfortunately been stopped.