The rest of the article is only at a click distance...
To continue reading, share this article with your followers
The content locker implementation is very similar to that of
other products on the market, that is based on cookies.
It would be possible to use the APIs (Application
Programming Interface) of the various social networks,
to check real-time if the user is still a fan of the website, but this would tie
too much our code to the social media SDKs (Software
Development Kit).
I'll not describe the code to integrate the social widgets,
you can easily consult the social network pages dedicated to
developers.
Let's embed the social widgets and a short invitation inside a
div with the CSS class
irBodyLocker.
Will put all the locked content in another hidden (display:none)
div with named irLockedBody.
<head>
<script src="contentslocker.js" type="text/javascript"></script>
</head>
<body>
...
<div class="irBodyLocker">
<p>The rest of the article is locked</p>
<p>To continue reading, become our friend pressing one of the buttons</p>
...put here the social widgets
</div>
<div class="irLockedBody" style="display:none;">
...put here the locked contents
</div>
</body>
The IdeaR.ContentsLocker.lockContents function is invoked by the
script.
IdeaR.ContentsLocker.lockContents = function ()
{
$(function ()
{
if (IdeaR.ContentsLocker.socialActivity() == true)
{
$('div.irBodyLocker').hide();
$('div.irLockedBody').show();
}
// Add social handlers only if contents are locked
else
$(function ()
{
// Facebook
var exsistingFbAsyncInit = window.fbAsyncInit;
if (exsistingFbAsyncInit == null)
window.fbAsyncInit =
IdeaR.ContentsLocker._subscribeFacebookLike();
else
window.fbAsyncInit = function ()
{
exsistingFbAsyncInit();
IdeaR.ContentsLocker._subscribeFacebookLike();
};
// Twitter
twttr.ready(function (twttr)
{
twttr.events.bind('tweet',
IdeaR.ContentsLocker.ontwitteraction);
twttr.events.bind('follow',
IdeaR.ContentsLocker.ontwitteraction);
});
});
});
};
IdeaR.ContentsLocker.socialActivity = function ()
{
return IdeaR.ContentsLocker._getCookie(
IdeaR.ContentsLocker._socialAction, 'false') == 'true' ? true : false;
};
IdeaR.ContentsLocker._getCookie = function (name, defaultValue)
{
var docCookies = document.cookie.split(";");
for (var i = 0; i < docCookies.length; i++)
{
var equalPos = docCookies[i].indexOf('=');
var currentName = unescape(docCookies[i].substr(0, equalPos));
currentName = currentName.replace(/^\s+|\s+$/g, '');
if (currentName == name)
{
var value = docCookies[i].substr(equalPos + 1);
return unescape(value);
}
}
return defaultValue;
};
IdeaR.ContentsLocker._socialAction = 'SocialAction';
IdeaR.ContentsLocker._subscribeFacebookLike = function ()
{
FB.Event.subscribe('edge.create', function (targetUrl)
{
IdeaR.ContentsLocker.unlockContents();
});
};
IdeaR.ContentsLocker.ontwitteraction = function (intent_event)
{
if (intent_event)
IdeaR.ContentsLocker.unlockContents();
};
It checks the existence of the SocialAction cookie which
testifies past appreciation of the site by the current user:
- if the test is positive then the contents are released immediately;
- otherwise event handlers are created to handle
Facebook likes and
Twitter
tweets.
While for Facebook and
Twitter that's all, for
Google+ and
LinkedIn we have to
manually add inside the widget markup, the attributes that specify the callback
function.
That's the Google+ markup (note
that the Google+ callback
function must reside inside the global namespace):
<g:plusone annotation="none" size="medium" data-callback="IdeaR_ContentsLocker_ongoogleplusaction">
</g:plusone>
Note that Google official documentation is wrong. In the documentation is written that the callback parameter is callback instead of data-callback.
That's the LinkedIn
markup:
<script type="IN/Share" data-counter="none" data-onsuccess="IdeaR.ContentsLocker.onlinkedinshare">
</script>
All the callback functions and the event handlers (take a look at the sources
to download at the end of the article), just invoke
IdeaR.ContentsLocker.unlockContents, that unlocks the contents (with some
visual effects) and saves the cookie to remember the visitor.
// NOTE: the Google Plus callback function must be in the global namespace
function IdeaR_ContentsLocker_ongoogleplusaction(data)
{
if(data.state == 'on')
IdeaR.ContentsLocker.unlockContents();
}
IdeaR.ContentsLocker.onlinkedinshare = function (data)
{
IdeaR.ContentsLocker.unlockContents();
};
IdeaR.ContentsLocker.unlockContents = function ()
{
$('div.irBodyLocker').slideUp(400, function ()
{
$('div.irLockedBody').fadeIn();
});
IdeaR.ContentsLocker.saveSocialAction();
};
IdeaR.ContentsLocker.saveSocialAction = function ()
{
IdeaR.ContentsLocker._setCookie(
IdeaR.ContentsLocker._socialAction, true, 10000);
};
IdeaR.ContentsLocker._setCookie = function (name, value, expirationDays)
{
var cookieString = escape(name) + '=' + escape(value);
if (expirationDays != null)
{
var expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + expirationDays);
cookieString += '; expires=' + expirationDate.toUTCString();
}
document.cookie = cookieString;
};