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 17th February

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.

Premium Plugin – Social Network Tabs for WordPress

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

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.

Demos for WordPress Social Media Tabs Plugin

• Side bar of this page contains a static tabs example
• See slide out tabs demo page

Download Social Media Tabs plugin

Download Social Media Tabs 1.4.1 (34,644)

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.

Twitter Options

• Show Replies – Uncheck the box if you do not wish replies to be included in the list of tweets.
• Language – Select language to use for twitter follow button.

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

• Username – Enter the profile username
• Title – The heading for the Twitter tab
• Tweets – Number of tweets to be displayed
• Follow Button – Select whether to include a twitter follow button above the tweets – also includes option to add count of total twitter followers

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.

Demos for WordPress Social Media Tabs Plugin

• Social Media Tabs Demo

See also the fully working version in our blog section sidebar.

Download Social Media Tabs plugin

Download Social Media Tabs 1.4.1 (34,644)

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 14 social networks & 26 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.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.

In today’s post we are going to look at changing the jQuery code so that the slider menu can handle both vertical and horizontal animation.

Both the HTML and CSS remain exactly the same for this improved version and you can refer to yesterdays tutorial for the details.

View Demo Download Source Code

The jQuery Code

To make the slider handle both directions we only need to add a few changes to our jQuery code:

$(document).ready(function() {

    // Declare variables
    var direction = 'vertical'; // Additional variable which determines the slider direction - vertical or horizontal
    var width = 400;
    var height = 292; // Declare the height of the slider panel
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Set CSS of slide-wrap based on direction
    wrapCss = direction == 'vertical' ? {height: height * numSlides} : {width: width * numSlides} ;

    // Wrap the slides & set the wrap width
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css(wrapCss);

  // Hover function - animate the slides based on index of links
  $('#list-links li a').hover(function(){
	$('#list-links li').removeClass('hover');
	var i = $(this).index('#list-links li a');
	$(this).parent().addClass('hover');

	// Set animation based on direction
	params = direction == 'vertical' ? {'marginTop' : height*(-i)} : {'marginLeft' : width*(-i)} ;
	$('#slide-wrap').stop().animate(params);
  });
});

To change the slider animation set the “dimension” variable to either “horizontal” or “vertical”. Our modified hover function now sets the animation parameters using either the width or the height and creates the slider effect by adjusting the left margin or top margin.

View original post – jQuery Tutorial – Create a jQuery Menu Slider

View Demo Download Source Code

In the following tutorial we are going to go through how to create a jQuery menu slider similar to the one used in our own website’s mega menu navigation (see “WordPress Plugins” menu item).

View Demo Download Source Code

The HTML

The HTML is very simple and basically includes:

• A wrapper (“#menu-slider”) – only used for styling the jquery menu slider
• An unordered list of text links (“#list-links”), which will make up the menu section
• A list of images (“#list-images”) including captions, which will be used to create the slider

<div id="menu-slider">
    <ul id="list-links">
        <li class="hover"><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">Mega Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">Vertical Mega Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">Vertical Accordion Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">jQuery Drill Down iPod Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">jQuery Slick Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">Floating Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">Floating Tweets</a></li>
        <li><a href="/blog/index.php/wordpress-plugin-slick-contact-forms/">Slick Contact Forms</a></li>
        <li class="last"><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">Slick Social Share Buttons</a></li>
    </ul>

    <ul id="list-images">
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">
            <img src="/media/images/mega_1a.jpg" alt="" />
            <span>jQuery Horizontal Mega Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">
            <img src="/media/images/mega_2a.jpg" alt="" />
            <span>jQuery Vertical Mega Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">
            <img src="/media/images/mega_3a.jpg" alt="" />
            <span>jQuery Vertical Accordion Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">
            <img src="/media/images/mega_4a.jpg" alt="" />
            <span>jQuery Drill Down iPod Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">
            <img src="/media/images/mega_5a.jpg" alt="" />
            <span>jQuery Slick Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">
            <img src="/media/images/mega_6a.png" alt="" />
            <span>Floating Menu Widget</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">
            <img src="/media/images/mega_7a.png" alt="" />
            <span>Floating Tweets Widget</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugin-slick-contact-forms/">
            <img src="/media/images/mega_8a.jpg" alt="" />
            <span>Slick Contact Forms</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">
            <img src="/media/images/mega_9a.jpg" alt="" />
            <span>Slick Social Share Buttons</span></a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

On the first link we have added the class “hover” to show the active state for the slider when the page loads.

The Slider jQuery Code

The jQuery is surprisingly simple for the menu slider. Basically it involves 2 parts – creating the slider structure and then the function to handle the hover event when hovering over the list of links:

$(document).ready(function() {

    // Declare variables
    var width = 400; // width of slide - required for animation calculation
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Wrap the slides & set the wrap width - this will be used to animate the slider left/right
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css({width: width * numSlides});

    // Hover function - animate the slides based on index of active link
    $('#list-links li a').hover(function(){
        $('#list-links li').removeClass('hover');
        var i = $(this).index('#list-links li a');
        $(this).parent().addClass('hover');
        $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
    });
});

In the above code we wrap the sliders in a div tag (“#slide-wrap”) – this is what is actually animated to give the sliding effect when hovering over a menu item.

The hover function on the list of links calculates how far to animate the slide-wrap based on the width of the slide and the index number of the active link. The function also adds class “hover” to the active li tag, which we can use to style the menu to indicate the active menu item.

The Menu Slider CSS

Finally some CSS styles to create the required design:

#menu-slider {
background: url(images/bg_menu_slider.png) no-repeat 0 0;
padding: 15px;
margin-bottom: 20px;
}

/* Required */
#list-images, #list-images li {
height: 292px;
width: 400px;
display: block;
}
#list-images {
float: right;
overflow: hidden; /* Required to hide the inactive slides */
border: 1px solid #ccc;
}
#list-images li {
position: relative;
}

