|
<html> |
|
<body> |
|
<!-- |
|
|
|
This page demonstrates how to hide some content on the page until the |
|
viewer clicks one of the social sharing buttons. |
|
|
|
You can see a live demonstration of this technique on this blog post: |
|
http://adamloving.com/internet-programming/gamify |
|
|
|
For reference, I got the code for the buttons from... |
|
|
|
http://developers.facebook.com/docs/reference/plugins/like/ |
|
|
|
(note, you need to plug in your own Facebook App ID for the Like button) |
|
|
|
http://twitter.com/about/resources/tweetbutton |
|
https://developer.linkedin.com/plugins/share-button |
|
http://www.google.com/webmasters/+1/button/ |
|
|
|
--> |
|
|
|
|
|
<!-- Here is the content --> |
|
<p>This is the free content...</p> |
|
<p class="adl-outside-gate"> |
|
Enjoying this so far? Please click one of the buttons below to read the rest. |
|
</p> |
|
<p class="adl-inside-gate"> |
|
Thanks for sharing. Here is the secret stuff! |
|
</p> |
|
|
|
<!-- Here are the sharing buttons --> |
|
<table> |
|
<tr> |
|
<td valign="top"> |
|
<div id="fb-root"></div> |
|
<script src="http://connect.facebook.net/en_US/all.js#appId=1234&xfbml=1"></script> |
|
<fb:like href="" send="true" layout="box_count" width="55" show_faces="true" font=""></fb:like> |
|
</td> |
|
<td valign="top"> |
|
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> |
|
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
|
</td> |
|
<td valign="top"> |
|
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> |
|
<script type="IN/Share" data-counter="top" data-onSuccess="ADL.viralGate.afterLinkedInShare"></script> |
|
</td> |
|
<td valign="top"> |
|
<g:plusone size="tall" callback="afterPlus"></g:plusone> |
|
<script type="text/javascript"> |
|
(function() { |
|
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; |
|
po.src = 'https://apis.google.com/js/plusone.js'; |
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); |
|
})(); |
|
</script> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<!-- Here is the code --> |
|
<script type="text/javascript"> |
|
ADL = {}; |
|
|
|
(function(namespace) { |
|
|
|
function ViralGate() { }; |
|
|
|
ViralGate.prototype.setDisplay = function(className, value) { |
|
var els = document.getElementsByClassName(className); |
|
for (var i = 0; i < els.length; i++) { |
|
els[i].style.display = value; |
|
} |
|
}; |
|
|
|
ViralGate.prototype.lock = function() { |
|
this.setDisplay('adl-outside-gate', 'block'); |
|
this.setDisplay('adl-inside-gate', 'none'); |
|
}; |
|
|
|
ViralGate.prototype.unlock = function() { |
|
this.setDisplay('adl-outside-gate', 'none'); |
|
this.setDisplay('adl-inside-gate', 'block'); |
|
} |
|
|
|
ViralGate.prototype.afterLike = function(event) { |
|
// event is the URL |
|
ADL.viralGate.unlock(); |
|
}; |
|
|
|
ViralGate.prototype.afterPlus = function(data) { |
|
// data is object with { href: 'http://...', state: 'on' } |
|
if (data.state == 'on') { |
|
ADL.viralGate.unlock(); |
|
} |
|
}; |
|
|
|
ViralGate.prototype.afterTweet = function(event) { |
|
// event.type == 'tweet' |
|
ADL.viralGate.unlock(); |
|
}; |
|
|
|
ViralGate.prototype.afterLinkedInShare = function(url) { |
|
// url is url string |
|
ADL.viralGate.unlock(); |
|
}; |
|
|
|
namespace.viralGate = new ViralGate(); |
|
|
|
})(ADL); |
|
|
|
ADL.viralGate.lock(); |
|
twttr.events.bind('tweet', ADL.viralGate.afterTweet); |
|
FB.Event.subscribe('edge.create', ADL.viralGate.afterLike); |
|
|
|
// Google callback must be in global namespace |
|
afterPlus = function(data) { |
|
ADL.viralGate.afterPlus(data); |
|
} |
|
</script> |
|
</body> |
|
</html> |
Awesome! I'm a front end designer wishing I had more time to learn RoR. In the meantime I was looking for a social gate that would work on mobile devices and this looks like it will work perfectly. Do you have any suggestions on how to make the "inside gate" change based on how many shares? So the user could save 10% if they share once, 20% if they share twice, etc?