Slick Social “Side-Out” Buttons in WordPress

One of the best ways to integrate the pull of social media with the more traditional online blogging format is to use social media “share” buttons to encourage users to communicate with their friends about an article or page that they really enjoyed. These buttons are typically paired alongside every single post, allowing for piece-by-piece sharing of a site’s best work. While some websites have taken to turning these buttons into central design elements, other websites prefer a more subtle approach. Indeed, the key to the survival of any blog is to integrate with social media websites without becoming beholden to their influences and features. For this reason, a large number of sites prefer “slide-out” buttons that take advantage of jQuery or CSS3.

These buttons are somewhat visible upon first glance, but their biggest features are hidden away. Only when a user hovers their mouse over them or clicks a small image, will their full size and feature set be revealed. This subdued approach allows blogs to integrate in a low-key, usable way, without giving over their feature set to the social networks with which they are typically in direct competition for viewers and even revenue. There are several great ways to do this within WordPress, and they cater to users of varying experience levels. Both amateur and advanced users will appreciate the utility of these methods that allow for easy and simple communication with major social media websites.

Using a WordPress Plugin to Get the Job Done: KN Social Slide

Available through the “Extend” gallery of available plugins, the KN Social Slide plugin is easily one of the most usable and subtle ways to integrate social media sharing into new and existing blog entries. The plugin actually treats blog entries like they’re at the top of a “stack,” and allows the site’s readers to navigate the post’s content, and its sharing options, as if they were perusing through a few tabs in a typical printed file.

The tabs used to share the website’s post or page content with social media websites are placed at the top, left, or righthand side, of every post. When they’re left alone, these tabs are pretty simple. They employ the color schemes and logos of the major social networking websites online, and they keep a slim and small profile that doesn’t require the website to greatly increase the height or width of its main content area. When left alone, these sleek buttons are hardly noticeable at all, and they’re far from invasive. They will not steal the blog’s spotlight and hand it to social media websites.

When clicked, however, the game changes completely. The tabs use jQuery and CSS3 to expand either upward or outward away from the post, revealing key content. In some cases, this means revealing previous “shares” to sites like Twitter or Facebook; in others, it means opening the website’s own social media feed in one of the available tab.

Both approaches are key ways to encourage viral interaction and promotion of a website’s content, and both approaches are loaded in the same sleek format. The tab, when expanded outward from the post, maintains the social network’s logo and color scheme when presenting social content.

For Twitter, for example, that means using a light blue color scheme with he typical “bird” logo and traditional fonts. Social media content — such as status updates, Tweets, or shares — is displayed in a neat list within the expanded tab area. When users are done sharing to their friends, or when they have finished reading the web it’s own social media interactions, they simple click on the tab again to collapse it back “behind” the post they’ve been reading. They can then resume reading that post, or scroll down to the next post. They can also click another social media tab and expand more interactions on a different social network.

The plugin is free, and it’s currently setup to work with Twitter, Facebook, and the Google+ social network. In the case of Google+, the primary use of the included tab is to “plus-one” the story and share it with friends. Facebook users can expand the company’s tab in order to “like” a post, or share it with their friends via the website’s increasingly common Timeline feature. The Twitter tab allows users to read the website’s tweets or share the post to their friends via a tweet of their own. In some cases, the URL to the post or page can even be shortened into a “micro-URL” to free up characters within the tweet itself.

The KN Social Slide plugin is actually a relatively new way to employ social media and the ever-popular sharing features that accompany these websites. Even so, its features are advanced and its implementation is easily one of the most robust and aesthetically pleasing ways to engage with social media websites on WordPress blogs. The KN Social Slide plugin is easy to use, and it can be installed either via FTP or by using the built-in plugin installation features that are included in the WordPress Dashboard for users of version 3.0 or higher of the software.

Using a Different Plugin: The Slick Approach to Social Sharing via WordPress Blogs

Of course, the KN Social Slide plugin is not the only game in town when it comes to sharing a blog’s content with users around the Internet. Indeed, long before this recent entrant came along, WordPress users were developing other ways to slide social buttons out from underneath a typical post’s or page’s content. In most cases, those users were employing a plugin known as the Slick Social Share Buttons plugin. This extension of WordPress functionality also created a tab, of sorts, when sharing WordPress content with the world via social media websites. And its longer time in the “Extend” gallery of plugins gives it a leg up on the competition when it comes to the number of websites supported by the plugin.