#list-images li img {
background: #fff;
position: absolute;
top: 0;
left: 0;
}

/* Image captions */
#list-images li span {
background: url(images/grid1.png) repeat 0 0;
position: absolute;
bottom: 0;
left: 0;
width: 362px;
display: block;
padding: 14px 20px;
font: bold 20px Arial, sans-serif;
color: #fff;
height: 20px;
line-height: 20px;
}

/* Menu text links */
#list-links {
width: 220px;
float: left;
}
#list-links li {
padding: 0 15px 0 0;
}
#list-links li a {
font: normal 12px Arial, sans-serif;
color: #222;
padding: 8px 5px 8px 8px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 13px;
display: block;
}
#list-links li.hover {
background: url(images/tab_current.png) no-repeat 100% center;
}
#list-links li.hover a, #list-links li.hover a:hover {
color: #fff;
background: none;
border-bottom: none;
padding-bottom: 9px;
}
#list-links li.last a {
border-bottom: none;
}

View Demo Download Source Code

Adding Vertical Slider Animation

Check out our follow up post – jQuery Tutorial – Adding Vertical Animation to the Slider Menu.

Add facebook like, twitter tweet button, google +1, linkedin, digg, stumbledupon, delicious, reddit, buffer & pinterest.com pin it social media share buttons in a floating or slide out tab to any WordPress website with the Slick Social Share Buttons plugin.

Slick Social Share Buttons also includes a social statistics page in WordPress admin, which gives you complete share totals for each page, post and category page.

The plugin has a range of options giving you full control of position of button panel, size of social media buttons, display order and whether to show or hide the floating or sticky panel on page load.

The plugin gives you the choice to include the social media share buttons on:

• WordPress Home page
• Posts page if using static home page
• Posts
• Pages
• Category Pages
• Archive Pages

If you are looking for a non-Wordpress version, which can be used on all websites check out our Premium jQuery Social Share Buttons Plugin – allows you to add all of the main social media share buttons to any web page – no PHP required!

Demos for WordPress Social Share Buttons Plugin

Plugin also used on this site – see social share buttons on left. Additional demos include:

• Sliding Vertical Button Panel
• Horizontal Sliding Button Panel
• Top Vertical Slide Down Panel
• Vertical Floating Panel
• Bottom Floating Panel

Download Slick Social Share Buttons plugin

Download Slick Social Share Buttons 2.4.2 (124,418)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `slick-social-share-buttons` 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 Buttons” menu option in WordPress admin -> Social Buttons
4. After selecting the button and plugin options click “Save” to activate the buttons on your WordPress website

Floating/Sticky Tab Options

The type and position of the social button panel can be configured via the plugin settings page in WordPress admin:

Method

Select either a “floating” panel or a sticky “Sliding” tab

Location:

The position of the social button panel in the browser window:

Position From Center

Only available if using floating buttons. Check this if you wish to have the floating button panel positioned from the center of the page as opposed to the edge of the browser. In the text box enter the number of pixels that the panel should be positioned from the center of the screen. Useful for fixed width websites.

If not checked the position of the floating panel will be based on the edge of the browser – i.e. if the browser window is reduced the buttons will move towards the center.

Offset

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.

For sliding tabs only one offset is used:

• Top-left & bottom-left – number of pixels from left edge of browser
• Top-right & bottom-right – number of pixels from right edge of browser
• Left & right – number of px from the top of the browser window

Floating social buttons:

• Top-left & left – pixels from top & pixels from left
• Top-right & right – pixels from top, & pixels from right
• Bottom-left – pixels from bottom & pixels from left
• Bottom-right – pixels from bottom & pixels from right

Direction

Only applicable for “Slide Out” panels. This allows you to select whether the buttons are displayed horizontally or vertically.

Disable Floating Effects

If checked the floating style animation used for the floating buttons panel will be disabled and the panel will now stick to its location in the browser (only applicable to floating button panels)

Floating Speed:

The speed for the floating animation (only applicable for the floating type) in milliseconds – i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.5 seconds use 1500.

The default speed is set to 1.6 secs.

Animation Speed:

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

The default speed is set to 0.6 secs.

Auto-Close:

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

Load Open:

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

Default Skin:

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

Tab Image URL:

To use your own image for the button panel tab insert the full URL for the image into the text field. Leave the box empty if you wish to use the default “Share” tab that comes with the plugin.

Page Display Options

Check the boxes of those pages/posts where you would like the social media buttons to appear:

• WordPress Home page
• Posts page – if using a static home page this will be the page that displays posts
• Posts
• Pages
• Category Pages
• Archive Pages

Excluding Individual Categories

For category pages you also have the option to specify any categories you would like to exclude from showing the social media buttons.

Click the “Show Categories” link to display a complete list of all categories on your website. Clicking on a category will move the category between the include and exclude lists.

Click the “Save” button once you have selected the relevant categories.

If a category is excluded the social media buttons will not appear on the category page or any post assigned to that category.

Social Media Button Options

To disable a button uncheck the checkbox next to the button name.

The size of each button and whether to display a count of total shares for that page can be selected from the dropdown menu. A sample showing an actual, active button with the selected settings will display in the right-hand column.

The buttons will display on the website in the same order that they are listed in the settings page. To change this order drag & drop the buttons and arrange as required.

Current Supported Social Media Share Buttons:

• Twitter Button
• Facebook Like
• Google +1 Button
• Delicious Button
• LinkedIn Button
• StumbleUpon Button
• Digg Button
• Reddit Button
• Buffer Button
• Pinterest “Pin It” Share Button

In addition to the basic settings some Social APIs require additional information.

Twitter

Input your twitter username (minus the ‘@’ symbol) to include this in the tweet.

Facebook

The facebook like button includes the option to use either the iFrame or xfbml methods of adding the button.

If you select the xfbml version you must add the following settings:

• Either a Facebook App ID or a Facebook Admin ID – although both can be entered you only need one for the xfbml version to work.
• Default Facebook Image – enter the URL for an image that will be entered into the facebook open graph meta tag in the event that a post thumbnail is not available for the page.
• Disable Opengraph – if you already have a plugin adding the facebook opengraph settings you can disable this plugin adding an additional set by checking this checkbox.

Pinterest.com Pin It

The pinterest button now has 2 options available (starting version 2.4).

Featured – The image will be set to the “featured” image in the post.

Preview – select this option if you want to let your user select which image to use – clicking the “Pin It” button will bring up an overlay containing thumbnails of relevant media found on the page. The user can click one of these images to select it for posting onto their pinterest board.

Twitter URL Shortening

The plugin includes the option to select URL shortening for twitter from several services:

• Bit.ly
• Digg
• Su.pr
• tinyurl

If using bit.ly the API Key and account login must also be entered. For su.pr these are both optional.

Social Statistics & Metrics

Starting with version 2.0, the Slick Social Share Buttons plugin now includes a statistics page in WordPress admin, which gives you a complete overview and summaries of shares on your posts, pages and category pages.

To access this page go to WordPress Admin -> Social Buttons -> Social Stats

Social Stats options include:

Show

Select whether to show just your home page, posts, pages or category pages. Selecting the pages option will also include the home page results as the first item.

Filter

Available for posts only this lets you filter the results by category.

Order By

Select whether to sort the results by either date or alphabetically by title in either ascending or descending order. Only available for posts or pages.

Display

Show the total shares per URL either as text, text using conditional formatting to give a data “heatmap” or as active share buttons.

Note: selecting the “buttons” option will increase loading time as each button must be generated from the relevant social network site.

Per Page

Adjust the number of results per page. For faster loading time select a lower number per page.

Shortcodes

The plugin includes the feature to add text links within your site content that will open/close the sticky or floating button panel.

Click the links below to open/close the share button panel.

Share – default link, which will toggle the social share button panel open/closed with the link text “Share”

Tell Your Friends – toggle the button panel open/closed with the link text “Tell Your Friends”

Share – open the button panel with the default link text.

Share – close the button panel with the default link text.

Troubleshooting & Frequently Asked Questions

Check out our Frequently Asked Questions for Slick Social Share Buttons.

If you have a problem with the facebook like button try this first – Checking you facebook like button.

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.

Demos for WordPress Social Share Buttons Plugin

Plugin also used on this site – see social share buttons on left. Additional demos include:

• Sliding Vertical Button Panel
• Horizontal Sliding Button Panel
• Top Vertical Slide Down Panel
• Vertical Floating Panel
• Bottom Floating Panel

Download Slick Social Share Buttons plugin

Download Slick Social Share Buttons 2.4.2 (124,418)

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 horizontal sliding social buttons panel

Example of floating panel

Social Statistics admin page

Other Social Media/Network Plugins

If you like Slick Social Share Buttons then try out our other social media WordPress plugins:

Social Media Tabs

Add a facebook like box, google +1, google buzz, twitter and RSS profiles and feeds to any widget area with compact, slick sliding tabs. Plugin has the option of adding the tabbed box to either a slide out panel at the side of your browser window or as a static tabbed box in your widget area – 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 2.4 – 10th February 2012

• Added: Buffer button
• Added: New option for pinterest button to allow user to select the associated image.

Version 2.3 – 22nd January 2012

• Added: Reddit button
• Fixed: Stumbleupon width & height

Version 2.2 – 30th December 2011

• Added: Delicious button
• Removed: Obsolete google buzz button

Version 2.1.4 – 22nd November 2011

• Added: Option to disable facebook opengraph settings

Version 2.1.1 – 22nd October 2011

• Added: Option to show buttons on posts page when using a static home page
• Added: Conditional loading of jquery &CSS files
• Added: Option to view social statistics counts using a data “heatmap”

Version 2.0 – 17th October 2011

• Added: Social statistics admin page
• Added: Only show statistics for active buttons
• Fixed: Total posts when filtering posts by category

Version 1.4.2 – 12th October 2011

• Fixed: Bug with short url meta data

Version 1.4.1 – 7th October 2011

• Update: Pin It button size drop down menu
• Update: Optimize jquery plugin files
• Update: Changed method of retrieving post ID

Version 1.4 – 5th October 2011

• Added: pinterest.com “Pin It” share button

Version 1.3 – 29th September 2011

• Updated: remove additional facebook js script
• Updated: facebook opengraph type meta tags

Version 1.2.9 – 27th September 2011

• Updated: Added local GA social tracking script

Version 1.2.8 – 23rd September 2011

• Updated: Increased title/description text

Version 1.2.7 – 9th September 2011

• Fixed: Tweet home page & category page URL using shortener
• Fixed: Hiding of facebook like comment box

Version 1.2.6 – 4th September 2011

• Added: Option to disable floating button effects

Version 1.2.5 – 25th August 2011

• Added: Option to position floating buttons from center of page

Version 1.2.4 – 19th August 2011

• Added: Google Buzz button

Version 1.2.3 – 14th August 2011

• Added: Ability to exclude specific categories

Version 1.2 – 11th August 2011

• Added: Digg button
• Fixed: Bug with Stumbleupon & Safari

Version 1.1 – 11th August 2011

• Added: Default image for facebook like button Open Graph tags
• Fixed: URL for WordPress home page for Open Graph tags

The plugin offers several options, which allow you to customise the level of security:

• Customise the characters used to replace the “@” symbol and the domain name “.”.
• Select whether to convert reversed text into a human readable email – e.g. moc[dot]niamod[at]sserdda.liame would be rendered as email.address@domain.com
• Automatically add a mailto link

The plugin can also be used on mailto links and will automatically identify when a link is used and convert the href text.

Check out the jQuery Spamless project pages for more information, examples and downloads.

The two new features added to the widget control panel:

Menu Class

In previous versions the accordion menu used the default WordPress class name “menu” when creating the menu structure on the page. Starting with version 2.6 you can now change the menu class name, which gives you more control over the styling and integrating with existing theme’s.

To change the class just enter the new class name into the text box next to the “menu class” option.

Leave the text box blank if you want to continue using the default class of “menu”.

Disable Class

The disable class option now adds the ability to switch off parts of the menu giving you full control over which menu items use the accordion style features.

To add a custom class to a WordPress menu:

Go to Admin -> Appearance -> Menus

Open the “Screen Options” tab in the top-right corner of the admin screen

Check the “CSS Class” box and close the screen options tab

Open the options tab for the menu item that you want to disable and enter a CSS class name in the “CSS Classes (optional)” text field.

Now enter the same CSS class name in the “Disable Class” option in the widget control panel – this will disable the sub-menu from opening and closing and will therefore be open automatically when the page loads. This option only affects the immediate sub-menu level.

