adamloving/viral_gate.html

## viral_gate.html
<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&amp;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>
	<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>