Social Sharing Buttons using jQuery and XML

• Download source code
• Demo - Watch this script in action

How to Use It?

1. Download the SocialButton.xml and jquery.social-buttons.js file. This script requires the latest jQuery library, get it at http://jquery.com/.
2. Open the SocialButton.xml and customize the necessary setting. You can customize the div container border style, width, color, position, and margin and background color. The DivMargin allows us to adjust the div container to the left and right.

3. Listing 1

   <!--solid, dotted, dashed, none -->
       <DivBorderStyle>dashed</DivBorderStyle>
       <!--Border width (int) -->
       <DivBorderWidth>1</DivBorderWidth>
       <!--Border color-->
       <DivBorderColor>#0000A0</DivBorderColor>
       <!--left, right, top, bottom -->
       <DivPosition>left</DivPosition>
       <!--left or right (px) -->
       <DivMargin>50px</DivMargin>
       <!--Div background color -->
       <DivBgColor>#F9F9F9</DivBgColor>

   You have the option to show or hide a particular social button.

   Listing 2

   <!--none, block -->
       <DisplayGooglePlusOne>block</DisplayGooglePlusOne>
       <DisplayFacebookLike>block</DisplayFacebookLike>
       <DisplayFacebookShare>none</DisplayFacebookShare>
       <DisplayTwitter>block</DisplayTwitter>
       <DisplayDigg>block</DisplayDigg>
       <DisplayStumbleUppon>block</DisplayStumbleUppon>
       <DisplayAddThis>block</DisplayAddThis>

4. Open the jquery.social-buttons.js file and provide the location of the XML file on your server.

   Use absolute link if you are not sure of the relative path and make sure the script and XML file are in the same domain.

   For example:

   

   Figure 3

5. Place the scripts before the body tag in the master page, template or web page that you want the social buttons to appear.

   For instance:

   

   Figure 4

Frequent Questions and Answers

1. Does your script work on different platforms?

   Yes, it should be cross-browser compatible.

2. How come I don't see the social sharing button that I like?

   Currently, the script only provides the option to show or hide Google Plus One, Facebook like/Sharing, Twitter, Digg, StumbleUpon, and AddThis buttons. You can modify the script to fit your requirements.

3. Is this script free?

   Yes. Use at your own risk.

4. Why are there white spaces in between the buttons?

   Some buttons do not display the counter if the count is zero.

Conclusion

I hope someone will find this information useful and that it will make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line in the comments section below and I'll work with you to correct it. I would suggest downloading the demo and exploring it in order to grasp the full concept of it because I might have missed some important information in this article.

History

• 13^th September, 2011: Initial version