Social Media Toolbars For Websites – Best of

By . Filed in Tools

The addition of a social media toolbar to your website can provide a wonderful user experience and large marketing exposure. The connection between your visitors can be tightened up as they will be able to share news directly with each other. The social media revolution has taken a sharp turn for the best with these fantastic new toolbar software packages.

Both easy to implement and customize, a social media toolbar is the perfect way to garner more attention and page views from your users. If you already run a powerful social media marketing campaign then chances are good you have a personal Facebook and Twitter account. Likewise your visitors will be eager to check these out and share your content.

social media bars

I have gone in-depth with three of the most popular web toolbars on the net. These all include standard share links with profile information and possible customizations. Ultimately the choice is yours for which software would work best on your website.

Spend a bit of time playing around with them and see if you can find one you like best!

Social Networking Features Explained

If we’re going to jump into sharing toolbars first it may be wise to explain how these features can benefit you. As a webmaster your content truly is king. And as more people can find and view your content online you’re sure to grow a loyal fan base.

The ability to connect with others online today is unlike anything ever seen before. Your visitors now have the option to run full in-browser group chats and Instant Message conversations directly from your toolbar. Not only this, but the most prominent examples also include sharing features to shorten page links and get them out into the biggest networks for truly viral marketing.

Your average user will enjoy this interconnectivity as is shaves time off their visit. With such a powerful social media sharing bar there’s no need to require account signups and custom forms anymore. You’ll be able to load the toolbar features from page-to-page without any programming knowledge!

If you happen to already be using a few sharing badges on your blog posts that are certainly okay. After all you should conclude that adding a sharing toolbar only increases the total number of shares for your articles. Users are willing to Facebook share and re-tweet your best posts, but not if it requires a lot of work on their end. In web design and user experience design the quickest solutions are often the best ones.

Breezy Installations

Along with an overview of each toolbar I will be offering a standard protocol for installing each one. The most popular toolbars fully support the big CMS systems of today. Notably WordPress and Google’s Blogger are the two biggest and widely-accepted CMS’ for blogging online.

installing social media bars

If you run a standard website it’s also possible to install any toolbar you like. The requirements for each toolbar aren’t so strict that you are unable to work with custom HTML. In fact, I find it a whole lot easier to customize and move the code around in my own website. If you have a straight HTML/CSS site with no CMS backend it shouldn’t require a lot of work to get up and running, but you must have at least basic knowledge of HTML tags and scripts before going to implement any of these.

Integration features are phenomenal amongst the whole cast of toolbar options. Twitter and Facebook are the standard components for a toolbar launch and are often included with any online branding, but you will also find direct RSS imports and YouTube video support as well.

This means your visitors can track the latest posts and even watch embedded YouTube videos directly from your website!

1. Meebo Bar

Meebo is one of my favourite services in web 2.0. They offer a direct connection with a large number of IM chat accounts including AIM, Yahoo!, MSN, ICQ, Jabber, and Facebook Chat. Thus it’s important to note their toolbar also supports these features, and many more!

meebo social media bar

The social components of their website are vast and ever-changing. If you have been a user of Meebo then you’ll understand how the company has transformed over many years. Their chat features are so advanced that you’ll be hard pressed to match them on any other service. Additionally the ability to directly share links and videos in-chat is unprecedented by today’s standards.

Installation and Customizing Options

To get your own custom toolbar, visit Meebo for sites or clickFor Sites at the top navigation of Meebo’s main page. This will bring you right onto the toolbar page which explains some features and offers a brief demo clip of how the toolbar looks. You should spot a large yellow-orange button which reads Get it Now.

get meebo now

Click and you’ll be redirected to a signup or login page. If you’ve already got an account with Meebo, simply login and you’ll advance onto the next step. However for those without an user account it only takes a few seconds to fill in data and confirm their rules. You aren’t even required to validate the email address right away. Again another small yet convenient titbit.

The second step of registration requires your website name and URL. This is stored on record and in your custom Dashboard to make sure you don’t mix up toolbars. If you’d like to run a single toolbar on many websites this is also possible from your Admin dashboard panel.

site setting

Now to deploy your new toolbar live you’ll be required to select a CMS. If you are a WordPress user Meebo has taken things into their own hands with a custom WP plugin. After you download their .zip archive just install the files like any standard WordPress plugin. Unfortunately if you’re on any other blogging systems including TypePad, Blogger, or Movable Type you’ll have to manually add HTML code into your template.

