Brand Your Tweets with WP Tweetbox WordPress Plugin - Get it Free! X

How to Customize GetSocial with CSS3 Buttons

Learn how to quickly add awesome looking social sharing buttons to GetSocial WordPress plugin.

Customize GetSocial with CSS3In this article, I am going to show you how to quickly add awesome looking social sharing buttons to the GetSocial plugin on your WordPress blog using the power of CSS3. See the additional email and more buttons on this blog? We will discuss how to display these buttons once you have added the GetSocial plugin to your blog. If you haven’t done so already, you can download GetSocial and socialize your blog.

The additional buttons option in the GetSocial settings page allows you to add social media networks of your choice to the GetSocial box. All you need to do is grab the HTML code for the button from the respective social networking website and paste it in the additional buttons option enclosed within <div class=”sharebutton”> and </div> tags. For example:

<div class=”sharebutton”>
<!-- Code for additional button 1 -->
</div>
<div class=”sharebutton”>
<!-- Code for additional button 2 -->
</div>

AddThis makes it very easy to add social buttons of your choice to GetSocial. Just grab the code for your favorite social network from AddThis website and add it to GetSocial as described above. Let’s discuss how to add the Super Awesome Buttons powered by CSS3 (as on this website, see on the left) to GetSocial using AddThis.

Open the style.css file of your WordPress theme and add the following CSS3 code at the end of the file. Alternatively, you can add this code in the getsocial.css file located in /wp-content/plugins/getsocial/lib/ folder of your blog.

