Our Blog

- Posts Tagged 'Social Toolbar' -

For the release of Social Toolbar Pro 1.7 we added an animated hover (rollover) option for the social network icons. We also took off the social icon limit of 13.

Animated Hover Option:
animated hover toolbar

With this setting option turned on, it will add a very cool animated effect when the user rolls over your social icons. It will fade from your icon background color to your hover background color. TRY IT BELOW!

Turned off Social Icon limit:

We were getting request to turn off the limit of 13 allowed so they could add more social icons. Wish is granted.

PLEASE NOTE: Average of monitor resolutions are set to 1280 pixels wide (and many being even less). If you add too many Social icons and share buttons, then some of your share buttons will not show. Social Toolbar is responsive where it will hide from right to left when its not wide enough.

*Animation does not work in IE

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

youtube wmode opaque overlapp fix

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

plugin 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

plugin recent tweet

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

plugin 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

plugin 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

plugin facebook share

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

plugin social network profiles

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

plugin custom icon

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.

By popular demand we are proud to introduce a new feature to the Social Toolbar Pro, “Upload Social Profile Icon”. Cant find your favorite icon in our provided large icon library? You can now upload any icon you like from your own computer or URL.

How do I create a perfect Icon with a transparent Background?

When you purchase or upgrade the PRO version, you will be emailed a ZIP file, we have now included a 40×40 pixel Photoshop file with a transparent background. Open the Photoshop file and turn on guides. You will see we inserted ruler lines, try to keep your icon inside these lines for consistent look of the other given icons. Make your icon any color you like, if your currently using white icons on toolbar then best to create this one white as well. After your icon is ready, go ahead and save for web and save as PNG 24.

40 x 40 social icon

How do I add my new icon?

This step is very easy, just go to the “Social Profiles” page, scroll to the bottom and you will see the Upload icon fields. Give your icon any title you like, click upload button > locate icon > click insert into post, now insert the URL link for where you want your icon to link to and click save! After you check box to show your new icon, you can drag it up and sort it in any order you want.

You can upload any icon you like but we would suggest using the supplied template so your toolbar stays clean and consistent with the other icons in the toolbar.

Support Forum Coming Soon!

- Posted In News, Site Updates on 11.28.2011 with 0 Comments -

Keep checking back as we are currently in the process of building and testing our socialtoolbarpro.com online support forum. There will be 2 main categories: FREE Version & PRO Version. The forum will be open for anyone to join discussion topics ranging from; issues, questions, suggestions on how we can improve the Social Toolbar plugin, and more.

Welcome to socialtoolbarpro.com

- Posted In News on 11.28.2011 with 0 Comments -

Welcome to the official home of the famous SOCIALTOOLBAR & SOCIALTOOLBAR PRO WordPress plugins. Formally known as WP Social Toolbar, Social Toolbar is a wordpress plugin that installs a social toolbar on the bottom of your WordPress blog/website. You can customize and change the color of just about every aspect of the toolbar, show your recent Tweet, add multiple social network icons and url’s, add share buttons (Facebook Like & Tweet), display across full site or only on individual page, and much more!

Don’t forget to subscribe to our RSS Feed in order to stay up to date with all the SOCIALTOOLBAR news.

We have recently expanded and added lots of new features to create the PRO version. For a very affordable price, the Social Toolbar PRO premium plugin has lots of additional features such as; a larger library of social icons (70+), more share counter buttons (Google+1, LinkedIn and AddThis), dual placement options, smaller size version, language translation button and much more!

Still not convinced? Throughout this website you will find plenty of information to help you decide which version of Social Toolbar will best suit your website’s social needs. Once you’ve decided on a version you may want to visit certain sections of our site to help you become more familiar with the different functions of your new Social Toolbar.

Don’t forget to subscribe to our RSS Feed in order to stay up to date with all the SOCIALTOOLBAR news. We will constantly be blogging about; instructions & tips, new features, future upgrades & add ons, social networking news, and more…

  • Background Color
  • Border Color
  • Twitter Background
  • Twitter Text Color
  • Twitter Link Color
  • Icon Color
  • Icon Size
  • Button Color(Close/Show)
  • Twitter Bird Color
Live Demo Settings
 
RT @crowdSPRING: 30 Logo Designs Gone Wrong - Bad Logo Design examples for your inspiration - http://t.co/pJXrrXQJ1 hour ago
twitter rss myspace facebook linkedin flickr youtube skype email google+ pinterest