Inclusion d’un code javascript de Google adsense dans SPIP

Vous avez un site sous spip qui fonctionne bien et où le nombre de visites évolue constamment.

Pourquoi ne pas en faire une source de revenus ?

Le choix de Google Adsense est intéressant parce qu’il offre plein d’outils pour insérer de la publicité tout en respectant la charte graphique de votre site.

Plusieurs étapes pour arriver à cette fin, la première est de se créer un compte google adsense, la deuxième est de choisir une forme de publicité, puis récupérer le code javascript, et la troisième est de l’inclure dans la bonne boucle spip afin qu’il s’affiche correctement.

Les deux premières étapes sont très bien documentées et assistées chez Google (ils sont très forts et le site est très pratique), c’est pourquoi je j’irais directement sur la troisième étape, qui consiste à l’inclusion du code javascript dans spip.

Création du fichier javascript

Je considère donc que vous avez récupéré le code javascript depuis google et l’avez collé dans un document quelconque (notepad par exemple).

Ce code ressemble à ceci :

<script type="text/javascript"><!-- google_ad_client = "pub-123456789123456789"; /* 120x600 site info bandeau droit, date de création 22/12/08 */ google_ad_slot = "0995408911"; google_ad_width = 120; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

A la création du script sous Google, il faut choisir le format qui s’adapte le plus à votre squelette spip.

Nota : J’utilise le squelette "alternatives" dans ce site, et j’ai trouvé judicieux que les pubs soient affichées dans un espace souvent libre (soit la partie droite du site). Ainsi, l’exposé ci-dessous sera donc décrit pour ce squelette, mais vous pourrez probablement vous en inspirer pour d’autres squelettes.

Placement du fichier javascript dans le squelette

Vous collez le script obtenu dans un fichier pour lequel vous ferez attention à ce qu’il ait bien une extension "html".

Pour la circonstance, je l’ai appelé : inc-adsense.hlml, et je l’ai placé dans le site spip, dans le répertoire \squelettes\inc\. (avec les autres fichiers incxx.hlml).

Modification scripts de spip

Maintenant, il faut dire à spip qu’il en tienne compte de ce script à chaque affichage de pages.

Pour cela, il faut modifier trois fichiers, tous trois situés dans le dossier "squelettes", il s’agit :

– rubrique.html,
– article.html,
– sommaire.html.

Il faut repérer dans ces trois fichiers les boucles construisant le code html de la partie droite du site, et y insérer l’appel du code javascript.

Le cadre ci-dessous montre des extraits de ces trois fichiers, avec l’inclusion de l’appel du code javascript.

Reste plus qu’à faire de même...

Fichier rubrique.html

<!-- ***************************************************************** Menus contextuels (droite) Contextual menus (right) ************************************************************* --> <div id="encart"> <INCLURE{fond=inc/inc-annonces}{lang}> <INCLURE{fond=inc/inc-breves}{id_rubrique}{lang}> <INCLURE{fond=inc/inc-syndic}{id_rubrique}{lang}> <!-- @@@ Inclure la balise ADSENSE @@@ --> <INCLURE{fond=inc/inc-adsense}{id_rubrique}{lang}> </div><!-- encart --> <INCLURE{fond=inc/inc-menu}{lang}{id_rubrique}> <INCLURE{fond=inc/inc-bas}{lang}{id_rubrique}> </div><!-- page --> </body> </html> </BOUCLE_rubrique_principal>

Fichier article.html

<!-- ***************************************************************** Menus contextuels (droite) Contextual menus (right) ************************************************************* --> <div id="encart"> <INCLURE{fond=inc/inc-annonces}{lang}> <!-- Derniers articles dans la meme rubrique --> <B_articles_rubrique> <div class="menu"> <h2 class="structure"><:articles_recents:></h2> #ANCRE_PAGINATION <ul> <li> <a href="#URL_SITE_SPIP/#URL_RUBRIQUE"><:meme_rubrique:></a> <ul> <BOUCLE_articles_rubrique(ARTICLES) {id_rubrique} {par date} {inverse} {doublons} {id_article != #ID_ARTICLE} {pagination 15}> <li> <a href="#URL_SITE_SPIP/#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a> </li> </BOUCLE_articles_rubrique> </ul> </li> <!-- @@@ Inclure la balise ADSENSE @@@ dans la boucle droite --> <BR> <BR> <BR> <INCLURE{fond=inc/inc-adsense}{lang}> <!--[if lte IE 6]><style>#encart a{height:1em;}#encart li{height:1em;float:left;clear:both;width:100%}</style><![endif]--> <!--[if IE 6]><style>#encart li{clear:none;}</style><![endif]--> </ul> #PAGINATION </div><!-- menu --> </B_articles_rubrique> </div><!-- encart -->

Fichier sommaire.html

<!-- ***************************************************************** Menus contextuels (droite) Contextual menus (right) ************************************************************* --> <div id="encart"> <INCLURE{fond=inc/inc-trad}{lang}> <INCLURE{fond=inc/inc-annonces}{lang}> <INCLURE{fond=inc/inc-breves}{lang}> <INCLURE{fond=inc/inc-syndic}{lang}> <!-- @@@ Inclure la balise ADSENSE @@@ --> <INCLURE{fond=inc/inc-adsense}{lang}> <!-- Inscription au site --> [<div class="menu"> <ul> <li><b><:pass_vousinscrire:></b> <ul> <li> <span><:participer_site:></span> (#FORMULAIRE_INSCRIPTION) </li> </ul> </li> </ul> </div><!-- menu -->]

Voilà ! Amusez-vous bien !