.addthis_share_btn a, .addthis_share_btn a:visited {
background: #222 url(images/btn-overlay.png) repeat-x;
display: inline-block;
padding: 5px 4px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 10px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover { background-color: #111; color: #fff; }
.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a span {
background: url(images/icons/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 15px;
}

.addthis_share_btn a.addthis_button_email span, .addthis_share_btn:visited a.addthis_button_email span {
background: url(images/icons/emailshare.png) no-repeat left;
padding: 1px 0 1px 16px;
}
/* Button Sizes */

.at_medium.addthis_share_btn a, .at_medium.addthis_share_btn a:visited { font-size: 10px; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);}
.at_large.addthis_share_btn a, .at_large.addthis_share_btn a:visited { font-size: 14px; padding: 8px 16px; }

/* Button Colors */
.addthis_share_btn.at_green a, .addthis_share_btn.at_green a:visited { background-color: #91bd09; }
.addthis_share_btn.at_green a:hover { background-color: #749a02; }

.addthis_share_btn.at_blue a, .addthis_share_btn.at_blue a:visited { background-color: #2b9fe2; }
.addthis_share_btn.at_blue a:hover { background-color: #1889ca; }

You can modify the CSS code further as you like to change the colors or customize other behavior. Optionally, upload the icon images for email and more buttons to your blog. You might need to edit the CSS code to change the icon image url accordingly.

Now, go to the GeSocial Settings page.

GetSocial Settings

GetSocial Settings

Paste the following code snippet in the Additional buttons option.

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = {
services_exclude: 'twitter,facebook,stumbleupon,email',
ui_offset_top: 20,
ui_offset_left: 60
}
</script>

<div class="addthis_toolbox addthis_share_btn at_blue at_medium sharebutton">
<a href="http://addthis.com/bookmark.php" class="addthis_button_email">
<span>email</span></a>
</div>

<div class="addthis_toolbox addthis_share_btn at_green at_medium sharebutton">
<a href="http://addthis.com/bookmark.php" class="addthis_button_compact">
<span>more&nbsp;</span></a>
</div>

Save your settings and you are done.

If you have more questions, suggestions or queries, feel free to post them in the comments section or use support forums.

Comments

  1. devi says:

    Tweet Button always missing even from your website.

  2. lonnie says:

    okay i like the simplicity of the Getsocial plugin, however there’s no css style sheet within the lib folder. All i see in there is the adminstyles.css . also I cannot use the additional buttons textarea. there’s no way i paste any code in there. i’m trying to make the share display properly, however my display looks zagged and uneven. most likely because i have no css file. why i dunno. isn’t it suppose to be already within the loaded plugin?

  3. LMaui says:

    I love this plug-in! I’ve tried and removed many social media plug-ins in WordPress, and this one I’ll keep. I’m having trouble with the email button, though. I followed the instructions above, but sending the user to http://addthis.com/bookmark.php when they click the email button is not a good experience. Instead, I want the email button to open an email message with the blog post title and permalink filled in, something like:

    <a href="mailto:?subject=&body= – ” class=”addthis_button_email”>

    Unfortunately, I don’t have the syntax right or something else is going wrong, because instead of seeing the post title and permalink in the email message, I see the php code. I’ve tried using “echo” and I’ve tried urlencode, but I can’t seem to get any combination of syntax to work correctly. Could you let me know how to make this work with your plug-in? Thanks!

  1. LMaui says:

    I have one other issue. I have the latest post on my home page. I’ve set the GetSocial bar to be shown with Posts, however it’s not showing with the one on my home page. If I select Posts and Home Page for where it should display, the GetSocial buttons that show on the home page do not contain the Permalink for the post there – they just have a link to the home page. This plug-in may not work for me after all, unless we can get it to include the bar on the post on the home page with its permalink.

  2. Prateek Modi says:

    Hello Riyaz,

    Love your plugin!!! Can you tell me how to edit the plugin so that it looks like this:
    http://mashable.com/2011/11/10/unexpected-social-innovations/

    Instead of looking like this: http://www.bollykings.com/vidya-balan-evolution-from-hot-to-dirty/

  3. I like your plugin very much. Thanks.

  4. Dick Dunlop says:

    Really confused with coding to be used to add facebook, also I have page and post enabled but it only shows up on posts…

    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=272429276111322″;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    Kind regards
    Dick

  5. Mauricio says:

    I meant to say FB “Send”, not “share”.

    • Riyaz says:

      Mauricio, the Facebook Send button is not currently supported, but might be added soon. If you like to add it manaully through additional buttons section, you will also need to include Facebook SDK in the html <head> section of your pages.

  6. Mauricio says:

    Hi Riyaz, great plugin! How would I be able to implement the new FB “share” right after the “like” which is shown here on this site:
    http://www.socialblogr.com/2010/05/how-to-add-follow-me-on-twitter-button.html

    And what about a Print icon with the same/similar image like this (BTW, I prefer your plugin):
    http://www.diggdigg2u.com/

    Thx in advance!

  7. Bill Powers says:

    Awesome! I have very little experience with CSS and was able to add this to our wordpress site and modify the CSS to show the email/more buttons. Very, very cool!!
    My only question is: how do I get it to display on our home page? (it displays correctly on all others)

    • Riyaz says:

      Thank you Bill. Unfortunately, by design, the plugin won’t show up on the homepage. This is because only one instance of the plugin can be displayed on a page at a time and homepage generally has multiple posts. This might confuse the readers as to what post they are sharing.

  8. Aaron says:

    You rock! Thanks for putting this out there, was super easy to install. Nice work!

  9. patrick says:

    i tried this plugin and it was great… But it’s not working anymor on my website … Any idea?
    http://www.lepinceduweb.com

    Thank you

  10. Marco says:

    Hello, this is a great plugin! I’ve got a problem when I want to add the email button to the box. I uploaded the emailshare.png in the Images folder of GetSocial and I added the code posted above but in the box appears only a little piece of text called “email”. Where do I have to upload the email image?
    Another little question: it’s possible to show the box also in the homepage? Thanks a lot!

    • Riyaz says:

      You can place the emailshare.png file in the images/icons/ folder under your WordPress theme i.e. /wp-content/themes/your-theme-name/images/icons

      If the images or icons folder is not available, create it. Alternately, you can place the images anywhere in your site’s directory and edit the path to the image files in the above CSS code accordingly.

      The plugin does not support homepage functionality as yet.

  11. JK says:

    Hi Riyaz,

    I really like this plugin – thanks for sharing. A couple of issues/questions:

    A) Digg this button appears correctly in IE but not on Firefox. Do you know why?

    B) When I include Google Buzz button, on FireFox the page loads correctly however on IE, I do get “Script Error” in the status bar. When I remove it, the error in the status is gone.

    BTW, I’m using your latest version of the plugin (just downloaded yesterday). Please let me know where could be the problem.

    Also what plugin do you use that shows a little twitter form with some default text at the bottom of the post – I really like that too. Please let me know that as well.

    Thanks, JK

    • Riyaz says:

      I have tested this plugin on IE8, Firefox as well as Chrome and it works perfectly. Try clearing local IE cache and try again. If it does not work, let me know the version of IE you are using and also the URL of your blog where you are facing this issue.

      The Twitter plugin you are seeing at the bottom of the post is WP Tweetbox. You can find it here – http://www.riyaz.net/wp-tweetbox.

  12. Jesper says:

    Hello,

    Can’t get the FB like button to work in your plugin? I’m using this code:

    Thanks!

  13. Azuan says:

    Hi.. very nice tutorial..

  14. Rohit Sane says:

    GetSocial is among the most used Social Book marking by many blogs. even I love it and I am planning to use it on my blog. I will surely like to customize it for a cooler look. This is going to help me for sure..Thanks!

    • Riyaz says:

      Thank you Rohit for the compliments :). There have been over 1300 downloads so far in less than two weeks. Many users are finding it useful. Do let me know if you need any help in setting it up on your website.