Using the Slick Social Share Buttons plugin for WordPress, site administrators can create a tabbed box that rises from the top of a post, slides out from the left or right side of a post, or floats right next to every post and page contained within the database and displayed on the site. This plugin features a green “share” icon, and that icon is placed right alongside bold “Share” text. When expanded, the plugin will display a relevant link to every social media website that a user has configured within the WordPress Dashboard.

That configuration is, of course, done through the use of a custom control panel page that is paired with the plugin after it has been installed and activated. This control panel page simply requires the administrator to enter the proper information for every social network in order to enable sharing. That means a user account information or API links between sites like Twitter, Facebook, or Google+, and the WordPress blog itself. All told, the plugin supports Google+, LinkedIn, Facebook, Twitter, StumbleUpon, Digg, and Pinterest. Only the social media websites whose information has been entered and configured will display a “share” or “like” badge within the tab. Websites without this information will simply not be included, and users will not be able to automatically share content with their friends on those websites.

The interface of the slide-out tab can also be customized using the same custom control panel that dictates which social media websites are included when the tab is expanded. WordPress website administrators can control how quickly the tab slides out using milliseconds, as is customary with the type of jQuery that powers this plugin. A different “share” icon and text can also be specified in this custom control panel, helping the social slide-out tab to better blend with an existing design’s aesthetics.

Leaving Behind the WordPress Plugins: Using Independent CSS3 Code to Perform the Task

WordPress plugins are great and, in most cases, they’re the preferred way to generate slide-out tabs for social media sites and their unique sharing features. In at least one case, however, plugins have some competition from independent, cross-platform developments. One such development is the CSS3 Social Slideout Tabs development at This independent community of coders has managed to put together a plugin that combines CSS3 and jQuery to develop social sharing buttons outside of the WordPress environment itself. Best of all, this unique development doesn’t depend on WordPress, and can be used in virtually any piece of online software that is used to manage content from text to photos — and beyond.

The CSS3 Social Slideout Tabs code doesn’t come free, and will cost website administrators a relatively reasonable $ 2 licensing fee. That fee is a one-time deal, and it allows for unlimited updates and upgrades to the code as social media websites change their features, APIs, and other procedures. Best of all, it won’t break because of a WordPress update and it won’t require an extensive amount of waiting time when a developer fails to meet a new WordPress version’s demands.

Again, this approach is not the best route for every website owner. The best case for its use online is likely on websites that combine a WordPress installation with other types of content management. In many cases, this applies to websites who use WordPress’ features for written content, but prefer a different setup when creating photo galleries, video sharing websites, or even professional portfolios. Its ability to provide a uniform experience and interface across all of these platforms is a significant asset, boosting usability and helping to integrate these disparate platforms in a meaningful way for end users.

Social Media Integration: No Longer an Option for Serious Website Owners

It’s probably pretty likely that some WordPress website owners read this article and scoffed at the notion of linking their traditional blogging site with social media sites around the internet. Indeed, as these websites have taken attention away from blogs, their owners have resolutely refused to interact with those sites just based on principle alone. That, however, is a dangerous decision for the long-term success and survival of the website itself.

In recent years, Google has completely changed its search engine ranking algorithm to promote websites that encourage user interaction with social media websites and self-hosted comment sections attached to pages and posts. Websites that leave social media integration out of their designs will find themselves falling onto the back pages of a Google search where they once excelled and, without embracing social media, that’s exactly where these websites will stay.

It’s pretty easy to integrate social networking sites in a way that is both highly usable and extremely low-key. The combination of CSS3 and jQuery libraries means that “like” and “tweet” buttons can virtually disappear into the background until they’re required by a user. Because the option still exists, and the sharing is still going on, administrators will enjoy the benefits of better Google rankings without subjecting themselves to the often gaudy and intrusive buttons promoted by the social networks themselves. That, in most circles, is known as a “win-win,” and it’s one that every website should be actively pursuing.

You might also like…

Using jQuery to Validate the Standard WordPress Comment Form →
Using the Power of the .htaccess File to Improve WordPress SEO →
Tracking Social Media Sharing and Button-Clicks with JavaScript and WordPress →
For the Novice Developer: The Anatomy of a WordPress Theme →
Focusing on Usability with an Enhanced Pagination Design in WordPress Entries →

Speckyboy Design Magazine

Leave a Comment