Résolu Comment mettre un lien Instagram dans le header

Bonsoir,

Instagram me propose le code suivant pour mettre un badge Instagram qui conduit à mon profil.

<style>.ig-b- { display: inline-block; }

.ig-b- img { visibility: hidden; }

.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }

.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

.ig-b-48 {background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }</style>

<a href="http://instagram.com/xxxxxxxxx?ref=badge" class="ig-b- ig-b-48">
<img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>

Cela fonctionne bien dans la page, mais il faudrait inclure ce code dans chaque page...
Je voudrais pouvoir mettre ce badge dans l'en tête du blog. Mais comment faire ?

Merci a qui me guidera.

Salut!

Ajouter un id="instagram" dans la balise <a ....> (lien):

<a id="instagram" href="http://instagram.com/xxxxxxxxx?ref=badge" class="ig-b- ig-b-48">
<img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>

Puis entre les balises <style> et </style>, ajouter:

#instagram {
position: absolute;
top: 20px;
left: 50%;
}

Les valeurs px et % sont à ajuster selon......

Merci beaucoup Mike GMZ

Ça fonctionne parfaitement pour retrouver le badge dans le header.
Reste un petit problème, c'est de savoir où mettre ce code pour ne pas être obligé de le recopier dans chaque page.
J'ai essayé dans un module du menu, mais ça ne fonctionne pas.

Bonne journée et encore merci.

Dans un module simple html, nouveau ou déjà existant

Re bonjour Mike GMZ,

J'avais déjà mis le code dans un module simple, mais le badge n’apparaît pas dans le Header.
J'ai remarqué qu'en collant le code fourni par Instagram, il est modifié quand on valide l'HTML en introduisant des balises de commentaires (<!-- et -->) entre <style> et </style> comme ceci :

<style><!--
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }
--></style>
<p style="text-align: center;"><a class="ig-b- ig-b-48" href="http://instagram.com/xxxxxxx?ref=badge"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a></p>

J'ai tenté plusieurs fois de le modifier en enlevant les balises de commentaires, mais elles réapparaissent chaque fois.
Cordialement

C'est normal, il faut laisser ces balises <!-----.......>:

<style><!--

#instagram {

position: absolute;

top: 20px;

left: 50%;

}

.ig-b- { display: inline-block; }

.ig-b- img { visibility: hidden; }

.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }

.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

.ig-b-48 {background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }

--></style>

<p><a id="instagram" class="ig-b- ig-b-48" href="http://instagram.com/xxxxxxxxx?ref=badge"> <img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a></p>

Bonsoir (ou plutôt Bonne nuit ou plutôt Bonjour) Mike GMZ.

Encore mille fois merci de continuer ton aide jusqu'à ce que ça marche.
Finalement j'ai mis le code dans la rubrique d'article qui vient en tête des pages, au tout début du blog, sous le Header.
J'ai toujours pas compris le rôle des balises de commentaires, mais à mon âge (78) on renonce à comprendre pourvu que ça marche...

Encore merci