meebo integration

This may scare off those who aren’t exactly web-savvy, but don’t be discouraged! Meebo has actually offered steps to walk you through the line of processes required to edit each custom CMS or even your own personal HTML webpage. After this everything should be up and running properly on your website.

Now we can move into customizations and personalizing your toolbar. Initially you’ll be working from a blank slate with no icons or connections, but as you choose between many social media options Meebo will update your settings and automatically apply them into your script.

meebo engagement icons

I have listed a few of the obscure possible badges:

  • Recent photos from a Flickr feed
  • Any update from an RSS feed
  • Collection of YouTube videos from any channel
  • Submit article or vote up on Digg
  • Like and share URL into StumbleUpon

Collective Sharing

If enabled, you can give your visitors the option of sharing your content on their own accounts. This means your Meebo toolbar will work for both displaying content and sharing it via the World Wide Web. Your users who can log into Meebo may personally add their accounts for Twitter, Facebook, Google Buzz, or IM chat.

The JavaScript code from Meebo’s toolbar enables web objects to be draggable. If turned on, your visitors may click and drag images, videos, and other media from your page directly into their sharing application of choice. This will automatically include a new short link to your article and update their account at the press of a button.

As you begin to build a loyal fan base you should notice more and more content going viral. The amount of network sharing is unlimited and poses for a vast selection of opportunities. With Facebook and Twitter alone your website could gain tens of hundreds of backlinks on just a single article with your own Meebo Toolbar. To check out a live demo visit their business demo page with functioning social badges and even advertisements.

2. Wibiya Toolbar

The Wibiya Toolbar boasts many similar features as the Meebo. You are able to customize individual apps on your toolbar and select integration services such as Twitter and Facebook.

The bar is also displayed towards the bottom of your web page in all browsers. The JavaScript code is indeed also very similar. Your visitors will be able to share links and access your social services or RSS feeds. One area Wibiya is lacking is support for a larger chat base. Although the toolbar does support group chat apps, Meebo hosts a very large network of users which far exceeds what Wibiya could offer.

wibiya social media bar

But the Wibiya toolbar goes above and beyond to demonstrate the most popular networks in social media. You can install a basic free version with no strings attached. However if you are looking for custom branding and support I recommend one of their premium plans from $10-$23/month.

Installation Process

The installation process is again offered in step-by-step format for those less technical in mindset. Find the Get it Now link in their top navigation or it can be alternatively found as a button straight from Wibiya’s home page. This will open a page featuring a small signup for holding details for your new toolbar.

wibiya get it now

If everything is accepted and looks good you’ll be brought into the stage 2. Here you must select a choice for your custom toolbar theme. Wibiya will automatically pull the favicon.ico file from your website and attempt to use this for your logo. Since the toolbar itself isn’t very tall this icon is the perfect branding graphic, but if you’d like to use another image Wibiya allows you to upload an alternative.

After picking your toolbar style we move onto step 3 where things get juicy. Wibiya features a fully stocked app store for your toolbar. On the signup page you’ll initially only be offered 12 popular applications to choose from. However after the fact you’ll be able to edit your account settings and add some very cool features, but for now just select a few and hit Next.

For some of the apps you’ll be required to enter usernames or URLs. For example, to include recent tweets or YouTube videos Wibiya will need to know your Twitter username and YouTube channel ID, respectively. If you would rather add this info later just choose 1 or 2 apps for now, as you can always customize the toolbar apps from your account dashboard.

Finally after everything has been accepted you’ll be brought to the embed page. Again WordPress users get off lucky with a custom Wibiya plugin compatible up to version 2.9, but surprisingly they also offer plugins for some major CMS’ including Drupal and Joomla!. For Blogger users Wibiya will actually redirect to your blog’s Dashboard and add a new widget for you!

Anything else such as vBulletin, Tumblr, TypePad, or custom HTML will be required to install the code manually. This process isn’t so bad and works similar as the Meebo toolbar would. Just find a place in your code where JavaScript can reside (ideally before the closing </body> tag) and copy/paste the embed block. Once you’ve finished click Done and you’ll be sent to your newly created Account.

Wibiya Dashboard Settings

Initially the Wibiya website may seem a bit daunting. There are a lot of settings to go through, but you can’t really mess anything up by playing around. So spend some time in your admin backend panel and see what features you can work with.

wibiya apps

