Click here to Skip to main content
Click here to Skip to main content

Tagged as

Social Sharing Buttons using jQuery and XML

, 15 Sep 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
social sharing buttons script created by using jQuery and XML for your website

Yet, another social sharing buttons script created by
using jQuery and XML for your website. The script is very straight forward and
self explanatory. The buttons container and buttons setting are stored in the
XML file.

Figure 1

buttons in vertical


Figure 2


buttons in horizontal

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

    xml

  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

    scripts

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 there are white space in between the button?
    Some buttons do not display the counter if the count is zero.

 

Conclusion

I hope someone will find this information useful and 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 and I'll work with
you to correct it. I would suggest downloading the demo and explore it in order
to grasp the full concept of it because I might miss some important information
in this article. Please send me an email if you want to help improve this article.

Watch this script in action

Demo
 

Downloads

Download

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bryian Tan
Software Developer
United States United States
I have over three years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

Comments and Discussions

 
GeneralReason for my vote of 5 Excellent, thanks for sharing! PinmemberDrABELL13-Sep-11 14:41 
GeneralReason for my vote of 5 Very nice work... PinmemberPravin Patil, Mumbai12-Sep-11 22:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 15 Sep 2011
Article Copyright 2011 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid