Scritto il

Nuovo appuntamento con le pillole di LinkWeLove. Vedremo come fare per inserire due widget in un’unica pagina, soluzione spesso sottovalutata che va fatta andando ad agire sul codice fornito alla creazione del widget. Iniziamo!

 

Pillole di LWL #5: Doppio Widget

 

Analizziamo il codice, così come viene fornito:

 

Inserisci il seguente div dove vuoi venga visualizzato il box

<div id="lwl_XXX"></div>

Incolla il seguente codice nel tuo sito prima del tag di chiusura </body>

<script type="text/javascript">
     var _lwl = _lwl || [];
     _lwl.push(['id', 'XXXX']);

     (function() {
	var lwl = document.createElement('script'); lwl.type = 'text/javascript'; lwl.async = true;
	lwl.src = '//sd.linkwelove.com/widget/js/lwl.js';
	var lwls = document.getElementsByTagName('script')[0]; lwls.parentNode.insertBefore(lwl, lwls);
     })();
</script>

 

Le parti in neretto corrispondono all’ID esadecimale del widget, un codice univoco per ogni singola unità creata. La prima parte è la “chiamata al widget” che indicherà il posizionamento che avrà una volta caricato. La seconda parte invece è il codice Javascript, che richiamerà i server di LinkWeLove attivando il sistema  a sua volta “costruirà” il widget all’interno della pagina. Supponendo di avere un secondo widget, con ID:

 YYYY

E di volerlo inserire in una pagina dove è già presente il widget di prima, se lo inserissimo mettendo entrambi i codici per esteso, uno dei due widget sicuramente non verrebbe visualizzato.

 

Come fare allora per impostare entrambi i widget?

 

La soluzione è più facile di quello che si può pensare.  Sappiamo che il Div andrà inserito laddove desideriamo inserire il widget all’interno della pagina, mentre la seconda parte, lo script, andrà  inserita dopo, prima della chiusura del </body>. Quindi i due div (sia per il widget XXXX, che per il widget YYYY) li inseriremo normalmente, mentre lo script dovrà essere unificato. Infatti, quest’ultimo, dovrà essere inserito nella seguente questa forma:

 

<script type="text/javascript">
   var _lwl = _lwl || [];
   _lwl.push(['id', 'XXXX']);
   _lwl.push(['id', 'YYYY']);

   (function() {
        var lwl = document.createElement('script'); lwl.type = 'text/javascript'; lwl.async = true;
        lwl.src = '//sd.linkwelove.com/widget/js/lwl.js';
        var lwls = document.getElementsByTagName('script')[0]; lwls.parentNode.insertBefore(lwl, lwls);
    })();
</script>

 

dove due ID (le parti in neretto XXXX e YYYY) dovranno corrispondere a quello dei due widget che si vogliono installare. Fatto questo, il gioco è fatto! Che aspettate a provare?


Lascia un commento