Un Social Locker è un sistema che permette di nascondere determinati contenuti su un sito web, in modo che siano visibili solo se prima si esegue un'azione sui social media, ad esempio, mettere "Mi piace" su Facebook , twittare un URL o diventare follower su un social network.
Personalmente, è qualcosa che non mi piace, ed è per questo che, pur conoscendolo da tempo, ho rimandato la pubblicazione. Tuttavia, ho ricevuto abbastanza richieste da rendermi conto che ci sono parecchie persone interessate, e capisco anche che in alcuni casi specifici può essere particolarmente utile. Come ho accennato nel titolo, è come un pagamento in natura in cambio del lavoro svolto e reso pubblico.
Prima di spiegare come aggiungere questo strumento al tuo blog, voglio chiarire che, sebbene l'abbia impostato per semplificare al massimo l'aggiunta ai tuoi blog, non sarò in grado di offrirti molto altro aiuto oltre a quanto spiegherò in dettaglio in questo post.Il motivo è che tutto si basa su uno script jQuery sviluppato da qualcun altro ( OnePress ), il che risulta un po' complicato per le mie limitate conoscenze di JavaScript. Tuttavia, se capisci l'inglese, queste stesse persone hanno questa sezione di supporto e questo manuale in PDF per la versione 1.3.1.
Quindi, cosa bisogna fare per attivarlo? Basta modificare il modello e poi selezionare ciò che si desidera nascondere.
1Il codice seguente include la libreria jQuery, un foglio di stile, una funzione JavaScript e alcuni parametri di configurazione.
Tutto questo, come vedi qui, deve essere inserito tra ]]></b:skin> e </head> . Devi farlo solo una volta.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script src=' https://sites.google.com/site/acholoblogger/ficheros/sociallockerspa16.js ' type='text/javascript'/>
<link href=' https://sites.google.com/site/acholoblogger/ficheros/sociallocker.css ' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function ($) {
$('.to-lock').sociallocker({
//Elimina i pulsanti non necessari e includi gli indirizzi nei
pulsanti dei social network: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {},
facebook: {},
google: {},
text: {
header: "Seguici per sbloccare questo contenuto",
message: "Puoi farlo su Twitter, Facebook o Google plus.",
facebook_like: "Mi piace",
facebook_share: "Condividi",
twitter_tweet: "Twitta",
twitter_follow: "Segui",
google_plus: "+1",
google_share: "Condividi"
},
locker: {close: false, timer: 0,},
theme: "secrets"
});
});
//]]> </script>
2Una volta salvato quanto sopra, ogni volta che vorrai nascondere del contenuto e sovrapporlo alla casella dei pulsanti social, ti basterà racchiuderlo in un div con la classe to-lock . In questo modo:
<div class="to-lock">
CONTENUTO NASCOSTO DAI PULSANTI
</div>
Note varie
jQuery
Se hai già jQuery nel tuo modello, non è necessario includere la prima riga perché carica quella libreria e tutto ciò che otterremmo sarebbe una duplicazione e la possibile creazione di un conflitto di versione.Hosting di file JavaScript
Devi scaricare il file sociallockerspa16.js e caricarlo su un hosting di tua proprietà. Poi dovrai sostituire l'indirizzo che ti ho fornito con il tuo. Puoi farlo come ho fatto io, su Google Sites , o utilizzare qualsiasi altro servizio che supporti JavaScript, come yourjavascript.com . Se non lo fai, un giorno smetterà di funzionare, e ciò accadrà quando il mio hosting supererà il numero di richieste consentite da Google, ovvero quando si stancherà di così tante persone che usano lo stesso file. Quello che ti consiglio è di provare con il codice che ti ho fornito così com'è, verificare che tutto funzioni e poi, per non dimenticare, cambiare gli indirizzi.Ospitare il foglio di stile
Per quanto riguarda il foglio di stile sociallocker.css , il consiglio è esattamente lo stesso di prima: scaricalo e ospita il file sul tuo hosting, quindi sostituisci l'URL che ho fornito con il tuo.Questo secondo file contiene solo CSS, quindi puoi anche copiarne il contenuto e includerlo direttamente nel tuo template. Sarà un po' lungo, ma è un'opzione ancora migliore della precedente.
Quali pulsanti visualizzare
Sono indicati nei pulsanti: parametro order [...] , aggiungendo all'interno, tra virgolette e separate da virgole, le parole chiave che caricheranno ciascuno di essi. Nell'esempio, ne ho inclusi tre. Nello stesso ordine, le opzioni "Mi piace", "Tweet" e "+1".Questo è l'elenco completo delle opzioni disponibili:
- facebook-like : Mi piace di Facebook
- facebook-share : Condividi da Facebook
- twitter-tweet : twitta l'articolo
- twitter-follow : Segui l'account Twitter
- google-plus : +1 su Google+
- google-share : Condividi su G+
- linkedin-share : Condividi su Linkedin
Per alcune app di Facebook, è necessaria un'app che includa il tuo ID. Ho letto nella documentazione che le app di Google Plus sono ancora in versione beta (non sempre funzionano bene). Il pulsante "Segui" dell'account Twitter richiede parametri aggiuntivi, di cui parleremo più avanti, e il pulsante è largo quasi il doppio degli altri pulsanti.
Testi, messaggi e pulsanti
Nel parametro text sono presenti tutti i messaggi visualizzati dal widget, nonché le didascalie dei vari pulsanti. Per modificare questi testi, è sufficiente modificare ciò che si vede tra virgolette.
Possibilità di visualizzare i contenuti senza azione
Se vuoi ridurre il livello di intrusione nel sistema, puoi abilitare le opzioni che ti consentono di chiudere la casella dei pulsanti senza eseguire alcuna azione sociale. Sono disponibili in Locker.
- close : se impostato su true , viene abilitata una X sulla casella del pulsante in modo che possa essere chiusa e il contenuto nascosto possa essere rivelato senza dover attivare alcun pulsante.
- timer : se viene specificato un valore positivo maggiore di zero, la casella del pulsante si chiuderà automaticamente dopo un tempo equivalente al numero immesso (in millisecondi)
Quattro stili diversi
Dal parametro theme , puoi attivare fino a quattro stili diversi per la casella dei pulsanti. Nell'esempio, ho usato quello chiamato secrets , che è quello visibile nell'immagine in alto e nella demo che ho allegato a questo post. Puoi anche vedere i tre stili seguenti. I loro nomi sono mostrati sotto ciascuno.
antipasto
dandy
bicchiere
Quale URL verrà condiviso
Questa parte è controllata dai valori che compaiono nel codice sotto i pulsanti , e li ho lasciati vuoti perché in questo modo verrà condiviso l'indirizzo attualmente visualizzato nel browser.
Va bene lasciare questo per i pulsanti di condivisione dei contenuti, ma ad esempio, il pulsante "Segui" su Twitter ( twitter-follow ) richiede di specificare il proprio account su quel social network.
Per farlo, è necessario scriverlo tra parentesi graffe in questo modo:
Twitter: { url:"https://www.twitter.com/USUARIO_TWITTER" },
Allo stesso modo, se vuoi che una pagina specifica venga condivisa, che sia su Twitter, Facebook o Google+, dovrai specificare l'indirizzo di quella pagina.
E infine, una demo:
Qui possiamo inserire testo, immagini, audio, video, un link per il download... In breve, tutto ciò che può essere scritto in HTML.
Usalo saggiamente ;)
Commenti
Posta un commento