Check out this sweet video created by Daddy Design which shows step by step on how to customize the Social Toolbar Pro to match the branding of your website.

PLEASE NOTE: The version in this video is 1.5 which consist of the PIN IT button and other new things. We had a bug after the video was made. But don’t worry this version should be ready by the end of the week as we are currently fixing it.

Do your YouTube videos in your wordpress blog post overlap the Social Toolbar like this:

The Toolbar plugin cannot control the Z Index of YouTube videos. But there is a fix. All you have to do is add “?wmode=Opaque” after the URL in the embedded code. Below is an example of how your Youtube Iframe embedd code should look.

Before:

<iframe title="YouTube video player" width="512" height="312" src="http://www.youtube.com/embed/XxXxXxXxX" frameborder="0" allowfullscreen></iframe>

After:

<iframe title="YouTube video player" width="512" height="312" src="http://www.youtube.com/embed/XxXxXxXxX?wmode=Opaque" frameborder="0" allowfullscreen></iframe>

UPDATE: If this fix does not work for Chrome, then use “wmode=transparent” instead.

You can also Fix this using jQuery for your full site. This will not only fix any new iFrame videos added to your website but all previous iFrame videos as well. Go here to see how:
http://www.daddydesign.com/wordpress/fixing-youtube-iframe-z-index-using-jquery/

With all the amazing features that the Social Toolbar Pro has, some of the back end settings can get little overwhelming for some users. In this post we will list every section and show you what they do and how to edit them.

Social Toolbar Options Page

General Settings

Toolbar Position:
Two options on where to place your Toolbar, select TOP to place it in the complete top header or select BOTTOM to place it in complete bottom footer of your wordpress site.

Image Icon Size:
Two options for the size of your Toolbar. Smaller size is 30×30, which refers to the icons being 30 by 30 pixels. Larger size (default) is 40×40.

Background Color:
Use this to edit the background color of the main toolbar. You can either insert your own HEX# or use the custom color wheel.

Border Color:
Use this to edit the border color. The border is the skinny part (with the hide/show button) on top of toolbar and between the icons. You can either insert your own HEX# or use the custom color wheel.

Recent Tweet Background:
Use this to edit the background of the recent tweet section (only applies if recent tweet option is turned on). Located on to the right. You can either insert your own HEX# or use the custom color wheel.

Icon Color:
This is where you would change the color of the Social Network icons. Your 10 choices are: black, white, gray, red, blue, green, orange, purple, yellow and pink.

Hide/Show Icon Color:
This is where you would change the color of hide/show icon (the up and down arrow located on top left). Your 10 choices are: black, white, gray, red, blue, green, orange, purple, yellow and pink.

Recent Tweet Settings

Show Recent Tweet
This turns on or off the recent tweet from displaying. If no is selected, none of the settings below this need to be touched.

Twitter Bird Color:
Use this to edit the Twitter bird icon color. You can either insert your own HEX# or use the custom color wheel.

Font Family:
Choose from tons of Web fonts for your recent tweet text.

Font Size:
Choose any size you want for your recent tweet text.

Link Color:
This will change the color to any links you may have in your latest tweet.

Show Timestamp:
This turns on or off your recent tweet time stamp. Time Stamp is the time or date of your latest tweet. It displays it directly after the Tweet.

WP Social Toolbar Display Settings

Display Throughout Entire Website:
IF Yes is select the Toolbar will display on every page of your wordpress site. If No is selected, a drop down of custom settings will appear.

Display On Home Page:
Check this box is you want the Toolbar to appear on the home page of your site/

Display On Category Archive Pages:
Check this box to have it display Toolbar on all your Archive pages (Categories, etc.)

Display On Blog And Single Post Pages:
Check this blog to have it display Toolbar on all blog and single post pages.

Display On Specific Pages:
Here is where you can have it appear just on specific pages or post. Just simply insert the page ID followed by comma and insert as many as you like.

Exclude On Specific Pages:
This setting would be used if your having the Toolbar appear on full site but want to hide it from certain pages or posts. Insert the ID the same way as above.

Share Settings

These settings are for what URL you Social Share buttons will share (Google +1, LIKE and Tweet). If you select HOME, means no matter what website page the user is on those buttons will always share your Home page. If you select individual, then every page the user is on and clicks one of the buttons it will share that exact page.

Facebook Share Settings

You would only use this setting if you would want the LIKE button to share your Facebook fan page and collect Facebook Fan page likes instead of sharing pages of your wordpress website.
NOTE: You can only insert a URL of a FAN PAGE, not a personal Facebook profile page.

Social Profiles Page

Social Account Settings

This is where you would check box each social network icon that you want to appear on toolbar. Insert all your social network URLS. Choose up to 14 icons at a time. Sort icons is another great feature on this page, just drag each social profile row and put it in any order that you please.

Custom Icon Settings

This is one of Social Toolbar Pro’s newest and greatest feature. You can upload your own custom icon and URL. You can sort these icons with the others above. For more information on this feature, check out the Custom Icon Settings blog post.

Occasionally we get emails from users of the plugin telling us that the toolbar will not show up on their wordpress site. There can be a few reasons for this happening:

1. Most common reason is that your theme does not have proper wordpress code inserted, so make sure your theme has:

<?php wp_footer() ?>

just before the closing body tag, usually this would be done in the “footer.php”.

Also, make sure your theme has:

<?php wp_head() ?>

inside the head tags, usually this would be done in the “header.php”.

Both of these functions are needed for most plugins to work because like ours, many plugins add javascript and html codes using these two functions.

2. Make sure you installed it properly and all of it’s settings. You may want to try deleting the plugin and reinstalling it.

3. Complications with other plugins installed. We suggest temporary deactivating other plugins to see if your Toolbar appears.

Other issues can simply be that your themes code is interfering somehow to allowing the toolbar to display and sometimes not to work properly.

Both versions pretty much have the same instructions on how to install. The 1st way is the easiest, which is to login into your WordPress > Click Plugins > Click Upload > Choose Zip, locate your Zip file and Install. If there are any complications doing it this way, then you can follow the instructions below:

STEP 1
Upload the ‘social-toolbar’ folder to the ‘/wp-content/plugins/’ directory. Via FTP, just place the folder into the plugins directory.

STEP 2
Activate the plugin through the ‘Plugins’ menu in WordPress.

STEP 3
Adjust all your custom settings in the Social Toolbar Settings page.

STEP 4
Insert all your social network links in the Social Profiles page.