Condividi su Facebook – Creare e personalizzare il pulsante Share

Creare e personalizzare il pulsante Già qualche tempo fa avevamo visto come creare il pulsante che permetteva di condividere qualsiasi contentuo del nostro sito sul social network più utilizzato. L’articolo era questo.
Abbiamo anche visto in altri post che esistono anche molti plugin per wordpress, ma anche per gli altri Cms che permettono la condivisione su quasi tutti i social e community che lo permettono.

Ora continuiamo ed approfondiamo il discorso del pulsante condividi.
Come già detto, il pulsante “Condividi su Facebook” o “Share on Facebook” permette ai visitatori del nostro sito di linkare il nostro contenuto sul social netwotrk in modo che sia visualizzato sulla nostra bacheca con un commento o delle informazioni che riguardano la pagina.

Come spiegato nel precedente articolo lo stesso Facebook mette a disposizione un tool di creazione del link da mostrare on-line che permette anche un minimo di personalizzazione

Premendo sul tasto “Share on Facebook” si aprirà un popup in cui vengono riepilogati i dettegli del link da condividere. Una’immagine, il titolo e l’Url.
Facebook recupera queste informazioni automaticamente dal codice html della pagina.

Il codice da inserire per visualizzare il pulsante è il seguente :


Condividi

L’aspetto del pulsante dipende dal parametro type
box_count : Visualizza un riquadro con il numero di utenti che hanno condiviso il link
Il Box, piuttosto vistostoso è il seguente :

box_count facebook

button_count : In questo caso il box visualizzato è un po’ più piccolo.
button_count facebook

button : visualizza n semplice pulsante share, senza il numero di condivisioni
Share_button Facebbok

icon_link : Visualizza un’icona di facebook con in più il testo del bottone mentre icon visualizza esclusivamente l’icona.
Icon Facebook
Icon_link facebbok


Se non è specificato alcun testo nel pulsante verrà visualizzato la scritta “Share”.
Nel nostro caso abbiamo scritto “Condividi”.

Come si vede nell’esempio il parametro share_url identifica l’url della pagina che vogliamo condividere.
Se il campo viene lasciato vuoto, la pagina usata è quella in cui il link è stato creato.
Volendo personalizzare il link, possiamo dare un titolo alla share:

http://www.facebook.com/sharer.php?u=&t=

Come si intuisce accanto al parametro u va inserito il link da condividere mentre al posto del parametro t il titolo che verrà visualizzato anche nel popup riepilogativo.

Le informazioni riepilogative relative alla pagina che facebook recupera per visualizzarle nella bacheca dipendono dalla pagina stessa.
In particolare il titolo usato sarà quello presente nel tag title della pagina.
La descrizione è la description della pagina. Questi valori sono nella sezione head della pagina stessa
Note aggiuntive
Racchiudendo il codice di share all’interno di un div come specificato sotto, è possibile modificare l’allineamente a destra o sinistra del contatore e del testo relativo.

CODICE SHARE

In questo caso il pulsante sarà a sinsitra.

Le informazioni direttamente dagli sviluppatori di facebook sono nella pagina “Strumento di condivisione di Facebook”.
Altre informazioni relative a Facebook sono invece reperibili nel link seguente : Facebook.




About Mauro De Filippis 2807 Articles
Laureato in Ingegneria Informatica nel 2008 presso l'Università degli Studi di Lecce con una tesi in Processi di Produzione Robotizzati dal titolo "Integrazione delle tecniche di progettazione del ciclo di lavorazione con programmazione della produzione”. Le mie attività principali sono : sviluppo di applicativi ANSI C per terminali POS basati su processori ARM Risc 32Bit con 2-4 MB di Ram (progettazione, sviluppo e test delle applicazioni ) sviluppo in ambiente .NET sviluppo Web in ambiente PHP, ASP Installazione, progettazione, utilizzo di Db MS SQL Server, Mysql, Acces , Oracle Da anni mi occupo di CMS Open Source, in particolare di Joomla e Wordpress. Mia è la Guida Wordpress 3.5, la Guida Joomla 2.5 , il Corso online Joomla! 2.5 ed il Corso online Wordpress Mi occupo anche di LMS in particolare di Moodle e Docebo. Google+ by Mauro De Filippis

8 Commenti

  1. Per quanto rigurada l’immagine:
    di norma, quando si condivide un link su facebook, vengono presentate diverse immagini tra cui si puo scegliere ma esiste un tag HTML che permette di associare alla pagina un’immagine di anteprima.
    Il icodice da inserire all’interno dei tag

      

    della pagina:

    Ovviamente va sostituito il percorso con quello dell’immagine rappresentativa dell’articolo.
    Ovviamente inoltre andrebbe fatto in modo automatico per ogni pagina del sito.
    questo tag funziona anche su Digg e su Yahoo!.

  2. ciao, complimenti x la spiegazione 🙂 , vorrei 1 aiuto..ho creato 1 pagina, ho messo l’ applicazione fbml, in particolare il riquadro “mi piace e commenti”, ho apportato qualche modifica, cioè eliminando i commenti “predefiniti”, però nn riesco a gestire i commenti ke i miei fans lasciano, nel senso ke mi manca la “x” x eliminare/segnalare un eventuale commento indesiderato o offensivo, hai un idea??? grazie 🙂

  3. Il tasto “Condividi/Share su facebook” non funziona più !!!
    Quando provate a condividere sembra che vada tutto a meraviglia e vi spunta tutto come sempre con link ed immagine associata. Ma se andate a vedere “cosa” è realmente stato condiviso (in bacheca o come messaggio) non c’è nessun link, e resta solo l’eventuale messaggio che avevate inserito manualmente !
    Io però ho notato che il tasto può funzionare con un piccolo accorgimento: nel testo del messaggio basta copiare ed incollare nuovamente l’indirizzo del link che si vuole mandare (in bacheca, come messaggio, ecc), anche se “apparentemente risulta già presente con l’immagine corredata.

    Per i dettagli sul “problema” consultate il seguente link:
    http://facebook-amici.blogspot.com/2011/03/condividi-su-facebook-cancellato.html

1 Trackback / Pingback

  1. Facebook: il Pulsante Condividi e il Pulsante Mi Piace, utilizzo e differenze | Guida Pagine Web

Leave a Reply

L'indirizzo email non sarà pubblicato.


*