How To Add Floating Social Media Buttons In WordPress

As a blogger, it is extremely important not only to write good content but at the same time also create a convenient post sharing mechanism on your blog using which it becomes extremely easy and intuitive for any visitor to be able to share any article on your website with their friends using social media. As a blogger, the objective is to write good content and increase loyal readership for your blog. This involves a lot of hard work not only for building the content but also for creating awareness about your blog/spreading the word.

subscribeMedium like twitter and facebook today aid to share any information on the web with a huge number of people in a matter of seconds. If the information eg is about an article on your blog which adds a value-add for the reader, it indirectly will translate in earning that loyal readership. There are a lot of plugins available today which enable you to add various kind of buttons to your post right from enabling tweeting of your post to submitting the same to sites like delicious and stumble. However, rather than having those buttons above/below the post, a more useful model is to be able to create floating buttons which will have fixed location and will always be visible to the reader so that he can instantly click on the icon and share the link. Blogs like Mashable use a floating social media bar on the left side of the posts.

If you are happy to make your hands a bit dirty by playing around with a simple PHP/CSS code which takes only a couple of minutes to be added and enabled -- I would recommend avoiding any specific plugin and be the boss of your own changes. I also had a similar requirement and I had initially used the Sexy Bookmarks plug-in for the same. However, now I have also added the floating social media button bar on my wordpress blog as you would be able to see on the left of this post. My thanks are due to Shrihari from GotChance which enabled me to develop this floating button bar.

Basically, there are two things that are required to be done.

CSS Changes For Subscribe Options

Using CSS, specify the locations of the each individual button -- In this example, all buttons have fixed location and are aligned to left of the screen. Regardless of top/down scrolling of the page -- buttons would remain at the same location. The CSS change needs to be done in Stylesheet (style.css). The code that I used is as given below. Note I am first putting down the CSS code corresponding to the <Subscribe> buttons here. The code for <Share> is further below in the post.

 
img, a img { border: 0; }
        #twitterbadge
        {
            position: fixed;
            left: 0;
            top: 84px;
        }
        #facebookbadge
        {
            position: fixed;
            left: 0;
            top: 116px;
        }
        #rssbadge
        {
            position: fixed;
            left: 0;
            top: 148px;
        }
        #emailbadge
        {
            position: fixed;
            left: 0;
            top: 180px;
        }
        #subscribebox
        {
            position: fixed;
            left: 0;
            top: 72px;
            width:36px;
            height:222px;
            padding:0px;
            border:0px
            margin:0px;
            z-index:-1;
        }

As you would notice above, we do a few things

  • Create individual badges for facebook, twitter etc
  • For each badge we specify that it’s location is fixed and on the left side of the screen.
  • The exact place is specified by giving the <top> directive which tells the position in px relative to top of the screen. So essentially we say that create a badge at a fixed location from top of the screen on the left of the screen.
  • If you notice closely the individual badges ( except for the last one ) are spaced out by 32px which is the height/size of the images used for individual badge eg twitter.
  • The last badge is actually a container which will have an image with Subscribe text on the same and would visually show the subscribe/share buttons clubbed together under a light blue background. This will visually aid the reader to distinguish that one set of buttons are for subscribing while the other set is for sharing
  • The first <img> directive tells that any images used in the floating button CSS should have their border attribute set to 0. This is just to make sure that the badges look identical and is not mandatory to use if you know that you are using similar style image icons.
  • Also note that the last( bottom ) badge starts at 72px which is above twitter badge ( 84px ) and it’s height is 222px which engulfs the four badges 32*4=128px + the height of the text <Subscribe>.

PHP Changes For Subscribe Options

My intention here was to show these share buttons only on single posts and not on home page or archives. So all I needed to do was to add some code to Single Post ( single.php ) that will now specify what needs to go in these individual badges in the form of images and hyperlink. The PHP code as added in single.php is given below. Note that PHP directives like get_permalink work good within a PHP loop where post context is there. If you use them outside the loop, you might just get permalink information for the first/last link on the page eg if the post page contains multiple links. So to ensure that you get the right post URL and title, add the below code just above the following line of single.php


<?php endwhile; else: ?>

The PHP code is as given below.


<div id="subscribebox"><img src="subscribe.png" alt="" /></div>

<div id="twitterbadge">
            <a href="http://twitter.com/inficone"><img title="Follow On Twitter" src="twitter.png" alt="Follow On Twitter" /></a></div>

<div id="facebookbadge">
            <a href="http://www.facebook.com/pages/INFICONE-The-Cone-Full-Of-Information/264699634813"><img title="Follow On Facebook" src="facebook.png" alt="Follow On Facebook" /></a></div>

<div id="rssbadge">
            <a href="http://feeds.feedburner.com/Inficone"><img title="Follow Using RSS Feed" src="rss.png" alt="Follow Using RSS" /></a></div>

<div id="emailbadge">
            <a href="http://feedburner.google.com/fb/a/mailverify?uri=Inficone"><img title="Follow Using Email" src="email.png" alt="Follow Using Email" /></a></div>


As you can notice above, all it is being done now is the following

  • Fill the container specified in the CSS by the related images and their hyperlinks.
  • Specify the title text for each of the images so that if the user hovers the mouse, the purpose of the button is known
  • The [subscribebox] just has an image but no hyperlink since it is just a container for the different badges and shows visual information to the visitor
  • In case you use this code, you would need to change the hyperlinks to the ones corresponding to your blog. Additionally, the relevant images would be required to be uploaded to the web server.

