{"id":2590,"date":"2010-06-21T17:59:51","date_gmt":"2010-06-21T15:59:51","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=2590"},"modified":"2024-08-01T15:49:09","modified_gmt":"2024-08-01T15:49:09","slug":"come-creare-un-bottone-share-on-facebook","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/come-creare-un-bottone-share-on-facebook\/","title":{"rendered":"Come creare un bottone Share on Facebook"},"content":{"rendered":"

\"wiki_logo\"Se vogliamo permettere ai nostri visitatori di condividere un nostro contenuto nel loro profilo di Facebook<\/a>, tra le tante opzioni forniteci dal social network<\/strong> possiamo aggiungere alla nostra pagina un bottone “Share on Facebook<\/strong>” che permetta al visitatore di linkare il nostro contenuto con un commento o perlomeno delle informazioni che riguardano la pagina.<\/p>\n

Nella modalit\u00e0 pi\u00f9 semplice Facebook ci mette a disposizione un tool di creazione del link <\/a>da mostrare on-line. Questo tool permette di automatizzare alcune delle caratteristiche che vediamo qui di seguito.<\/p>\n

Funzionamento del tasto condividi<\/h3>\n

Quando un utente vuole condividere il nostro link, clicca sul tasto “Share on Facebook<\/em>” che trova nella nostra pagina. Il link aprir\u00e0 una finestra di popup <\/strong>a cui viene passato come parametro l’url <\/strong>della pagina in cui si trova o che noi gli segnaliamo.<\/p>\n

A questo punto si pu\u00f2 ipotizzare che Facebook faccia una chiamata asincrona <\/strong>alla nostra pagina e dal documento vada a pescare direttamente le informazioni da mostrare nel box di condivisione sul profilo dell’utente: il titolo, la descrizione, un’eventuale immagine<\/strong>. Recuperate queste informazioni, le mostra all’utente che le pu\u00f2 modificare come meglio crede per poter, infine, condividere il link.<\/p>\n

Ma come \u00e8 fatto il bottone da inserire?<\/h3>\n

[html]
\n<a name=”fb_share” type=”icon_link” share_url=”” href=”http:\/\/www.facebook.com\/sharer.php”>
\nCondividi
\n<\/a>
\n<script src=”http:\/\/static.ak.fbcdn.net\/connect.php\/js\/FB.Share” type=”text\/javascript”><\/script>
\n[\/html]<\/p>\n

Il tag script consente al bottone di ottenere la funzionalit\u00e0 di apertura del popup, ci basti sapere che aprir\u00e0 una finestra riconoscendo come bottoni facebook tutti i tag a con parametro name =”fb_share” <\/strong>presenti nella pagina.<\/p>\n

Il tipo di bottone<\/h3>\n

Il parametro type <\/strong>nel link ci permette di scegliere l’aspetto del bottone di share. Esso pu\u00f2 assumere differenti valori: box_count<\/strong> (un box con il numero di utenti che hanno condiviso), button_count<\/strong> (lo stesso di box, ma un po’ pi\u00f9 piccolo), button <\/strong>(un bottone senza riferimento al numero di condivisioni), icon_link <\/strong>(un’icona di facebook con in pi\u00f9 il testo del bottone), icon <\/strong>(esclusivamente l’icona).<\/p>\n

L’URL da condividere<\/h3>\n

Il parametro share_url <\/strong>identifica l’url della pagina che vogliamo condividere, se lasciato vuoto viene usata la pagina in cui il link \u00e8 stato creato. Volendo personalizzare il link, possiamo dare un titolo alla share:<\/p>\n

[html]
\nhttp:\/\/www.facebook.com\/sharer.php?u=<link>&t=<title>
\n[\/html]<\/p>\n

Come valore di “u<\/strong>” dobbiamo inserire il link urlencoded (attenzione se non usate rewrite degli indirizzi, dopo il ? tutti gli \/ verranno trasformati in valori urlencoded insieme a tutti gli altri carattere). Come valore di “t<\/strong>” Possiamo inserire una stringa rappresentativa del titolo che verr\u00e0 mostrato nel popup.<\/p>\n

Il testo<\/h3>\n

Oltre a questi parametri \u00e8 possibile inserire al posto di “Condividi” un testo personalizzato che se omesso \u00e8 riempito in automatico dal termine “Share” in inglese che verr\u00e0 mostrato (a meno che usiamo il tipo di bottone “icon”).<\/p>\n

Informazioni aggiuntive<\/h3>\n

Abbiamo detto che una volta aperto il popup Facebook raccoglie autonomamente <\/strong>i dati necessari ad aggiungere informazioni alla condivisione, ma se volessimo controllarle <\/strong>come fare?<\/p>\n

Quando Facebook chiama in modo asincrono <\/strong>la pagina da condividere va a leggere nella sezione head il titolo e la descrizione e successivamente raccoglie una lista di immagini inserite nell’html per mostrarle all’utente. Volendo suggerire tali informazioni in modo automatico<\/strong>, \u00e8 sufficente inserire alcuni metatag insieme ad i normali meta html:<\/p>\n

[html]
\n<meta name=”title” content=”title” \/>
\n<meta name=”description” content=”description ” \/>
\n<link rel=”image_src” href=”thumbnail_image” \/ >
\n[\/html]<\/p>\n

In questo modo i dati che il nostro sito metter\u00e0 a disposizione di Facebook saranno quelli effettivamente utilizzati. Inoltre se volessimo condividere un video o dell’audio o un filmato flash, potremmo indirizzarli nello stesso modo. Le specifiche di funzionamento spiegano in dettaglio come fare.<\/p>\n

Personalizzazione completa<\/h3>\n

Una volta capito il funzionamento e volendo customizzare totalmente il link di Facebook senza basarsi sulla libreria JS fornitaci (la quale modifica l’aspetto del nostro link, cosa che talvolta non \u00e8 l’ideale), dobbiamo eliminare il tag script che carica la libreria proprietaria e sostituirlo con del nostro codice specifico:<\/p>\n

[html]
\n<script>
\nfunction fbs_click() {
\nu=location.href;
\nt=document.title;
\nwindow.open(‘http:\/\/www.facebook.com\/sharer.php?u=’ +
\nencodeURIComponent(u) +
\n‘&t=’ +
\nencodeURIComponent(t),
\n‘ sharer’, ‘toolbar=0, status=0, width=626, height=436’);
\nreturn false;
\n}
\n<\/script>
\n<a href=”http:\/\/www.facebook.com\/share.php?u=<url>”
\nonclick=”return fbs_click()” target=”_blank”>
\n<img src=”” \/>
\n<\/a>
\n[\/html]<\/p>\n

Questo codice risulta identico al funzionamento della libreria nativa con la possibilit\u00e0 di personalizzare l’immagine dell’icona, l’eventuale struttura del bottone e perch\u00e8 no, integrare ulteriori azioni al click sul bottone.<\/p>\n

A seguire i link per sviluppatori forniti da Facebook:<\/p>\n