Blogger Social Locker per visualizzare un contenuto solo dopo aver condiviso su Facebook, Twitter o Google+.

Come mostrare un contenuto solo dopo che il lettore ha condiviso una nostra pagina in un social a scelta tra Facebook, Twitter, Google+ e Linkedin con 4 stili diversi e altre opzioni di configurazione.

Non molto tempo fa ho presentato un post in cui si mostrava come consentire l'accesso a un determinato contenuto solo a coloro che avessero pagato con un tweet o un post su Facebook. Da anni esistono plugin per Wordpress denominati Social Content Locker che permettono agli utenti di quella piattaforma di nascondere una parte di una loro pagina web da mostrare solo a che condivida su un social quel dato post o un altro URL a scelta.

Oloblogger ha adattato uno di questi plugin alla piattaforma Blogger e ho pensato di tradurlo in italiano per presentarlo ai lettori di questo sito utenti di questa piattaforma. I navigatori che arriveranno in un post con un contenuto bloccato vedranno un banner di questo genere

Il lettore potrà scegliere se condividere su Facebook, Twitter o Google Plus. Quando cliccherà sopra a una delle tre icone questa si aprirà e mostrerà il contatore con il numero delle condivisioni

Se il lettore non fosse loggato a un dato social si vedrebbe un messaggio di errore. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head>, e subito sopra, si incolla il seguente codice

<!-- Social Locker Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script src=' https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/sociallockerspa16.js' type='text/javascript'/>
<link href='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/sociallocker.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function ($) {
$('.to-lock').sociallocker({
buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {url:"https://www.twitter.com/parsifal32"},
facebook: {url:"https://www.facebook.com/ideepercomputeredinternet"},
google: {url:"https://plus.google.com/+ideepercomputeredinternet"},
text: {
header: "Seguici per visualizzare il contenuto",
message: "Puoi cliccare indistintamente su Facebook, Twitter o Google+.",
facebook_like: "Mi Piace",
facebook_share: "Condividi",
twitter_tweet: "Twitta",
twitter_follow: "Seguici",
google_plus: "+1",
google_share: "Condividi"
},
locker: {close: false, timer: 0,},
theme: "secrets"
});
});
//]]> </script>
<!-- Social Locker Fine -->

Si salva il modello. Per nascondere un contenuto quando si apre una pagina web (post o pagina), quando la si sta editando, si va in Modalità HTML e si incolla un codice con questa sintassi

<div class="to-lock">
CODICE DEL CONTENUTO NASCOSTO
</div>

quindi si pubblica come al solito. Possiamo nascondere dei video o dei contenuti particolarmente importanti che riteniamo meritino una condivisione sui social per poter essere visualizzati.

JAVASCRIPT E CSS

Se nel vostro modello fosse già presente la libreria jQuery potete fare a meno di incollare nel template la riga evidenziata di giallo. Il file CSS dei fogli di stile sociallocker.css e il file javascript sociallockerspa16.js sono stati caricati su Google Drive. Per avere il controllo il widget e per evitare un sovraccarico della larghezza di banda è opportuno che chi installa il Social Locker scarichi i file, li carichi sul proprio Google Drive e sostituisca l'URL nel codice evidenziato di verde. 

SCELTA DEI BOTTONI DA MOSTRARE

I pulsanti da mostrare si devono elencare dopo buttons e nel codice sono stati evidenziati di beige. I bottoni disponibili sono i seguenti:

1. facebook-like: Mi Piace su Facebook
2. facebook-share: Condividere su Facebook
3. twitter-tweet: Twittare il post
4. twitter-follow: Seguire su Twitter
5. google-plus: Cliccare su +1 su Google+
6. google-share: Condividere su Google+
7. linkedin-share: Condividere su Linkedin

Per il corretto funzionamento del bottone di Facebook occorre aver inserito nel modello Open Graph con la creazione di una apposita applicazione per ciascun sito.  Se avete dei bottoni Facebook funzionanti nel vostro blog allora è una operazione che avete già effettuato.

TESTO VISUALIZZATO PRIMA DEI PULSANTI

Si può personalizzare il testo visualizzato subito prima dei bottoni modificando le espressioni di colore blu. In header si scrive il titolo mentre in message una ulteriore descrizione.

MOSTRARE IL CONTENUTO SENZA ALCUNA AZIONE

Si può decidere di mostrare il contenuto senza alcuna opzione da parte del lettore. Nella stringa  locker: {close: false, timer: 0,}, se si sostituisce false con true si visualizzerà una icona a forma di crocetta per permettere ai visitatori di chiudere il banner per visualizzare il contenuto.

Se invece in timer al posto di 0 si mette per esempio 15000 allora il banner scomparirà automaticamente dopo 15 secondi (15000 millisecondi).

STILE DEL BANNER DI CONDIVISIONE 

In theme: "secrets" si può selezionare lo stile. Le opzioni sono secrets, starter, dandyish e glass

secrets

starter

dandyish

glass

SCEGLIERE QUALE URL CONDIVIDERE NEI VARI SOCIAL

Nelle stringhe twitter: {url:"..."}, facebook: {url:"..."}, google: {url:"..."},al posto dei puntini si possono incollare gli URL delle pagine che i lettori debbono condividere con la loro azione. A titolo di esempio ho inserto gli URL del mio account Twitter e delle mie pagine Facebook o Google Plus ma si può decidere che la condivisione debba riguardare la Home o la pagina in cui è presente il contenuto nascosto. Per Twitter è bene usare un accorciatore di URL come Goo.gl.

Demo
Clicca qui