by bryian
12. September 2011 19:34
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
Figure 2
-
Download the SocialButton.xml and jquery.social-buttons.js file. This script requires the latest jQuery library, get it at http://jquery.com/.
-
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.
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>
-
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
- 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
-
Does your script work on different platforms?
Yes, it should be cross-browser compatible.
-
How come I don't see the social sharing button that I like?
Currently, the script only provide 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.
-
Is this script free?
Yes. Use at your own risk.
-
Why there are white space in between the button?
Some buttons do not display the counter if the count is zero.
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.
Demo
Download
by bryian
8. October 2009 21:03
Watch this Script in action/ Download
Introduction
I am using the JQuery Simple Controls Gallery from Drive DHTML (dynamic html) & JavaScript code library . One of the requirements is to read the images information from a XML file. After spending some time researching for it, I found the article Reading XML with jQuery. I have put together these two findings and include a brief explanation to it. Hope someone will find this information useful. Comments are welcome.
Implementation
<script type="text/javascript">
var myArray = []; //declare and initialize array
/*
10082009 BT
http://think2loud.com/reading-xml-with-jquery/
Read the slides info into an array from XML and assign the array variable to
the simple slide show.
*/
$(document).ready(function() {
$.ajax({
type: "GET",
url: "simplegallery_files/sites.xml", //xml file
dataType: "xml",
success: function(xml) {
var count = 0; //counter
$(xml).find('site').each(function() {
var url = $(this).find('url').text(); //url
var target = $(this).find('target').text(); //_blank, _new
var imageURL = $(this).find('imageURL').text(); //location of the image
var alt = $(this).find('alt').text(); //alternate text of the image
//append to array
myArray[parseInt(count)] = new Array(imageURL, url, target, alt);
count++;
});
var mygallery2 = new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [728, 90], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: myArray, //assing the array var to here
autoplay: [true, 10000, 99], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit: function() { //event that fires when gallery has initialized/ ready to run
},
onslide: function(curslide, i) { //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
}
});
});
</script>
Sample XML contents
<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
<site>
<url><![CDATA[https://www.amazon.com/b?node=283155&tag=asp.net.books-20&camp=0&creative=0&linkCode=ur1&adid=1F4JYCPDSWG3V5JH9GD9&]]></url>
<target>_new</target>
<alt>Amazon :: Books</alt>
<imageURL><![CDATA[https://images-na.ssl-images-amazon.com/images/G/01/associates/2006/books/34percent/us_books_728x90.gif]]></imageURL>
</site>
<site>
<url><![CDATA[http://www.mochahost.com/1160-0-1-29.html]]></url>
<target>_new</target>
<alt>MochaHost</alt>
<imageURL>http://www.mochasupport.com/aff/banners/112_728-4.gif</imageURL>
</site>
</sites>
Subscribe