For complete instructions, link to demo page and download go to the WordPress jQuery Vertical Accordion Menu plugin page.

The WordPress Floating Tweets plugin adds a floating, sticky tab containing a live twitter feed from any twitter account.

The floating twitter widget is quickly and easily set up via any widget panel and can handle multiple floating twitter feeds per page, each with a different twitter account.

The widget control panel includes many options to customise position and features. The plugin also includes shortcodes for adding external text links, which can open/close the floating panel.

Demo Floating Tweets

WordPress floating tweets plugin demo

Download The Plugin

Download Floating Tweets 1.0.1 (2,751)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `floating-tweets` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the Floating Tweets widget and add to one of your widget areas
4. Set the required settings and save your widget

Useage

In order to use the floating tweet plugin you will need the following:

Widget area

Location of the actual widget is not important since the plugin automatically sets the position based on the control panel settings. You can therefore add the floating twitter tab to an existing widget area in your WordPress theme or create a new widget area.

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

Create Your Floating Tweet Tab

To create your floating tab go to the widget admin page and drag the “Floating Tweets” widget to the desired widget area.

Click “save” to activate the widget.

Configuring Your Widget – Twitter Details

Floating Tweets can easily be customised using the options available in the widget control panel:

Twitter Username:

Enter the user name for the twitter account. If you are unsure of the twitter profile name, this can be found using the URL of the account’s home page.

E.g. Design Chemical’s twitter home page is – http://twitter.com/#!/designchemical – the Twitter username is therefore “designchemical“

Number of Tweets:

Enter the number of tweets to be shown in the floating panel

Show Replies:

If checked the tweet list will also includes replies

Open Links In New Window:

If checked, all links in the tweets will automatically open in a new browser window.

Add Follow Link:

Check the box to add a link at the bottom of the panel, which links back to the username’s account.

Link Text:

Enter the text you would like to appear in the follow link

Configuring Your Widget – Floating Tab

Event:

Open/Close the tab using either ‘hover’ or ‘click’.

Tab Text:

Enter the text that you would like to use for the floating tab.

Width:

Set the width of the floating panel in pixels

Location & Aligment:

The position of the tab in the browser window is determined using its location (either Top or Bottom) and aligment (left or right). The location also changes how the panel slides out:

• Top Left or Top Right – panel slides down
• Bottom Left or Bottom Right – panel slides up

For each one you can also add the number of pixels that you would like to offset the tab by from either the location or alignment in the text box next to the drop down list. The default offset for both location and alignment is 10px.

E.g. To position a menu 50 pixels from the top and 100 pixels from the right you would use the following settings:

Floating Speed:

