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.
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.
