Themeforest

Wordpress Plugin – Social Media Tabs

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.

283 Comments

  • [...] was about to settle for ShareThis when I discovered the very cool Social Media Tabs plugin. This gives you a cool little scrolling set of tabs in your sidebar, showing your latest Facebook, [...]

  • Thanks for a great plugin. I looked thru your FAQ but I didn’t see an obvious answer. Can you also look at the display on “pages” of the widget in the sidebar? like http://porcupinerealtor.com/buying < not sure why its messed up. It looks fine on posts and the homepage.

    • Hi,

      There is an error with the cevhershare plugin, which is preventing any following jquery code from loading, including the social tabs

      • Cool, I replaced this with your plugin. One question, now each icon has a bullet in front of it? Is this in my css? Any suggestion how to fix? For example http://porcupinerealtor.com/buyers/

        • selecct the default skin option in the settings page

  • I’m updating a custom theme and I need to add the widget manually into the sidebar.php Could someone please provide me the php call to do so?

    • You will need to create a new widget area and add that to your sidebar

  • Hi, great plugin! I would like to show two or three FB like boxes. Is there any possibility to do that?

    • Hi,

      You can show 2 by adding the 2nd via a shortcode in the customised tab

  • hey there, got problems with that plugin, it looks like the javascript is not working or something: take a look on this test site: http://beatboxnation.com

    thanks

    • Check that your footer contains the wp_footer() function

  • Hello help pls.. i installed the plugins but it not appearing on the specific page pls check http://www.webranksolution.com/contact-us/

    • See FAQ for possible reasons

  • this is how it looks on my page.http://haroldweb.webfolioconcepts.com/yardhype/gyptian-in-my-arms/

    what can i do to fix it?

    • Check the FAQ

  • Thanks for building such a cool add-on that maximizes social features without commanding page real-estate. I’ve changed the look of the slider and implemented it, however on page reload, the widget just appears to vanish; but seems like it’s just off-screen to the right. Please advise. Thx.

    • Hi,

      This will be due to the essential CSS values not being set correctly. use the default CSS file that comes with the plugin as a guide if you want to create custom styles.

  • oh and btw. you are using this css code in the plugin’s css folder:

    .sliding .dcsmt {
    background: #fff;
    border: 1px solid #ccc!important;
    }
    
    .static  .dcsmt{
    background: #fff;
    border: 1px solid #ccc!important;
    }

    which means I have to edit that file if I want to get rid of that border since you used !important. If you didn’t I could override it in my theme’s css file with the !important flag.

    any other solutions than editing the plugin’s css file every time I update your plugin?

    • Yes – use your own CSS. This is exactly why the “disable default skin” option is included in the settings.

      If you dont like the style that comes with the plugin then you can disable it and use your own. Absolutely no need at all to keep editing the plugin CSS file.

      • Ah, I see that option now. So I will copy/paste the parts of the default style that I like and want to keep.
        Thanks.

  • I need to use this plugin on a friends website, statically in the sidebar and currently only need the FB part. Could you maybe modify the plugin so that when only 1 social network is used in the widget it hides the FB icon? there is no need for the tab part of the widget when only one social network is used.
    currently I am hiding it with css…

    • Hi,

      There are no plans at this time to add this modification. Technically just using the plugin to create a facebook like box is overkill and you would be better just adding a couple of lines of code for the like box only

      • I know :-)
        Its just that soon, I might need to add more social networks. was simply lazy…
        Will use a simple FB like box until more is needed, thanks.

  • Is it possible to change the frequency (perhaps in one of the .php files) that will allow the RSS feed to display our news feeds in a more timely fashion? Right now there is a delay of several hours. I would love to have this closer to 20 minutes…

    Thanks!!!l

    • Hi,

      The plugin doesnt have any caching on the RSS feed. Maybe check your local settings to see if Wordpress is caching the page

  • Great plugin, slick and effective.
    Just one small issue – for me, Flickr doesn’t work. I tried ID of gallery, and my account ID, none of them works. Any suggestions ?

    • Hi,

      There is an error in your themes custom.js file – check the page with firebug to see the error. This may be causing the problem although I did check with your current ID and it appears that the ID isnt correct also, or at least its not returning anything for that ID value

      • Yeah, I tried some other setting fo ID and forgot to return it.. Can not recognize error in custom.js, template is kinda buggy, probably the same file is making problem with resizing pictures in gallery on my posts… Anyway, thanks again.

        • Hi,

          In custom.js change line 3 to the following:

          jQuery(document).ready(function($) {
          
  • Half of my box bleeds off the right side of my home page. At first I thought it was because I left Offset at 50, but I made that zero and still have the same problem. It appears that the social media icons appear *beside* the boxes and kick them off the page, rather than above the boxes. Is there a fix for this?

    • Hi,

      It’s a jQuery error. It appears as though a plugin (possibly the dm-albums plugin) is loading jquery again and overwriting the social tabs code. Try disabling the plugin and see if this fixes the error

  • Hello,

    Awesome plugin, Im trying to embed tumblr on the shortcode section but it seems not working,

    Im hoping for your help please thanks

    • Hi,

      Sorry I dont know how the tumblr shortcode works. Maybe try checking with the individual authors of the shortocodes

  • Great plugin… however, I recently noticed it appearing on the bottom of the page, on certain pages, as opposed to on the side, where it is meant to be… Has anything changed, or can you think of what may be conflicting with it?
    This page has it correctly displayed – http://www.rollercoasterband.co.uk/
    This page it displays in the footer (where I actually have the source code for the plugin in a widget) – http://www.rollercoasterband.co.uk/?page_id=1671

    I really appreciate any help you can give,
    Alistair.

    • Hi,

      There is an error with the flickr gallery plugin that is preventing other jquery from loading