SprinklePenny and Mootools Integration
Posted on March 19th, 2010 by Dustin Hansen
Sprinkle My What?!
You may have noticed the little "Support Us" image off in the right-hand navigation over there. Yea, right over there... go ahead and take a look. See it? Great. Now you may have just asked yourself, WTF is that anyway, and how can I support my favorite authors whom provide me with the quality content I enjoy reading on a near daily basis? After you've pondered that a moment, you may then drift off and ask yourself "And who was the frickin' genius who came up with the coloring code for milk jugs, and why doesn't skim milk have those pretty lil' pink tops anymore?".
Of course, I would then have to pontificate; Yea, what the hell did happen to the pink caps, and are you sure they were the skim milks? And why does Canada have to be so retarded* about the whole deal?
But I digress. SprinklePenny provides an extremely easy to use service that allows us to support the sites we love by way of what they call tiny payments *cough* Micro-Payments *cough*. When you register with them, you decide how much you want to spend, and you decide how much goes to which sites that you want to support, and distribution is handled automatically simply by visiting said sites. It's a brilliant frickin' idea, really!
So far I've seen only one issue with the service... no Mootools integration. Well now, we can fix that quite easily.
SprinklePenny Integration
SprinklePenny integration is really quite simple for content providers, simply place a small bit of html code on the page, a little bit of JQuery code, and make sure you have the JQuery library included as well. Short and sweet, eh? The same can just as easily be done in Mootools.
HTML Code
<div id="sprinklepenny"></div>
Easy enough, yea? Simply replace the /images/ajax-loader.gif with your own Ajax animated loading image, and that part's done.
Javascript Code
First make sure you have the Mootools library loaded on your page, you can even load it from Google's sweet-ass API CDN.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"> </script>
Sorry about the weird line breaks, still trying to flesh out my code highlighter. Grrrrr.
Then include this little bit of code either directly in the page (not recommended) or in a Javascript file of your own (Very recommended).
var publisherId = YOUR_PUBLISHER_ID;
window.addEvent('load', function() {
var element = document.id('sprinklepenny');
var jsnp = new Request.JSONP({
callbackKey: 'jsoncallback',
url: 'http://www.sprinklepenny.com/visits/add',
data: {
publisher: publisherId,
articleTitle: encodeURIComponent(document.title)
},
onComplete: function(data) {
var fx = new Fx.Tween(element, {
'property': 'opacity',
'link':'chain'
})
.start(0)
.chain(function() { element.set('html', data.link); fx.start(1); })
}
}).send();
});
Raw Javascript
You will, of course, want to replace the var publisherId = 500; with the publisher ID given to you by SprinklePenny after signing up! Whala, done. Pretty Painless, right? Make sure you tell all your friends, and their friends too!