ansorweb, l'ultima spiaggia

Sei in: Home >>Tutorials

Facebook, come implementare i pulsanti Like e Condividi nelle pagine web


Per inserire il pulsante Like e soprattutto condividere le nostre pagine web su facebook in modo corretto, si parte dalla lettura della documentazione ufficiale (Pulsante "Mi piace" per il web), che veramente a prima vista sembra una cosa velocissima e rapida: si parla di 2 blocchi di codice una da mettere nel body e l'altra da ripetere ogni volta che vogliamo far visualizzare il pulsante. Poi però se si copia e incolla il codice fornito, ci si trova con un pulsante che sostanzialmemte funziona a modo suo, condividendo immagini che non abbiamo scelto noi:

Questo perchè bisogna prima di tutto fare in modo che i crewler di Facebook vedano frasi e immagini in modo corretto. Per questo motivo bisogna per prima cosa impegnarsi con la conoscenza degli opengraph e implementarli nelle nostre pagine, pertanto va prima letto l'articolo Open Graph: i meta tag per Facebook, dopodichè si parte realmente con l'inserimento dei pulsanti nelle pagine.

Una volta inseriti i metatag opportuni, si possono inserire i due blocchi di codice:

il 1° dopo l'apertura del tag body:

<!-- inizio codice SDK JavaScript per il pulsante like di facebook da inserire una sola volta nella pagina-->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v3.3"></script>
<!-- fine codice SDK JavaScript per il pulsante like di facebook da inserire una sola volta nella pagina-->

ll 2° da mettere dove vogliamo visualizzare i pulsanti:

<!-- inizio codice per il pulsante like di facebook da inserire dove i vuole far apparire nella pagina-->
<div class="fb-like"
data-href="******" <!--inserire lo stesso URL usato nell'opengraph-->
data-width="***" <!--inserire la larghezza in pixel dello spazio disponibile per il plug-in-->
data-layout="standard"
data-action="like"
data-size="small"
data-show-faces="true"
data-share="true">
</div>

<!-- fine codice per il pulsante like di facebook da inserire dove i vuole far apparire nella pagina-->

Fare ora le prove di condivisione

powered by
Creativilab