The first place I recommend stopping by is the web applications directory. In their top links find Add Applications and click on it. This will spring you onto a new page with dozens of possible web apps to choose from. Simply hover over a block and you’ll see an Install link appear.

I have added a small list below of my favourite Wibiya apps.

Spend some time playing around with each of the apps in your toolbar. Only through trial and error will you figure out an angelic combination to fit your website perfectly. Also try gathering feedback from your visitors to see which apps they find the most useful for sharing and interacting with others.

Back on the Dashboard home page you’ll notice a new tab for Analytics data. Click here and you will be presented with daily updates on your traffic stats. Not only this, but Wibiya also records traffic and usage of individual app from your toolbar. This means you can see who is sharing your links and over what networks (Twitter, Foursquare, Facebook) in real time! Amazing technology which initially took me by surprise.

wibiya analytics

From their top navigation click Edit Toolbar and you’ll be brought to an overall settings page. This is where a majority of your edits can be made to customize look, colors, placement, and interaction with your Wibiya toolbar. If you can’t find the link anywhere just click here to be redirected (must be logged in).

There are a lot of possible features to edit and append into Wibiya. If you have the convenience spend some time in a sandbox, install on a test website or blog. This will give you the opportunity to familiarize yourself with the Wibiya installation process and customization with new apps. Keep in mind the support staff is open 24/7 for new tickets and are very speedy with replies.

3. BumpIn Toolbar

The third and final toolbar software for your website comes from BumpIn. Their website explains a lot of what the social toolbar is about and why it was built. They include all of the standard features you’d expect from a social media toolbar including Twitter and Facebook integration, live chat, Google searches, and a whole bunch more.

Specifically the instant messaging and chat groups are very popular with BumpIn. Their network was designed in a social manner where users are able to share chat invites between one-another easily. The toolbar code is super light and runs very quickly from page-to-page. One of the best features I enjoy is instant notifications to all your visitors.

bumpin social bar

This means if you have a new post or new information to share it can be sent directly to all your current and incoming traffic on the website. Visitors browsing your page will instantaneously be shown a notification popup with details and a link, if you choose so. The popup isn’t intrusive at all and easy to close if your visitors simply aren’t interested.

Install BumpIn Social Media

To get started click the large orange button labelled Get a socialbar now. Similarly you can just click here which brings you into their check out process. The BumpIn toolbar is completely free to register and use, but they have designed a signup system which uses new account registration in the form of a “checkout”.

get bumpin

In a reverse manner, you’ll first be choosing the apps you wish to run. In the left sidebar you can sort the app list by popular, social, chat, and other options. To add any app simply click the icon and you’ll be asked to provide further account information if needed. This may be the longest step of the process, but well worth a great outcome.

The most common options like Twitter and Facebook are obviously available to select, but interestingly enough BumpIn supplies a few new features which can tie into your own RSS feed.

I’ve added my personal favourites below.

  • Rising Posts – Displays the hottest and most-viewed content from your website or blog.
  • Notifications – Notifies your visitors of updates and news directly from the toolbar. A great way of introducing new website features or launch details.
  • Translate – Immediately translate the page text of your website into a choice of dozens of different language options.
  • Top of the Page – An overlooked but popular selection for web developers. This button provides a jQuery scrolling effect which brings the user up to the top of their current page with no scrolling.

After you’ve chosen a few selected apps hit Next to encounter a popup modal dialog box. Inside you can customize the color, opacity, icon set, and positioning of your toolbar. If you notice, at the very bottom of the same page you’re on is a demo of your toolbar settings! This is a really neat step in the signup process which hasn’t been duplicated elsewhere.

bumpin customize toolbar

If you enter a URL for your website it can be loaded in the lower portion of the page window. This overlays the BumpIn social media bar and displays a demo of what your website would look like given your current styles. If everything looks good hit Next to edit some additional settings. Here you can change some more advanced display settings, but the default is usually fine. Click Save and Continue to save your changes and move forward to the signup process.

Account Registration & HTML Code

Now that your customizations are complete you’ll have to register a new account with BumpIn. They don’t require much of any more details than the other choices, so the form shouldn’t take very long. There is no requirement for acceptance or review process. Once you’ve completed everything click Done.

If there were no errors in your report you should be directed to the embed code page. Unlike the other toolbars BumpIn displays the block of HTML embed code directly at the top of your screen. The instructions say to copy and paste their code directly before the closing </body> tag of your website template.