So once we have looked at CSS and PHP changes for Suscribe options, lets see what needs to be done for the Share options. Note that the URL/Hyperlink to be used corresponding to sharing your blog article on various social sites are typically available on those sites itself. The best option is to take the URL from there and use on your blog for sharing. For creating the sharing buttons, I used the following CSS and PHP code.

CSS Changes For Share Options

 #tweetbadge
        {
            position: fixed;
            left: 0;
            top: 324px;
        }
        #fbsharebadge
        {
            position: fixed;
            left: 0;
            top: 356px;
        }
       #deliciousbadge
        {
            position: fixed;
            left: 0;
            top: 388px;
        }
        #stumblebadge
        {
            position: fixed;
            left: 0;
            top: 420px;
        }
        #diggbadge
        {
            position: fixed;
            left: 0;
            top: 452px;
        }
        #sharebox
        {
            position: fixed;
            left: 0;
            top: 308px;
            width:36px;
            height:222px;
            padding:0px;
            border:0px
            margin:0px;
            z-index:-1;
       }

PHP Changes For Share Options


<div id="sharebox">
<img src="share.png" />
</div>

<?php
$shortURL = file_get_contents('http://tinyurl.com/api-create.php?url=' . urlencode(get_permalink()));
?>
<div id="tweetbadge">
<a href="http://www.twitter.com/home?status=Liked_This_Article--<?php echo str_replace(' ', '+', the_title_attribute('echo=0')); echo '+' . $shortURL; ?>" rel="nofollow" target="_blank" ><img src="twitter.png" alt="Tweet This Post" title="Tweet This Post"  /></a>
</div>

<div id="fbsharebadge">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" rel="nofollow" target="_blank" ><img src="facebook.png" alt="Share Post On Facebook" title="Share This Post On Facebook"  /></a>
</div>

<div id="diggbadge">
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" target="_blank" ><img src="digg.png" alt="Digg This Post" title="Digg This Post" /></a>
</div>

<div id="deliciousbadge">
<a href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id));  ?>" rel="nofollow" target="_blank" ><img src="delicious.png" alt="Add To Delicious" title="Add To Delicious" /></a>
</div>

<div id="stumblebadge">
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" rel="nofollow" target="_blank" ><img src="stumble.png" alt="Stumble Upon" title="Stumble This Post"  /></a>
</div>

As you can notice above,

  • We are specifying URL and image for each button in PHP while it’s location is being configured in the CSS.
  • Since the buttons are used for sharing, and the URL of the post is required -- we use the_permalink() php function which returns the post URL. Similarly get_the_tile() gives us the post title.
  • For twitter case, we use tinyUrl service to convert the post URL to a short link so that it can be easily share on twitter.

So as you can see, a simple CSS/PHP code change can easily help you to create desired floating buttons in wordpress. The icons/buttons used by me were obtained from social media icons pack at FindIcons. The subscribe and share images were created using Inkscape.

I hope you would be able to also create similar floating buttons on your blog using the information available here. If you liked this post, do share it ( preferably using the floating buttons on the left of the post 🙂 ). If you are aware of any better ways to do this -- do share the same in the comments section. You can always submit any useful tools/web services/tips to us.





Inficone runs on the Genesis Framework

Genesis Framework
Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!
Follow On Twitter
Follow On Facebook
Follow Using RSS
Follow Using Email
Tweet This Post
Share Post On Facebook
Digg This Post
Stumble Upon

Comments

  1. @Anders, Thanks for liking the content.

    I added the floating bar on single post pages only because when you want to share the content, you need to know which post is being shared and on a single post page it means that the post desired to be shared is the post on that very page. My home page for example has a number of posts listed – so if one uses the share button – I cannot find out which individual post does the visitor want to share.

    Nevertheless, if you want to make this change, you would need to add this code to index.php as well, taking care that the URL chosen for sharing are the right URLs.

  2. How can I make sure these floating boxes are on the index page as well as all other pages? Thanks for great post!

  3. Glad to hear that my article helped you create this 🙂 This Social Media bar looks great 🙂

  4. Thanks for the post! Helped me a lot! Thanks Again! I have edited the code, you can see how I am using the code at http://www.havefunforever.com/installing-themes-wordpress/

  5. Andrew Lagomarsino says:

    Not knowing where to put the CSS code that you provide, I experimented placing it in the stylesheet code in various places. The same is true for the PHP code: since my single.php code doesn’t have the line, “,” I didn’t know where to paste it.

    I can’t provide any snapshots since I’ve already removed the code–except for whatever code I missed that’s producing a question mark in a box on every page on my blog. That’s not a problem as I will hunt it down when a get some time. For a quick look on my site: [url=www.hivoptimalhealth.com][url].

  6. Andrew Lagomarsino says:

    Mr. Shivan Vaid, I absolutely love those share & subscribe buttons. They’re amazing, actually–compared to what’s available. I sue the Sidebar plugin, which I consider a really good feature but second best to your.

    Could you give me easier instructions on how to install the buttons? Your excellent article requires slightly better coding skills than I have.

    I tried repeatedly to follow your directions to install them, but never got closer than question marks in boxes stacked one on top of the other between the page title and text. (In fact, I still have one boxed question now on every page of my site.)

    Thanks.

    • @Andrew, Would appreciate if you could just put forward as to what exactly you tried and with what result( possibly a snapshot ) and also your exact objective wrt the layout.

  7. Interesting, but quite complex 🙂

    I am looking for scripts to add to conventional HTML pages. Are there any such scripts?

  8. Thanks Mushtaq, Glad that you find the post useful. Keep reading Inficone.

  9. That would be great help for me
    Thanks

Speak Your Mind

*

This blog is kept spam free by WP-SpamFree.