Il resto dell'articolo è solo a un click da qui...
Per continuare a leggere, condividi questo articolo con i tuoi seguaci
L'implementazione del content locker è molto simile a quella
di altri prodotti in commercio, ovvero si basa sui cookie.
Sarebbe stato possibile, usando le API (Application
Programming Interface) dei vari social network,
verificare ogni volta che l'utente sia un fan del sito web, ma questo ci avrebbe
vincolato un po' troppo alle modifiche dei vari social media SDK
(Software Development Kit).
Non ci dilungheremo sul codice per integrare i social widget,
per tale cosa vi rimando alle pagine dedicate agli sviluppatori sui vari
social network.
Sulla nostra pagina racchiudiamo i social widget ed un breve invito a
premerli in un div con classe CSS
irBodyLocker.
Mettiamo invece tutto il contenuto bloccato in un altro div
nascosto (display:none) con
classe 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>
La funzione IdeaR.ContentsLocker.lockContents viene invocata
all'interno dello 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();
};
Controlla la presenza del cookie SocialAction che
testimonia passati apprezzamenti del sito da parte del lettore corrente:
- se il test è positivo allora i contenuti vengono sbloccati
immediatamente;
- altrimenti vengono creati degli event handlers per gestire i like di
Facebook e i tweet di
Twitter.
Mentre per Facebook e
Twitter non c'è altro da
fare, per
Google+ e
LinkedIn bisogna
aggiungere un attributo che specifica la funzione di callback all'interno del
markup del widget.
Questo è il markup per
Google+ (si noti che
la funzione di callback per
Google+ ha la
limitazione che deve essere contenuta nel global namespace):
<g:plusone annotation="none" size="medium" callback="IdeaR_ContentsLocker_ongoogleplusaction">
</g:plusone>
Si noti che la documentazione ufficiale Google è errata. Nella documentazione è scritto che il parametro di callback è callback invece di data-callback.
<script type="IN/Share" data-counter="none" data-onsuccess="IdeaR.ContentsLocker.onlinkedinshare">
</script>
Tutte le funzioni di callback e gli event handler (presenti nel codice
scaricabile al termine dell'articolo), si limitano ad invocare la funzione
IdeaR.ContentsLocker.unlockContents, la quale a sua volta sblocca i
contenuti (con qualche effetto visivo) e salva il cookie per ricordarsi del
visitatore in futuro.
// 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;
};