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.
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.3 (21,956)
Installation
- Upload the plugin through `Plugins > Add New > Upload` interface or upload `social-media-tabs` folder to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- 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 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
- 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
- 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 for further information/tips.
Demos for WordPress Social Media Tabs Plugin
See also the fully working version in our blog section sidebar.
Download Social Media Tabs plugin
Download Social Media Tabs 1.3 (21,956)
Feedback
If you find this plugin useful please take the time to rate it at wordpress.org.
If you have any problems, suggestions on how we can make the plugin better or would like help creating a new skin for your social media tabs let us know via comments, email or our online contact form.
Donate
We develop & support all of our plugins for free. If you use this plugin and find it useful please consider a donation as a token of your appreciation
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:
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.
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
I have a problem with custom widget.
Have no idea how to create shortcode, so I used some plugins for shortcodes, but my “custom” tab was empty. It will be nice if you make small instruction “making shortcodes’
Or maybe we can put custom code some where direct in your plugin code?
Code like this:
<!-- VK Widget --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 1, width: "240", height: "290"}, 34624882); </script>Hi,
Creating shortcodes is a bit of a large topic to really cover for this plugin. All you should have to do though is insert the shortcode into the text box.
My problem is solved.
Just add custom functoin to functoins.php
Thanks Google =)
Maybe it will help anybody with same problem
For my code above it was:
function vk_sc(){ return '<div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 1, width: "240", height: "290"}, 34624882); </script>'; } add_shortcode('vk', 'vk_sc');and shortcode for widget
First of all I just want to say your plugin is awesome. I love the sleek design.
I am having a problem with the
Google +1 account
I added my profile ID but nothing is showing up. I read about the api key but kind of confused where to get it. Does this play a role with my Google +1?
Thanks
Frank
Hi,
Yes you have to have a google api key in order for the google +1 tab to work. See the following FAQ for more info on how to create one:
http://www.designchemical.com/blog/index.php/faq/create-your-own-google-api-key/
new update is great with pinterest support. but im having an issue.
-widget below social media tab will goes down at footer or goes center of content.
-hoping for google plus page support.
forget it, now working great. thanks.
Beautiful widget…
I’m having this problem though
Facebook. My page ID is in there…but iits displaying the message “Could not retrieve id for the specified page. Please verify correct href was passed in”
What seems to be the problem there?
Hi,
The like box appears to be working ok now?
It will be nice to see ability to add vk.com (the most popular social network in Eastern Europe, like FB) widget. Developers info about this widget and some others you can find there: http://vk.com/developers.php?oid=-1&p=Groups
Or maybe custom tabs and widgets?
P.S. Thanks a lot for your work!
Hi,
I am currently looking at how to add in the ability to add your own widgets which should make things easier and the plugin more flexible
Good news, wish you good luck
using it now,,
it could be more awesome with adding
- google plus page tab
- contact tab
- email subscribe tab.
- custom mod for facebook likebox.
anyway, loving it. hoping for the update
Hi,
These are definitely things we will consider for the future
The Facebook is not showing any recent activity but is now showing the Like option and the People that like, is that as per design?
Hi,
Yes correct in order to minimise the height
hi! I want to use your plug-in. it has the perfect match with what is on my mind. but twitter logo doesn’t shown up. everything works fine but twitter logo. please do sth about it then I may start to using it. thxx
Hi,
There should be no problems with the twitter logo in the plugin. Check if your site has any errors and that the path to the logo image are correct
Thanks a lot there are a lot of plugins which couldn’t do this work.But this is really working well.Thanks for all your free plugins.I respect opensource developers.
Thank you for the feedback and glad you find them useful
Thx for your work Lee. Deffinitely it needs the Google + page connection
Once you access the API or whatever magic you do, this will be awesome!
Is there is any chance of retrieving Google Plus information with this plugin? Also, will it be able to pull FB wall posts in the future. Neat plugin, but I really have to have Google Plus info.
Thanks – Jon
Hi,
At the moment we dont havea suitable way of accessing the google + API. Still looking at it though and will update asap
Love your plugins. I have used the sm tabs plugin on several of my sites with no problems. When I installed it on a different site the slider is positioned just off screen. Playing with the offset in the widget doesn’t have any effect. What is confusing is that this site has the same theme/versions as the others I have successfully gotten it installed. Any thoughts?
Lee, scratch that. I got it fixed. The hook area I had the widget plugged in to was the problem as it fell outside the wrap. I hooked it into a different area and it renders great. Thanks for this outstanding plugin.
Hi,
I have installed Social Media Tabs, and everything looks good except that the Facebook Content isn’t showing up. Twitter and the RSS feed work fine. I have confirmed that I am using the correct ID #, and that the plugin is not conflicting with any other plugins. I can’t find anyone else having a similar problem. Any idea why this is happening?
Site: ss012.bysamgeorge.com
Theme: Headway 3.0.4
On further exploration, I have discovered that Firefox is the only browser that is failing to display the Facebook like box. Chrome, Safari and IE all look fine.
And SOLVED. The turns out I was logged into Facebook as a page, and that was causing it. Switched back to personal profile in Facebook, and widget displayed fine on site.
Hi, I use an alias for my facebook page. So I don’t manage to find the id anymore. And it does’nt work with the alias.
Can you help?
Thanks!
Hi,
have you tried – http://www.designchemical.com/blog/index.php/faq/getting-your-facebook-id-using-your-facebook-username/
hi,
my wp admin panel doesnt seem to have the settings configuration available for social media tabs.
Please help!!
Hi,
It should be under Settings->Social Media Tabs
If not, make sure that your user id has full admin access
Lee, awesome work with your wordpress plugins!
I’m having sort of the same issue as other with the Facebook ID… I have found out my Facebook ID to be: 551973504 – but the plug in doesn’t seem to like it!
What can I do?
JS
Hi,
The facebook like box is only for a facebook page, not a profile
Hi Lee
The Facebook is not showing any recent activity but is now showing the Like option and the People that like, is that as per design?
The Twitter shows my Tweets but seems to hide my retweets how do I make it show my retweets?
Many Thanks
Hi,
Yes the plugin is for the like box, which is attached to your facebook page.
Retweets arent included. You can manually add them in though by adding the following code to line 571 of file dcwp_widget.php:
Hi Lee,
I seem to experience a problem with the Twitter tab… ” An Error Occurred: No response from Twitter. Please try again in a few minutes.” Any possible way to fix it?
Thanks!
Hi,
Twitter have a maximum limit for the number of API calls per hour of 150. This includes all twitter requests from your IP, not just the social media tabs. When the limit is reached twitter return the error response until the limit is reset again. The plugin tries to minimize api calls by caching results but obviously other plugins will impact the total also.
The twitter tab on your site works ok for me so its specific to your IP.
Okay thanks!
I thought it was a plugin error but since you told me the problem then it’s okay, thanks!
great plugin lee sir!
This is a wonderful plugin!! Does anyone know if this plugin has a Joomla version of it? Or have seen one like it?
Hi,
Unfortunately we dont currently have a joomla version
Thanks for this great plugin. I applied it to the footer section of my site, winnerzcircle.org, and did not set to static (great feature btw). Afterwards, however, every page on the site has become too long causing excessive scrolling. The only exception to this is when the page first loads, but after any link is clicked, the page extends leaving a long blank bottom. Can you help with any advice?
Hi,
It appears as though the theme is dynamically setting the footer height using jQuery. Since this is occuring before the social tabs have initialised (when the tab content is moved to the side) the footer is including the tab content into the height measurement.
You either need to get it to recalculate after the page content has all loaded, which is how it should be done or move the tabs to a different widget area.
Your response is rather quick – thanks a lot! I’m pretty new to CSS and PHP, please is there any quick fix or snippet that can get it to recalculate after the page content has all loaded. I have tried again to fiddled with the css code with no success yet. Thanks Again.
Hi,
Unfortunately no. The code would have to be added using jQuery.
Try setting the footer to a fixed height in the CSS and then setting the overflow property to hidden.
Worked around it. Thanks a lot for all your help. Your interpersonal skill is as great as your plugin. Thanks again!
love the plugin. My client does too and is insisting on using it. I am having two major problems though.
1. the text shows up above all other text in IE9 (z-index?)
2. the margins are gone between the two widgets on the bottom page (in all browsers). this doesnt happen with any other plugins
screenshot attached.
http://youcandoanything.com/screenshot-ie9.jpg
Im willing to pay to have these issues fixed if you want to send me a quote.
- Justin
Hi,
do you have a link to the site where it is installed?
Yes. http://www.youcandoanything.com
Thanks Lee.
i have 2 questions, on my theme the static box sits about 10 pix too far to the left, http://www.lab601.com, i cant figure out how to move it to the right. also is it possible to set the background to transparent so the theme background shows through?
thanks
dave
Hi,
all of these settings can be changed by customising the CSS. You can use the default one included as a started to get the required CSS selectors.
For the padding/margin issue this sounds like it may be caused by the widget tags in your theme. Check the theme style sheet for any settings that may affect the positioning of the tabs
This is a really awesome extension and I want it badly but the problem is I don’t have WordPress. I have an eCommerce site using OpenCart. Is there a way to implement this plugin into a site that is not a WordPress site? I prefere the slide out from right side but the in page one will do. Any help you can give me on how to use this on a non WordPress site would be much appreciated.
Hi,
At the moment we only have the wordpress version
Hi,
I am very excited to get your plugin in working on my site but am having trouble getting the tabs to populate with the info from facebook, twitter and RSS feeds. I looked at the selection source for the tab slide and the facebook, twitter and RSS data is there – it is just not showing for the user in the tab. Any help would be great!!!
My site is http://www.brisbanebranding.com.au/
Thanks
Jake
Hi,
The content is there but there appears to be other code in the page, which is setting the tab content to display:none;
Check your theme files jQuery code for anything that may be inadvertently hiding the content
Thanks for the reply Lee, I will investigate this some more and post any solution I get here for others.
Great plugin! Thanks a lot…
Thank you. Glad you like it
Heyya Lee! Love the Social tabs plugin as well as the Contact Us plugins and would like to use both on our site. Unfortunately, we’re not well versed in the coding needed to make it work. We would be more than happy to donate to the designchemical cause if you could walk us through it. Thanks again and let us know.
Hi,
If you already have widget areas in your theme then in theory no coding is required – just install the plugin and add the contact form or the social media tabs widget to the widget area. If you are using the slide out media tabs then the position of the widget area is not important
Heyya Lee, and thanks for the response. I put the Social Media Tabs widget into our Header – Right side widget area, and the positioning is closer to what we’re looking for now. If you have a minute to look at http://www.domainfuze.com/category/blog, you’ll see that it’s not loading quite right. For one, it’s loading opened, even though we have that option unchecked in the options. I added jquery to the theme file, like you mentioned in the FAQ, but didn’t seem to help.
Sorry to be that guy, but is there any way you could take a quick look?
Also, do you offer the contact us plugin like you have on this page (vertical contact us)? The one I downloaded has a horizontal Contact Us button.
Really love the design aspects of the plugin. Any chance of fixing the Twitter issue? I realize that it has something to do with the Twitter side, but seems strange that other plugins can make the calls needed to pull in the feed.
Other than that, really love the work.
Hello Terry,
Doesn’t seem to work when i view in IE9. Screenshot
http://youcandoanything.com/screenshot.jpg
Hi,
It looks like there may be a javascript error somewhere on the page that is specific to IE, which is preventing the jquery code for the tabs from initialising.
Any chance of including Vimeo in this plugin?
Hi,
Yeah I was actually looking at Vimeo just the other day to see how it can be integrated. Will take another look
Hello,
Just wondering if you had a php code version of this widget that I could simply copy and paste into code for a page and it will appear. If you look at my site: savorsouthmadison.com, the social media tabs widget is on all the pages I want it to be besides the “Taste” tab and subtabs–and I have to manually add it there with code.
Let me know ASAP please, as I have been trying to figure it out in code by myself with no success.
Monique
Hi,
There is currently no shortcode version due to all of the variables required to set it up. The only way to add the media tabs is using a widget area
When we try to install the plugin it says, “the plugin does not have a valid header?”
Any thoughts on this?
thanks!
Hi Lee, love the plugin is there anyway to hard code the Google+ badge CODE into the Google+ Tab? I’m fairly new at this. Can you point me in the right direction what do I have to edit exactly so I can insert the Google+ badges CODE into the Google+ tab in the widget so it shows up when people click on it. If anyone knows please reply. Thanks!
Hi,
You can add the +1 button code to the code that generates the google output. This can be edited starting line 750 of dcwp_widget.php in the plugin folders “inc” folder
Hi Lee
Just installed the app but whether Ioption I select slide out or static it installs it in the widget box in a mangled fashion. There’s an error message but I can’t see it all to tell what it says! Any clues? Thanks.
Also installed Slick Contact forms and that looks a treat.
Hi,
it sounds like you may have a jquery error. Use firebug to check for javascript errors and also see the FAQ for more information plus possible solutions – http://www.designchemical.com/blog/index.php/frequently-asked-questions/social-media-tabs/
Hi i went around checking the codes in css but still could not find what cause the facebook icon not to appear in the widget, any advise??
Regards,
Terry
Hi,
It looks like you have entered the facebook ID into the the icon field on the settings page. To use the default icons make sure that the following fields are all empty in the settings page – Screenshot
thanks bro, fixed
Hi Lee,
Many thanks for your plugin !
I get some trouble to display correctly the slides under IE7. They are all displayed at the same time…
covering the content located at the right side…
site is : http://www.fabrice-pascaud.fr
Any idea is welcome !
Thanks
fix it by adding width and position rules in css, if it can help others
.dcsmt {
overflow: hidden; /* Required to hide the inactive slides */
width: 100%;
position: relative;
}
bye
thanks for the info
This was the solution for IE7 thanks was looking for a good 3 hours !
great plugin too.
peace
Hi,
Did a quick check in IE7 and it appears OK. If you are seeing problems with the tabs not forming correctly it sounds like a javascript error
I had read an older post on getting this same error…
It seems to happen often, any ideas?
An Error Occurred: No response from Twitter. Please try again in a few minutes.
Hi,
This is a twitter error unforutnately. Twitter does have a limit on the number of calls that can be made per hour
Great plugin!
Do you have any options for using with a dark theme? or future options to change the font, background color easy.
Thanks!
Hi,
yes you can fully configure the style/layout by adding your own custom style sheet. Copy the default one that comes with the plugin dcsmt.css in the CSS folder in the social-media-tabs plugin folder. Use this as the starting point and then just configure the font and background accordingly.
If using your own style sheet you can disable the default one in the plugin settings
Got it, Thanks!
Having problems with tabs and distortion or maybe pad issue? See the social tabs rendering in the image at this link:
http://www.katesoutham.com/wp-content/uploads/2011/11/screenshot_93.jpg
The site is katesoutham.com
It’s very frustrating in that it goes away when we visit other parts of the site THEN come back to the home page. Then the tabs stretch back out to normal. Weird.
Is there a way to force padding or some other way to force content to stay below tabs and not cover them up? Issue is noticed in imac with safari
Hi,
there is some CSS from your theme’s styles which look like they are causing the height to collapse. Try adding the following CSS rule to your theme’s style sheet and see if that helps:
#sidebar ul.social-tabs {float: none;}
Thanks will give this a try!
I am using your great plug in for a customers website and it works great for twitter; however I am having a hard time getting it to work with facebook. I followed the directions and I still can not get it to function correctly looking for some input.
This is the facebook account:
http://www.facebook.com/realishiphop
and there is no ID so I then tried this account which is the owners actual page!
http://www.facebook.com/profile.php?id=100001025407302
I plugged this id 100001025407302 into the plug in and I still am getting no where!
Hi,
You need to use the ID of the facebook page – http://www.facebook.com/realishiphop, which is – 224773704256722
I love this widget but I have 2 issues persisting
1. Google Buzz? Google discontinued this, encouraging users to use Google+ (which I see mentioned here) ,.,, so I was expecting my google+ feed to appear in the google tab. Instead I see google buzz, which is empty because buzz is defunct. Now what?
2. Facebook. My page ID is in there. I check 4 times (aside from already knowing it) … but it only displays the message “Could not retrieve id for the specified page. Please verify correct href was passed in”
I checked everywhere on this site (I think) can’t find any insights or solutions. For the sake of the others – perhaps post some clarifications.
Thanks!
Do you have a link to the page?
For the google tab the google plus api is not yet well developed and there is only minimal access at this time to create a feed for the tabs. In addition use of the API is restricted so google will only allow a limited number of calls per day