martedì 16 dicembre 2008

Inserire AdSense in mezzo ai post su Blogger

Ieri mi stavo chiedendo come mai, in alcuni siti, vedo annunci Google Adsense in mezzo ai post, mentre su Blogger non riesco a farlo. Dopo un po' di ricerca ho trovato in giro dei pezzi di codice per inserire gli adsense nel mezzo dei post di Blogger (senza, ovviamente, violare i regolamenti del programma Google Adsense). Ho trovato diversi codici, alcuni funzionanti, altri no. Paradossalmente quelli che non funzionavano erano quelli con l'idea più carina, ossia di inserire il codice adsense non in un punto a caso del post (tipo a metà) ma in un punto prestabilito dall'autore del post, per esempio proprio qui sotto:

Così ho preso spunto dai vari pezzi di codice trovati in rete e, con le mie modeste (ma veramente modeste) conoscenze javascript ho apportato le modifiche per fare quello che voglio io. Ecco le istruzioni per inserire i vostri adsense in mezzo ai post di blogger:
  1. Andate su "Layout" -> "Modifica HTML" e mettete il segno di spunta su "Espandi i modelli widget"
  2. Cercate il testo "<data:post.body/>" all'interno del codice
  3. Cancellate il testo "<data:post.body/>" e sostituitelo col codice seguente:

    <div expr:id='"aim1" + data:post.id'>
    </div>

    <div expr:id='"ads" + data:post.id' style='text-align:center; clear:both;'>
    <!-- Codice Google -->
    </div>

    <div expr:id='"aim2" + data:post.id'>
    <data:post.body/>
    </div>

    <script type='text/javascript'>
    <!--
    var obj0=document.getElementById("aim1<data:post.id/>");
    var obj1=document.getElementById("aim2<data:post.id/>");
    var s=obj1.innerHTML;
    var r=s.search(/\x3C!-- adsense --\x3E/igm);

    if(r>=0) {
    obj0.innerHTML=s.substr(0,r);
    obj1.innerHTML=s.substr(r+16);
    } else {
    document.getElementById("ads<data:post.id/>").innerHTML="";
    }
    //-->
    </script>

  4. Inserite il pezzo di codice che vi ha fornito Google nell'apposita sezione
  5. Salvate il modello
  6. Finito! Ogni volta che vorrete inserire un adsense nel vostro post, sarà sufficiente inserire il testo "<!-- adsense -->" nel punto esatto in cui volete posizionare l'annuncio.
Una piccola avvertenza: quando andrete ad inserire il codice fornito da google, dovrete avere l'accortezza di codificarlo, altrimenti non funzionerà (questa operazione comunque non viola i termini del servizio di google adsense in quanto, nell'html finale, il codice comparirà esattamente come vi è stato dato da google, carattere per carattere). Per esempio, se il mio codice adsense è questo:

<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_host = "pub-XXXXXXXXXXXXXXXX";
/* 336x280, creato 15/12/08 */
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Dopo la codifica sarà così:

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-XXXXXXXXXXXXXXXX&quot;;
google_ad_host = &quot;pub-XXXXXXXXXXXXXXXX&quot;;
/* 336x280, creato 15/12/08 */
google_ad_slot = &quot;XXXXXXXXXX&quot;;
google_ad_width = 336;
google_ad_height = 280;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;

Per codificare potete utilizzare questo comodo strumento.
Come potete notare dal codice sopra, questo trucco permette di inserire l'adsense in un punto preciso nel post e, nel caso non venisse inserita l'etichetta, l'annuncio non verrebbe visualizzato (si noti la parte "else" del codice javascript che cancella la parte di codice dove risiede l'annuncio).
Questa è stata la mia scelta personale. Può però darsi che altri abbiano idee diverse. Per esempio, si potrebbe voler fare in modo che, se l'etichetta non viene trovata, si pubblichi comunque l'annuncio, magari arbitrariamente a metà del post. Per fare ciò è possibile usare questa versione leggermente modificata del codice javascript (premetto che non l'ho testata):

<script type='text/javascript'>
<!--
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);

if(r>=0) {
obj0.innerHTML=s.substr(0,r);
obj1.innerHTML=s.substr(r+16);
} else {
var t=s.substr(0,s.length/2);
var sp=t.lastIndexOf(" ");
if(sp>0) {obj0.innerHTML=s.substr(0,sp);obj1.innerHTML=s.substr(sp+1);}
}
//-->
</script>

Ovviamente è possibile modificarla anche in modi più complicati a seconda delle specifiche esigenze, il limite è dato solo dalla fantasia.

Nessun commento:

Posta un commento

BlogItalia.it - La directory italiana dei blog