In 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
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 </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.
About 
Tweet Button always missing even from your website.
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?
You can use the getsocialstyles.php file.
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!