Social Media Tabs Plugin Overview and Rating

I’ve used the Social Media Tabs on this site on an off and on basis. Sometimes it’s been disabled to test other similar plugins that used the side positions. It also gets disabled when our local international internet speed is compromised (all too often) and the live feeds from Twitter especially take forever to load.

It Works: I upgraded my rating for this to 9/10. Previous rating had been downgraded by Google Plus1 feed not working (A Google API bug, not the plugin).

Bug Free: Fewer than 20 bug reports in 10 months. Several of these are about Google Plus1 – now resolved. The others all are more user error and setup mistakes than real bugs. So it gets 9/10.

WordPress Support: Support on the WordPress plugin forum is good enough to get 8 / 10. The developer has a home site with additional information, FAQs and provides support here to. So overall the plugin is very well supported.

Versatility/Features: The major social networks are represented and there are sufficient set-up options to satisfy most users. I would like to see an option to read Facebook Timeline updates (but that needs Open Graph API which is not easy for a user of the plugin to get working). So the features get 9/10 simply because it doesn’t do something I would like – unfair I know – but it’s my review

Installation and Set-up: Social Media Tabs is not a plug n Play Plugin – You do need to configure it. I found the set-up easy, but I’m a techy. However, following the directions here, and on the Social Media Tabs Homepage will guide any user through the process. If things dont’ work – it’s because a mistake was made somewhere. My rating is 7 / 10.

Used and Tested. For once, this plugin is well represented on the developers website. Used on the plugin page as well as a more extensive live demo page. Very good and 10 / 10 to the developer. Tested on a Graphicline site – this rating is becoming a bit of a waste of time – I only rate plugins I have tested. Used on one of my sites – 9 / 10 because I  disable it sometimes.

My Overall Rating for Social Media Tabs

I give Social Media Tabs 8.9 / 10 for this review, and 5 out of 5 on the WordPress plugin page. The reasons my review rating is lower are mentioned above.

Installing And Set-up Social Media Tabs Plugin

Social Media Tabs Plugin Settings

Social Media Tabs is installed in 2 steps: Firstly the installation and activation, and the basic setting are completed. After finishing this first step, we need to configure a ‘widget’.

Social Media Tabs Settings

Social Media Tabs plugin settings will allow a custom ‘skin’ to be used by builders able to create CSS files, and custom images for the social icons. If you want to use custom icons, upload the images to your site, and paste the full image url in the text field provided.

This is where you enter the Google Plus API key as well. See the section on Google API to set up you API

Further Social Media Tabs options allow you to show or hide Twitter replies.

If the default images are OK the only thing left to do at this stage is to click ‘Save Changes’.

Next is to configure the Widget…

Configure Social Media Tabs Widget

Social Tabs Plugin Widget Settings

Navigate to Widgets (Dashboard Appearance Menu). Find the Social Media Tabs widget among ‘Inactive Widgets’. Decide where you want to place the widget. If you are going to use the widget in a sidebar or footer, choose the location, and drag the widget from Inactive to the chosen ‘Widget Area’.

If you decide to attach the tabs to the side of the page, then it can be placed in any widget area , (if ‘Sidebars’ are not going to be used for some content, then placing it in a footer area will allow the tabs on all content – If placed in a sidebar it will only appear on content with sidebars).

The first part, deciding where to place the tabs feed box size, the services to include in the tab and so on is straight-forward and unlikely to lead to pitfalls;

• Tabs; choose slide out or static
• Slider; horizontal or vertical
• Size; the width and height can be changed.
• Location; Several options for placing the slider.
• Offset & Slide Speed Decide how you want these settings to work.
• Auto Close and Load Open; were selected.
• Tabs; The order of the tabs can be selected from the drop down menus. Google +1 and You Tube tabs were set at ‘none’ for now.
• Open Tab; selects the tab that is active (highlighted)

Identities:

This is where some users seem to stumble. Facebook and Google plus often cause difficulties, and not only with the Social Media Tabs plugin

For Facebook use the Facebook ID used for Open Graph “Admin” – ogadmin. The only thing to remember is you must use the NUMERICAL ID, not a page name. So for those of us who have named our pages we need to find the page ID number. If that is used there should be no problems with the feed showing up in the tab. And remember to only enter this number in the text field – not the full URL. Facebook will send an error message if the ID is incorrectly formatted.

The Google ID can be found in the Plus 1 account, and is also a string of numbers similar to Facebook ID. Some Google accounts have a prefix e.g. url/01/ID-NUMBER.

Twitter is the name of your Twitter (personal or business) account. YouTube username is the one used to log-in to your YouTube account, and the Video ID can be found in the account settings.

YouTube: The username for this item is your acount name. Video ID is the YouTube ID to embed a video in the tab. Where do you find the video ID – at the end of the embed URL (click Share) e.g. if the video URL is http://youtu.be/IMxC3wQZOyc the ID is IMxC3wQZOyc

Pinterest and Flicker – sorry – I have no idea as I don’t use either of these services, but logic tells me Flickr is an ID similar to Facebook, and Pinterest is the user name used to login.

RSS Feed: The RSS feed URL for the website. This is typically http:// yourdomain /feed/ and the Title can be anything – News RSS was used here. This is the only entry for the widget where a full path (URL) must be entered!

Finished, and click save. Now go to your website and test the plugin.

Google Plus 1 Stream and API for Social Media Tabs

Your Google Plus1 stream is accessed with a Google API. Before you can display the stream, you need to get an API key. This is not difficult. Follow the steps below to get your API key in les than 5 minutes

1. First – login in to your Google account
2. Go to the Google API Console and find the services tab (NOTE: This link should take you directly to the Services Page)
3. Scroll down the page until you find Google+ API – If this is your first time you will see it’s turned off. Click on the OFF button to turn on.
4. Follow the steps to accept the 2 terms of Service Conditions.
5. Go back to the Console Services page and click the TEXT – Google+ API – This takes you to a page of Traffic Reports for API Project.
6. Click the Api Access Tab – When the page opens, look for “Simple API Access”
7. Your API key is found here
8. Copy the API key and paste in the Plugin settings Google+ box, then add your Google ID in the widget setup.

Thats all it takes to create the API and get the Plus1 stream feed in the tab.

Jquery Load Mistake Breaks Chrome Rendering

I discovered a minor issue with Jquery and Google Chrome browser. I had recently changed some things around in the site backend, including loading some Java files from a CDN. During the setup of the CDN file load, I had set a jquery file to load Asynchronously, and to load from the page footr – This caused the plugin to load incorrectly using Chrome, and not diplay correctly. Firefox and IE were OK so it went unnoticed for a few days (Firefox is the main browser I use)

Java should always be loaded Synchronously, and from the header. Asynchronous loading and loading these scripts from the footer causes a lot of problems, so if you do want to try footer or asynchronous mode, always test the results using all the popular browsers.