TUTO : Développer votre publicité à l’aide d’une iframe [ et éventuellement PHP ]

 

Screen-shot-2013-02-22-at-2-22-29-am

 

Malgré toutes les critiques que l'on peut faire contre la balise Iframe, pourtant bien reconnue par la norme HTML5, celle-ci peut s'avérer être, comme l'explique Fred Canevet sur conseilsmarketing.com, une bonne solution si ce n'est pas la seule pour pouvoir mettre en place un encart publicitaire sur un site en HTML pur comme avec la plateforme Blogger ou Overblog (sans capacité poussée de mise en page dynamique)…

 

 

 

Effectivement, imaginons que vous ayez écris 100 articles, et que vous souhaitez pouvoir y afficher la même publicité 300px X 250px (le meilleur format selon les usages apparemment). Et bien il serait tout à fait possible de l'afficher " en dur ", avec simplement une image cliquable. Par contre le jour où vous souhaitez modifier cette pub, disons pour rajouter par exemple un texte en dessous, il vous faudra modifier chacune des 100 pages !

La solution est de passer par une balise Iframe. Celle-ci vous permet de faire pointer son contenu vers une source unique modifiable, soit en HTML, soit pour les plus aguerris en PHP et/ou Javascript (avec dans ce cas la possibilité de  randomiser l'affichage ou d'effectuer des statistiques …). Mais tout cela ne va se faire sans quelques petites astuces bien sur sinon se serait pas drôle.

 

Première étape, développons la publicité source :

 

Ensuite, le code source HTML de l'encart à insérer sur autant de page que nécessaire (voyez avec quelle malice je centre celui-ci avec une balise div) :

 

Petite misère. En l'état, vous allez constater que le contenu n'est pas bien centré à l'intérieur de votre encart, alors qu'il l'est quand vous afficher la pub source directement dans votre navigateur. C'est parce que votre navigateur rajoute des marges CSS de base, mais que l'on ne voit pas si la page est affichée sans contrainte de taille. Par contre dans notre cas, la contrainte est que la page source doit s'afficher dans une Iframe de 300px de large, ce qui fait alors maintenant sauter aux yeux cet horrible décalage !

 

La solution est donc d'avoir une feuille de style effectuant un reset du padding/marging :

 

Elle est pas belle la vie ? 

 

Laisser un commentaire