Again if you are a WordPress, Drupal, or Joomla! user then consider downloading the proper plugin file instead. To access these simply click the corresponding CMS icon and you’ll be shown a download button. This shaves a lot of time off your installation and makes things a whole lot simpler for you. Also Blogger users have the ability to auto-import a new widget directly from the BumpIn signup page.

Ultimately BumpIn is a fantastic choice for your website. All three of the social media toolbars are truly fantastic in their own ways. As I mentioned before spend a little time toying around with each system to see which can fill your needs the best. They can all generally support the same style of social media sharing, so ultimately the toolbar of your choice comes down to preference and usability options.

WordPress 3rd Party Plugins

All this talk of social media toolbars has driven me to browse through WordPress plugin archives for some alternatives. Although these aren’t fully scalable social media toolbars the three plugins below are great for any WP blog. Even if you are a standard webmaster you may enjoy testing these plugins with your new sharing toolbar and see how they go over together.

The WordPress Bar

The WordPress Bar creates a solution for those trying to capitalize on page views for external links. This feature was built first at Digg.com where users would click a link leading off-site and be directed to the page with an added Diggbar on top. Well with this plugin your visitors will be directed off your blog page to external links but still keep a small toolbar towards the top of each page.

Additionally you may include up to 16 social media sharing links into this new toolbar. This makes it much easier for visitors to share your links live and keep up with your website articles while also browsing around the web. Analytics stats are also tracked and can be displayed within your WordPress admin panel.

Check out the brief video below for a rundown of the features in The WordPress Bar. Their plugin screenshots are loaded with some great UI photos. Take a peek if you are interested.

BuzzGrowl

The BuzzGrowl toolbar is very similar to the social media toolbars discussed above. Once installed this will display a small block in the corner of your website which scrolls down the page as your visitors do. It provides a one-click source for sharing links on many popular social networks.

BuzzGrowl

Customizing the styles and display of social icons is also a breeze. The plugin comes with support files which you can edit yourself to match your website theme. Support for one-click sharing to Facebook and Twitter is huge these days, and being able to customize the look and feel only adds to the credibility of this plugin. BuzzGrowl has been tested and working up to WordPress 3.1.3.

It has only been given two ratings in the WordPress plugin system and downloaded under 1000 times as of writing this article. It’s still a fairly lesser-known module for WordPress users which can replace the social media toolbar functionality altogether. Check out their plugin screenshots to get a better idea of how this works.

Sharebar

The Sharebar is a much more popular plugin from WordPress and has been tested up to version 3.x. This adds a completely customizable vertical sharing toolbar onto each of your blog posts. This trend started on Mashable and TechCrunch a year or two ago and is now listed on many popular web blogs.

You have the option of changing Sharebar’s settings from vertical to horizontal, which also switches between big and small icons. You can edit raw PHP data to implement the code wherever you’d like. Also the ability to limit sharing networks only to solutions you would need. This may include Twitter, StumbleUpon, Google Buzz, Digg, Reddit, or others.

If you run a fairly popular web blog or online magazine I highly recommend Sharebar. It’s a fantastic plugin which requires almost no maintenance to keep running, maybe the occasional upgrade. And even still WordPress can generally handle this from the admin panel.

The files are lightweight and composed properly of HTML/CSS with JavaScript inline code for share badges. They’ve also got a host of screenshots which you can check out from the WP plugin page. If you run a blog and plan on installing a custom social media toolbar you really should check out WP’s Sharebar, too.

Conclusion

The social media landscape has grown increasingly popular in recent years. We are faced with a growing Internet population more powerful currently than ever before in history. Thus it’s understandable how more content and information are being shared across dozens of networks each day.

These few social media toolbars are great additions onto any webpage. They can improve user experience rates for static content websites, digital magazines, online blogs or social news communities. The list seems endless with so many possibilities to customize your sharing features! And with live chat your visitors are more connected than ever before.

If you have some time play around with each and let us know what you think. Feel free to share your thoughts on the three toolbars we reviewed, or additional links for other social media sharing resources. And for those currently running a toolbar on your website let us know how that has worked out for you and your visitors.

Author:

Jake is a user experience designer for both web and mobile platforms. Having over 4 years of freelance projects under his belt, he frequently writes articles on topics of modern design trends and social media. You can check out some of his work on Dribbble or follow his tweets @jakerocheleau.

Advertisement