social validati codice

[sandro]

Salve dovrei estrapolare il codice dei tre social da questa pagina http://sixsei.altervista.org/social.html per poterlo inserire in un unico oggetto (codice html) e velocizzare l’inserimento in numerose pagine.
Per Tw e Fb ho utilizzato "l’oggetto codice html" mente per il g+1" l’oggetto social" di wbx5 è l’unico modo che permette la validazione w3c per questo sarebbe molto importante se riuscissi a prelevare il codice così come si trova anche la disposizione è giusta, qualcuno può aiutarmi ?

[lemonsong]

Non ho capito bene il tuo problema ma se ti serve il codice che genera WS per g+ (con le impostazioni del sito postato) questo è quanto:

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" style="width: 100%; overflow: hidden;" data-annotation="none" data-callback="" data-href="http://www.miosito.it"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Se non ho capito, sii più chiaro.

[sandro]

Ciao Lemonsong grazie tante !
Si proprio quello adesso se vedi ho unito i tre codici in un "oggetto codice html" di ws il tutto è rimasto validato w3c l’unica cosa è che le tre immagini non sono molto allineate e poco distanziate, come posso fare ?

[lemonsong]

Potresti inserire questo CSS nella sezione Esperto dell'Oggetto HTML:

.fb_iframe_widget {
    margin: 0 8px;
    vertical-align: super;
}

Un'alternativa:

.fb_iframe_widget {
    margin: 0 8px;
    line-height: 4px;
}

[sandro]

Huuau
Direi perfetto e anche validato grazie mille ! Unico neo è che prima il g+1 condivideva l 'url della pagina con immagine sopra adesso l'home del sito.
Come mai ?

[lemonsong]

Ho visto che hai lasciato http://www.miosito.it come valore dell'attributo data-href

Di solito il colore rosso indica (mia abitudine) che è da personalizzare.

Il tuo codice di prima era privo di quel valore.

[sandro]

SI proprio quello grazie Lemonsong e un applauso come sempre.

[sandro]

Ooops Un'ultima cosa Dovendo inserire l'oggetto in molte pagine sarebbe possibile incollare il css una sola volta es. nella sezione "seo e codice" in modo da averlo già disponibile in tutte le pagine evitando quindi il copia incolla in ogni pagina interessata ?

[lemonsong]

Certo che sì.

Per un maggior controllo ti consiglio di racchiudere il codice HTML dentro un div con, per esempio, classe ogg-social

Esempio:

<div class="ogg-social">

QUI I TUOI CODICI SOCIAL

</div>

Il CSS diventerà:

<style>
.ogg-social .fb_iframe_widget {
    margin: 0 8px;
    vertical-align: super;
}
</style>

[sandro]

Sarebbe perfetto ma più precisamente lo style nella sezione esperto dove dovrei copiarlo ?
Grazie.

[lemonsong]

Visto che i CSS incorporati vanno inseriti in HEAD, il posto ideale è: Prima della chiusura del tag HEAD

Se si vuole andare oltre l'uso "standard" del programma, una lettura alle guide di base è d'obbligo, esempio:

http://www.html.it/pag/14211/inserire-i-fogli-di-stile-in-un-documento/

[sandro]

Adesso è perfetto grazie ancora.Non mancherò di approdare alla guida.