OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook Twitter Instagram
OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
OscarminiOscarmini
Home»Web Design Tips»Wordpress»How to Add Floating Share Buttons to WordPress without Plugin
Wordpress

How to Add Floating Share Buttons to WordPress without Plugin

Oscar FrankBy Oscar Frank2 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

It is quite simple to add a floating share button to your WordPress blog. All you need do is follow this step by step guide and you would have added your floating share buttons to your wordpress blog without any plugin.

floating share buttons for wordpress

 

 

This Floating Share Button Contains

  • Facebook Like
  • Twitter Share
  • Stumble Upon
  • Digg
  • Google Plus

 

Now to add the Sharebuttons to WordPress, Here is your guide

 

1. Login to your WordPress Dashboard and Click on Appearance > Widget

2. Drag the Text widget to your sidebar and paste the code below in the text area.

 

<style>
#pageshare {position:fixed; bottom:3%; left:10px; float:left; border: 1px solid #bbb; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:2px 2px 0 2px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id=’pageshare’ title=”Share This With Your Friends”>
<div class=’sbutton’ id=’gb’><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like layout=”box_count” show_faces=”false” font=””></fb:like></div>
<div class=’sbutton’ id=’rt’><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” >Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=”text/javascript”></script></div>
<div class=’sbutton’ id=’gplusone’><script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script><g:plusone size=”tall”></g:plusone></div>
<div class=’sbutton’ id=’su’><script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script></div>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script><a class=”DiggThisButton DiggMedium”></a></div>
<br/><div style=”clear: both;font-size: 9px;text-align:center;”><a href=”http://www.oscarmini.com/how-to-add-floating-share-buttons-to-wordpress-without-plugin” rel=”dofollow” target=”blank”><font color=”black”>[Get Widget]<font></font></font></a></div></div>

 

3. Save and view your blog. If you wish the floating share button to appear at the right hand side of your blog, find left:10px; in the code and change to right:10px;. You can also change the background color from white in my code to any color of your choice by finding background-color:#ffffff; and change #ffffff to whatever color code you wish.

You can see my floating share Button at the left side of this blog.

Share Buttons Social Media

Related Posts

10 Insane TikTok Trends That Shook The Internet

May 16, 2023

WordPress Blog Hosting made easy with SeekaHost Blog Hosting Control Panel

December 4, 2020

5 Effective Ways to Spy on Whatsapp without the Target Device

May 11, 2020
View 6 Comments

6 Comments

  1. Alicia on August 1, 2013 2:52 pm

    Sorry, this doesn’t actually work. It just makes the HTML show up as text.

    Reply
    • Oscar Frank on February 14, 2014 12:43 pm

      Hi Alicia,
      That’s really weird cos HTML would definitely not show up as text when saved as a widget in wp. Have u check if there are issues of plugin conflicts in your wp?

      Reply
  2. Omoluabipoint on August 5, 2018 1:32 am

    How to do that for blogger site?

    Reply
    • Oscar Frank on August 6, 2018 7:15 am

      You might want to use the search feature in the sidebar. There’s a post on that.

      Reply
  3. Omoluabipoint on August 5, 2018 1:33 am

    How to do that for blogger site?

    Reply
    • Oscar Frank on August 6, 2018 7:14 am

      You can use the search form. I made a post on that some time ago.

      Reply

Leave A Reply Cancel Reply

Recent Posts
  • 10 Insane TikTok Trends That Shook The Internet
  • 10 Tech Innovations that will Change the Way we Live & Work
  • Curacel, a Nigerian Insurtech Startup, Raises $3 Million
  • Google Redesigns and Upgrades Gboard Toolbar
  • Internet Explorer to be Permanently Disabled
Get Exclusive Tech Insights!
Oscarmini
Facebook Twitter Instagram YouTube
© 2023 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.