Recette de la tarte banane-pomme-fraise-chocolat à 3€50
Que propose la Banque Populaire aux entrepreneurs d'une petite ville ?

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 ? 

 

Commentaires

Vérifiez votre commentaire

Aperçu de votre commentaire

Ceci est un essai. Votre commentaire n'a pas encore été déposé.

En cours...
Votre commentaire n'a pas été déposé. Type d'erreur:
Votre commentaire a été enregistré. Les commentaires sont modérés et ils n'apparaîtront pas tant que l'auteur ne les aura pas approuvés. Poster un autre commentaire

Le code de confirmation que vous avez saisi ne correspond pas. Merci de recommencer.

Pour poster votre commentaire l'étape finale consiste à saisir exactement les lettres et chiffres que vous voyez sur l'image ci-dessous. Ceci permet de lutter contre les spams automatisés.

Difficile à lire? Voir un autre code.

En cours...

Poster un commentaire

Les commentaires sont modérés. Ils n'apparaitront pas tant que l'auteur ne les aura pas approuvés.

Vos informations

(Le nom et l'adresse email sont obligatoires. L'adresse email ne sera pas affichée avec le commentaire.)