The speed in milliseconds for the floating animation (i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.3 seconds use 1300.

The default speed is set to 1.5 secs.

Sliding Speed:

The speed in milliseconds to open and close the slide out panel.

The default speed is set to 0.6 secs.

Auto-Close Tab:

If checked, the floating tab will automatically slide closed when the user clicks anywhere in the browser

Keep Open:

If checked, the tab will remain open at all times.

Skin:

8 different sample skins are currently available for styling your floating tweets. Since there are no essential styles required to create the tab box, these can easily be used to create your own custom theme.

Note: If you use one of the skin CSS files to create your own style please remember to copy the CSS to your theme folder as all files in the plugin folder are automatically deleted when the plugin is updated.

Shortcodes

The plugin includes the feature to add text links within your site content that will open/close the floating twitter tab.

[dcflt-link] –
default link, which will toggle the floating tab open/closed with the link text “Click Here”

[dcflt-link text="Open Tweets"] –
toggle the floating panel open/closed with the link text “Open Tweets”

[dcflt-link action="open"] –
open the tab with the default link text “Click Here”

[dcflt-link action="close"] –
close the floating tab with the default link text “Click Here”

[dcflt-link action="close" text="Close Floating Tweets"] –
close the floating panel with the link text “Close Floating Tweets”

Frequently Asked Questions

Check out our Frequently Asked Questions for Floating Tweets section for more information.

Demo Floating Tweets

http://designchemical.com/lab/demo-wordpress-floating-tweets-plugin/

Download The Plugin

Download Floating Tweets 1.0.1 (2,751)

Feedback

If you find this plugin useful please rate it at wordpress.org.

We are always looking for ways to improve our plugins so if you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Screenshots

Widget in edit mode

Other Social Media/Network Plugins

If you like Floating Tweets, Design Chemical also have several other free social media and social network plugins for WordPress:

Social Media Tabs

Add a facebook like box, google +1, google buzz, twitter and RSS profiles and feeds to any widget area with compact, slick sliding tabs. Plugin has the option of adding the tabbed box to either a slide out panel at the side of your browser window or as a static tabbed box in your widget area – 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

Using Shortcodes

The easiest way to add a text link to your WordPress content is to use the shortcode feature built into the plugin. To create a link using the default settings use the following shortcode:

[dcscf-link]

The default settings will add a link with the text label “Contact Us” and clicking the link will toggle the contact form open/closed.

[dcscf-link text="Click Here"]

The shortcode also includes an option, which allows you to set the link to either only open or only close the contact form. This is set using the “action” variable and there are 2 options available – close or open:

[dcscf-link text="Contact Form" action="close"]

The above shortcode example would create a link with the text “Close Form” that only slides the contact form closed.

Manually Using CSS Classes

The same effect can also be acheived by manually assigning CSS classes to a HTML element – the advantage of using this method over the shortcodes is that this allows you to add the feature to any HTML element such as an image, a link or even complete blocks of text.

There are 3 CSS classes that can be used:

• dcscf-link – will both open and close the contact form
• dcscf-open – only open the form
• dcscf-close – only close the contact form

For more information and to download the latest version of our free WordPress contact form plugin check out – Slick Contact Forms.

The objective of today’s jQuery tutorial is to automatically generate a list of “category” links from CSS class names and use these links to filter our HTML content.

For the tutorial demo we are going to use a list of links for our jQuery tutorials, which we would like to filter by subject/category. This technique however is useful for any kind of HTML elements including; images, creating dependant select lists, unordered/ordered lists, etc and is ideal for content that needs to be listed under multiple categories or creating portfolios.

Since the actual filter list is generated dynamically we can quickly and easily add/edit/delete items that we would like to filter as well as change the categories.

View DemoDownload Source Files

HTML List

First we create our list of items to be filtered. For the purpose of the tutorial we wont include all of the list items show in the demo. On the few samples though note the class names added to each item – these are our categories/tags that we would like to use for filtering:

<ul id="demo-list">
  <li>
    <a href="/lab/jquery/demo/jquery_demo_light_weight_animated_slider.htm" class="menus animation horizontal">Lightweight Slider</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_simple_horizontal_accordion.htm" class="menus animation horizontal">Simple Horizontal Accordion</a>
  </li>
  <li>
    <a href="/lab/jquery-mega-drop-down-menu-plugin/getting-started/" class="menus plugins">jQuery Mega Drop Down Menu Plugin</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_animation_form_validation_errors.htm" class="forms validation ajax animation">Animated Error Messages &amp; Form Validation</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_demo_image_swap_gallery.htm" class="images">Ultimate Image Swap Gallery with 3 Lines of Code</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_demo_slick_jquery_captions.htm" class="images animation">jQuery Fading Image Captions</a>
  </li>
</ul>

The jQuery Code

There are basically 2 main parts to the jQuery:

Create The Filter Links – this involves retrieving all of the item classes and create a list of filter links based on the class names

A function to filter the demo list using the above links

1. Create The Filter Links

$(document).ready(function() {

// map the classes for each item into a new array
classes = $("#demo-list li a").map(function(){
    return $(this).attr("class").split(' ');
});

// create list of distinct items only
var classList = distinctList(classes);

// generate the list of filter links
var tagList = '<ul id="tag-list"></ul>';
tagItem = '<li><a href="#" class="active">all</a></li>';

// loop through the list of classes & add link
$.each(classList, function(index,value){
    var value = value.replace("-", " ");
    tagItem += '<li><a href="#">'+value+'</a></li>';
});

// add the filter links before the list of items
$("#demo-list").before($(tagList).append(tagItem));

});

// Function to create a distinct list from array
function distinctList(inputArray){
	var i;
	var length = inputArray.length;
	var outputArray = [];
	var temp = {};
	for (i = 0; i < length; i++) {
		temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
	}
	return outputArray;
}

In the above code we first retrieve all of the class names from our list of demo links using jQuery’s map function.

This will create an array of containing all class names. In order to convert it to an array containing a distinct list of class names we pass our array to the function at the end – distinctList().

With the cleaned up output from our distinctList() function we then loop through the array and create a filter link for each item. Note that we create the complete filter links list before we insert the HTML – this will help improve performance since we only need to manipulate the DOM once.

We have also included an “all” link, which will allow us to reset the demo list filter and show all items.b

2. Filtering the Demo List

// filter the demo list when the filter links are clicked
$('#tag-list li a').live('click',function(e){

    // allows filter categories using multiple words
    var getText = $(this).text().replace(" ", "-");
    if(getText == 'all'){
        $("#demo-list li a").fadeIn();
    } else {
        $("#demo-list li a").fadeOut();
        $("#demo-list li a."+getText).fadeIn();
    }

    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(this).addClass('active');

    // prevent the page scrolling to the top of the screen
    e.preventDefault();
});

The demo list items will be filtered when the filter links are clicked. Since we create the filter links on the fly we need to use the “live” function to bind the categories.

The function allows us to use multiple words for category names by adding them as class names with hyphens – e.g. horizontal-menus would appear in the filter links as “horizontal menus”.

For this demo we will use fadeIn and fadeOut to show/hide the demo links. This can easily be substituted by any of the animation styles to suit your own tastes.

Finally at the end of our click function we add code to give the current filter item the class “active” and use e.preventDefault() to stop the browser scrolling to the top of the screen when the filter links are clicked.

The Complete jQuery Code

The complete jQuery code for our automatic content filter is:

$(document).ready(function() {

// map the classes for each item into a new array
classes = $("#demo-list li a").map(function(){
    return $(this).attr("class").split(' ');
});

// create list of distinct items only
var classList = distinctList(classes);

// generate the list of filter links
var tagList = '<ul id="tag-list"></ul>';
tagItem = '<li><a href="#" class="active">all</a></li>';

// loop through the list of classes & add link
$.each(classList, function(index,value){
    var value = value.replace("-", " ");
    tagItem += '<li><a href="#">'+value+'</a></li>';
});

// add the filter links before the list of items
$("#demo-list").before($(tagList).append(tagItem));

// filter the demo list when the filter links are clicked
$('#tag-list li a').live('click',function(e){

    // allows filter categories using multiple words
    var getText = $(this).text().replace(" ", "-");
    if(getText == 'all'){
        $("#demo-list li a").fadeIn();
    } else {
        $("#demo-list li a").fadeOut();
        $("#demo-list li a."+getText).fadeIn();
    }

    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(this).addClass('active');

    // prevent the page scrolling to the top of the screen
    e.preventDefault();
});
});

// Function to create a distinct list from array
function distinctList(inputArray){
	var i;
	var length = inputArray.length;
	var outputArray = [];
	var temp = {};
	for (i = 0; i < length; i++) {
		temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
	}
	return outputArray;
}

View DemoDownload Source Files

One useful example is to use the WordPress menu system to manage the site’s menus. With its ability to add custom links, this offers a powerful solution to handling the complete website’s navigation.

Adding The WordPress Functions

Setting this up is actually very simple and just requires a few lines of code in the head of the page to add the necessary WordPress functions:

require('blog/wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals();

Obviously you need to change the path to the wp-config file to be the same as the directory for your WordPress installlation.

The WordPress Menu Function

To add a WordPress menu to our page we then just use the wp_nav_menu() function as we would do in our WordPress theme files. The function accepts all of the same parameters, which allows you to customise various aspects.

For our tutorial demo we are going to add the mega menu, which is set up for the WordPress mega menu plugin demo page. To identify the menu we use the “menu” parameter in the wp_nav_menu function, which accepts the menu slug name – based on the name you gave your menu in the WordPress admin system – in our case it is “mega-menu”

<?php
    wp_nav_menu( array( 'menu' => 'mega-menu' ) );
?>

And that’s all there is to it – just add the function in the page where you want the menu to appear.

See WordPress Menu Demo

Demo of WordPress menu in a non-wordpress page

Slick Contact Forms is our latest WordPress plugin using jQuery. The plugin allows you to quickly and easily add contact forms to any post or page in WordPress using widget areas.

The plugin allows multiple forms per page, option to either use jquery sticky tabs or jquery floating tabs for the contact form and configure the form settings, animation and the email address of where the form details should be sent.

WordPress slick contact forms plugin page.

Each contact form also includes the option to add up to 3 input text fields and one text area. Input labels can be set via the contact form control panel as well as the type of jQuery validation used – select either “no validation”, “required” or “email” for checking that entered text matches the correct email format.

Validation error messages are animated along with highlighting the input field and form is submitted using AJAX.

The plugin is designed so that all of the forms are fully accessible and in the event that the user has javascript disabled the form will appear on the page in the designated widget area and can be submitted as normal.

For more information and instructions on how to install and configure the plugin and check out a demo form:

WordPress slick contact forms.

The jQuery Floating Menu plugin allows you to add a floating, sticky menu containing important links to your WordPress site. These menus can be created from any WordPress 3.0 custom menu.

This WordPress plugin can handle multiple floating menus on each page and has many options to customise position and features, which are easily set via the widget control panel. The menu can also be toggled open/closed via external links inserted using shortcodes.

Demo jQuery Floating Menu

WordPress Floating Menu Plugin Demo

Download The Plugin

Download Floating Menu 1.4 (25,543)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `floating-menu` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the Floating Menu widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use the floating menu plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin.

Widget area

Location of the actual widget is not important since the plugin automatically sets the position based on the control panel settings. You can therefore add the floating menu to an existing widget area in your WordPress theme or create a new widget area.

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

Create Your Floating Menu

To create your floating menu go to the widget admin page and drag the “Floating Menu” widget to the desired widget area. Select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The floating menu can easily be customised using the options available in the widget control panel:

Event:

Open/Close the menu using either ‘hover’ or ‘click’.

Tab Text:

Enter the text that you would like to use for the menu tab.

Width:

Set the width of the menu in pixels

Location & Aligment:

The position of the menu in the browser window is determined using its location (either Top or Bottom) and aligment (left or right). The location also changes how the menu slides out:

• Top Left or Top Right – menu slides down
• Bottom Left or Bottom Right – menu slides up

For each one you can also add the number of pixels that you would like to offset the menu by from either the location or alignment in the text box next to the drop down list. The default offset for both location and alignment is 10px.

E.g. To position a menu 50 pixels from the top and 100 pixels from the right you would use the following settings:

Set Alignment from Center

check this box to position the menu based on the center of the browser window as opposed to the sides. The alignment value now becomes the number of pixels left/right of the screen center.

This option allows you to fix the position of the menu even when the browser resolution changes.

Floating Speed:

The speed in milliseconds for the menu floating animation (i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.3 seconds use 1300.

The default speed is set to 1.5 secs.

Animation Speed:

The speed in milliseconds to open and close the slide out menu.

The default speed is set to 0.6 secs.

Auto-Close Menu:

If checked, the menu will automatically slide closed when the user clicks anywhere in the browser

Keep Open:

If checked, the menu tab will remain open at all times.

Disable Float:

Check this option to disable the floating animation – menu remains in fixed position in browser window.

Skin:

8 different sample skins are currently available for styling the floating menu. Since there are no essential styles required to create the floating menu, these can easily be used to create your own custom menu theme.

Note: If you use one of the skin CSS files to create your own style please remember to copy the CSS to your theme folder as all files in the plugin folder are automatically deleted when the plugin is updated.

Shortcodes

The plugin includes the feature to add text links within your site content that will open/close the floating menu tab.

[dcfl-link] –
default link, which will toggle the floating menu open/closed with the link text “Click Here”

[dcfl-link text="Open Menu"] –
toggle the floating menu open/closed with the link text “Open Menu”

[dcfl-link action="open"] –
open the menu with the default link text “Click Here”

[dcfl-link action="close"] –
close the floating menu tab with the default link text “Click Here”

[dcfl-link action="close" text="Close Floating Menu"] –
close the floating menu with the link text “Close Floating Menu”

Frequently Asked Questions

Also please check out our Frequently Asked Questions for the Floating Menu plugin.

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

Demo jQuery Floating Menu

http://designchemical.com/lab/demo-wordpress-jquery-floating-menu-plugin/

Download The Plugin

Download Floating Menu 1.4 (25,543)

If you liked the jQuery Floating Menu Plugin you should also try out:

WordPress Slick Menu Plugin

Sticky tabs with slide out menus.

WordPress Slick Contact Forms Plugin

Quickly and easily add sticky or floating, slide-out contact forms to any widget area. Fully customisable with email validation, optional required fields & animated error messages.

Feedback

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

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Screenshots

Widget in edit mode

Updates

Version 1.4 27th November 2011

• Added: option to set position based on center of screen

Version 1.3 25th October 2011

• Added: disable floating animation option

Version 1.2.1 13th September 2011

• Fixed: validation error

Version 1.2 11th June 2011

• Added: shortcodes to create external links to open/close floating menu tab
• Added: 4 new CSS skins

Version 1.1 16th May 2011

• Added: Option to keep menu open at all times

The plugin offers many options, which can be used to customise the floating content including:

• Position the floating tabs anywhere in the browser window using a combination of “location” and “alignment” along with offet in pixels.
• Slide out content will automatically slide down if location is set to the top of the browser and slide up if set to the bottom
• Option of using either “click” or “hover” to activate the slider.
• Customise the floating and slide out animation by changing the speed settings as well as the easing for the floating.
• Multiple floating tabs per page
• Set the text label for the floating tabs
• Auto-close option, which will automatically slide closed if elsewhere in the browser screen is clicked

Checkout the jQuery Floater plugin project page for more information.

WordPress Plugin Version

The floater plugin is also available as a WordPress menu widget plugin, which allows you to create floating menus from any WordPress 3.0 custom menus – WordPress Floating Menu plugin.