Bottoni di condivisione e altro ..

di Maria Silvana Radice




Come inserire i bottoni di condivisione per i social e altro..

How to add share buttons etc..


Premessa: in questa guida troverete le indicazioni per implementare i bottoni sia tramite il loro codice, sia tramite link da aprire, eventualmente, in una finestra popup. Considerata la nuova e severa normativa sull'uso dei cookie anche di terze parti, la soluzione consigliabile e` quella di utilizzare, ove possibile, sempre i link.


Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

I link di condivisione dei principali social:

Lavorandoci un po', sono riuscita ad estrapolare i link di condivisione, in modo da non dover usare gli script e poterli inserire ovunque e semplicemente (anche nella sidebar).
Modificate i campi in rosso, inserendo i vostri dati. Dove è consentito, potete inserire titoli e/o descrizioni, ma ricordatevi di farlo, sempre, separando le parole con il + e senza lasciare spazi bianchi, come vedete nel secondo link, dove ho inserito un testo d'esempio, che potete cambiare a piacere. Mettete i link sotto un testo, o ad un'immagine a vostra scelta.

ATTENZIONE: nei link dove sono compresi titolo e/o descrizione,  se il testo e` formato da piu` parole, andrebbero divise con il +. Di solito il browser lo aggiunge automaticamente, ma e` giusto saperlo.
Esempio:
La+chiave+nel+pozzo

Per facebook:

https://www.facebook.com/share.php?v=4&src=bm&u=URL da condividere
oppure (piu` attuale):
https://www.facebook.com/sharer/sharer.php?u=URL da condividere&title=Titolo

Per Twitter:

https://twitter.com/share?text=Visita+questa+pagina:&url=URL da condividere

Per Google+:

https://plus.google.com/share?url=URL da condividere

Per Linkedin:

https://www.linkedin.com/shareArticle?mini=true&url=URL da condividere

Per Digg:

https://digg.com/tools/diggthis/confirm?title=&url=URL da condividere

Per Delicious:

https://www.addtoany.com/add_to/delicious?linkurl=URL da condividere

Per Stumbleupon:

https://www.stumbleupon.com/badge/?url=URL da condividere

Per Tumblr:

https://www.tumblr.com/share/link?url=URL da condividere&name=Titolo&description=Descrizione

Per Reddit:

https://www.reddit.com/submit?url=URL da condividere&title=Titolo

Per Pinterest:

https://www.pinterest.com/pin/create/button/?url=URL da condividere&media=URL immagine&description=Descrizione


Questi link, aprono le finestre di condivisione. Potete metterli sotto un testo, oppure sotto l'immagine di un logo, come ho fatto io nella mia sidebar. Tutti i link possono essere aperti in una finestra popup, seguendo la guida Finestre popup.

Facebook

Il bottone di condivisione di Facebook:

Potete configurarlo da qui:

https://developers.facebook.com/docs/plugins/share-button?locale=it_IT

L'esempio sopra è funzionante (....quindi, se ne approfittate per condividere il sito, mi fate un regalo.. )

Per aggiungere un link di condivisione su Facebook, in una pagina del sito Google, la strada più semplice è, però, quella di usare questo link, mettendolo sotto un testo, o un'immagine a vostra scelta:

https://www.facebook.com/share.php?v=4&src=bm&u=URL da condividere

Al posto di URL da condividere, inserite l'indirizzo della pagina del vostro sito che volete far condividere. Si inserisce come un normalissimo link.


Se volete condividere in fb un'immagine specifica della pagina e volete che sia cliccabile e porti al vostro sito, il metodo migliore e` questo: assicuratevi che l'immagine abbia gia` il collegamento che desiderate, poi trascinate la foto dentro la casella "A cosa stai pensando" di fb.


ATTENZIONE!! Puo` capitare che ci vogliano alcuni minuti per vedere apparire le immagini nella condivisione su FB.
Se le immagini visualizzate non corrispondono all'attuale versione della pagina, dovete utilizzare il Debugger.... https://developers.facebook.com/tools/debug/
....per cancellare la cache di Facebook. Basta inserire l'URL della pagina e cliccare su "Debug". Appariranno una serie di dati e la cache risultera` cancellata.

Il bottone "mi piace" per il profilo di Facebook:


Su Google sites, questo bottone da errore, in qualunque modo lo si inserisca. Stiamo cercando una soluzione, se qualcuno la conosce, si faccia avanti.
Nel frattempo, l'unica alternativa che ho trovato, funzionante, è collegare questo link ad un testo, o immagine:

https://www.facebook.com/plugins/like.php?href=URLsito&layout=standard&action=like&show_faces=true&share=false&height=80

Il bottone apparirà, così, in una nuova finestra del browser.

Esempio funzionante:

Anche questo bottone può essere aperto in una finestra popup, seguendo la guida Finestre popup.

Esempio con popup:


Il bottone "mi piace" per la pagina su Facebook:


Naturalmente, il bottone "mi piace", che vi ho indicato, puo` essere collegato anche ad una pagina di Facebook.

A questo proposito, pero`, voglio proporvi una soluzione molto carina.... Esempio funzionante:

La chiave nel pozzo


Il codice per ottenere questo risultato, e` il seguente:

<table border="0">
<tbody>
<tr>
<td rowspan="2" style="padding:0px 3px 0px 0px;width:50px;height:50px">
<a href="//www.facebook.com/IDpagina" target="_blank" title="">
<img border="0" rel="nofollow" src="//graph.facebook.com/IDpagina/picture" style="border:0px;padding:0px;margin:0px;width:50px;height:50px"></a>
</td>
<td colspan="2" style="padding:0px 0px 0px 0px;vertical-align:bottom;text-align:left">
<a href="//www.facebook.com/IDpagina" style="text-decoration:none" target="_blank">
<font color="#0b5394" face="verdana, sans-serif" size="2">
<b>Titolo della pagina</b>
</font></a>
</td>
</tr>
<tr>
<td style="padding:5px 0px 0px 0px;width:48px;height:24px">
<a href="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FIDpagina&amp;width=292&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true" target="_blank" title="Like">
<img border="0" rel="nofollow" src="https://sites.google.com/a/joinrsite.com/gadgets/button/like.jpg" style="border:0px;margin:0px;padding:0px;width:48px;height:24px"></a>
</td>
<td style="vertical-align:middle;text-align:left">
<font color="#444444" face="arial, sans-serif" size="2">
0
</font>
</td>
</tr>
</tbody>
</table>
Fonte

Negli spazi segnati in rosso, dovete inserire l'ID della vostra pagina, o il nome che la contraddistingue.
Es: https://www.facebook.com/lachiavenelpozzo

Il bottone "Seguimi su Facebook":

Dovete recarvi nelle impostazioni del vostro profilo Facebook e stabilire le impostazioni per essere seguiti.

https://www.facebook.com/settings?tab=followers

Fatto questo, potete prelevare il codice più sotto e inserirlo nel vostro sito.
In Google sites, il codice da errore, quindi bisogna usare questo link:

https://www.facebook.com/plugins/follow.php?href=https://www.facebook.com/mariasilvana.radice&width&height=21&colorscheme=light&layout=button_count&show_faces=true

Al posto dell'indirizzo del mio profilo (in rosso) dovete mettere quello del vostro profilo.

Ecco fatto, questo link potrete incollarlo sotto l'immagine di un bottone, oppure sotto un testo e può essere messo anche nella sidebar.

Esempio funzionante:
Seguimi su Facebook

In alternativa, potete configurare un pulsante da qui:

https://developers.facebook.com/docs/plugins/follow-button

Il badge di Facebook:

Il badge di Facebook puo` essere creato e implementato seguendo le indicazioni di Facebook stesso..
https://www.facebook.com/badges/

Twitter

Il bottone "Seguimi su Twitter":

Potete configurarlo da qui:

https://publish.twitter.com/#

Oppure usare questo link....

https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&region=follow_link&screen_name=nome in Twitter&tw_p=followbutton&variant=2.0

Al posto di "nome in Twitter" inserite il vostro nome utente di Twitter e, poi, potete mettere il link sotto un testo, o sotto un'immagine.

Esempio funzionante:
Twitter

Anche questo bottone può essere aperto in una finestra popup, seguendo la guida Finestre popup.

Google+

Il bottone +1 di Google+:

Per configurare il bottone G+1 bisogna andare a questo indirizzo:

https://developers.google.com/+/web/+1button/?hl=it

Anche il bottone G+1 puo` essere raggiunto tramite link. Il link e` questo:

https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&hl=it&origin=http://89q3b3mi3cr5h9s6q46udqp7eghebj4p-a-sites-opensocial.googleusercontent.com&url=URLsitoweb

Su Google sites puo` essere implementato tramite gadget (vedi piu` sotto), oppure tramite il link sopra.

Il badge del profilo Google+:

Ecco lo script:

<div class="g-person" data-width="140" data-href="https://plus.google.com/114787917099375485799/posts?hl=it" data-showtagline="false" data-rel="author"></div>
<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>

Al posto dell'ID che vedete in rosso (che è il mio), dovete inserire l'ID del vostro profilo su Google+.  Potete cambiare la larghezza del badget che ora vedete impostata su 140 (px).
Il badge funziona anche inserendo l'ID testuale (es: https://plus.google.com/+MariaSilvanaRadice/posts)
Ecco il risultato (funzionante):

Il badge della pagina di Google+:

Se volete creare il badge di una pagina, invece, il codice sara` questo:

 <div class="g-page" data-width="140" data-href="//plus.google.com/115746257038357710802" data-rel="publisher"></div>
<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 volete personalizzare i badge, andate in questa pagina.
In Google sites, questo script andrà inserito seguendo la guida: Come inserire codici e scripts in Google sites.
E' possibile includere un singolo post di Google+ nel sito da inserisci->Google+->Post di Google+.

Youtube

Il bottone di iscrizione al canale YouTube:

Cis sono due metodi.

Primo metodo (popup):

Esempio funzionante (passate il mouse sul bottone):

Il codice da usare e` questo:

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="XXXXXXXXXX" data-layout="default" data-count="hidden"></div>

Al posto di XXXXXXXXX dovete inserire l'ID del vostro canale che trovate nella barra degli indirizzi del browser..

Es: https://www.youtube.com/channel/XXXXXXXXXXXX

Se volete visualizzare il numero di iscrizioni gia` ottenute vicino al bottone, sostituite "hidden" con "default".

Per personalizzare ulteriormente il bottone, potete recarvi nella pagina degli sviluppatori:

https://developers.google.com/youtube/youtube_subscribe_button


In Google sites questo codice va inserito seguendo la guida: Come inserire codici e scripts in Google sites

Secondo metodo (link):

Cliccando sul link, gli utenti saranno indirizzati alla pagina del vostro canale, sulla quale apparira` un popup per l'iscrizione.
Il link e` come questo:

 https://www.youtube.com/channel/UC9n2okTsu93TSErk5eVXVUw?sub_confirmation=1

La prima parte corrisponde esattamente all'indirizzo del vostro canale Youtube, a cui dovete aggiungere la parte segnata in rosso.
Naturalmente potrete mettere un'immagine sotto al link, se preferite.

Questo secondo metodo e` molto utile su Google sites, perche` permette l'implementazione anche nella barra laterale.

Altro

Il bottone "Condividi via mail":

Volete dare ai vostri visitatori la possibilità di consigliare il sito, o una pagina di esso, ai loro amici e conoscenti via mail? Ecco come fare....
Incollate questo codice nell'html della pagina, inserendo l'URL del vostro sito, o della pagina che volete condividere e l'indirizzo dell'immagine che avete scelto come bottone. Il testo in grassetto, è quello che apparirà nel contenuto della email, insieme al link; potete modificarlo come preferite. Quello in verde, invece, apparirà come oggetto della mail e, anche questo, potete cambiarlo come credete..

<a href="mailto:?subject=Consiglio&amp;body=Visita questo sito: URL vostro sito" title="Condividi via email"><img src="URL immagine bottone"/></a>



<-esempio funzionante


In Google sites, questo codice si può inserire direttamente nell'html della pagina, oppure, caricando prima l'immagine e inserendo, come collegamento ,questa stringa:

 mailto:?subject=Consiglio&body=Visita%20questo%20sito:%20URL pagina da condividere

Il bottone di Skype:

Per questo argomento vi rimando alla guida: Bottone Skype nel sito

Il bottone "Contattami via email":

Semplice link che apre il client di posta del computer:

mailto:indirizzo destinatario

Con destinatario, oggetto e contenuto.

<a href="mailto:Indirizzo destinatario?subject=Oggetto del messaggio
&body=Contenuto del messaggio di posta">Testo visibile</a>

Se volete mettere un'immagine come bottone, la stringa diventa cosi`:

<a href="mailto:Indirizzo destinatario?subject=Oggetto del messaggio
&body=Contenuto del messaggio di posta">
<img src="URL immagine bottone"/>
</a>

In Google sites, questo codice si puo` inserire direttamente nell'html della pagina.

Il bottone stampa la pagina:

Stampare una pagina web e` molto semplice, basta cliccare su file->stampa nella barra degli strumenti del browser, ma se volete mettere un bottone nelle vostre pagine per invitare gli utenti a stamparle, lo potete fare....

Esempio funzionante:

Il codice e` questo:

<form xmlns="http://www.w3.org/1999/xhtml">
<input onclick="window.open(document.referrer+'?tmpl=/system/app/templates/print/&showPrintDialog=1')" 
type="button" style=" color:#ffffff; background-color: #45A2EF; width: 160px; font-weight:bold; padding: 8px; border-radius: 12px;" value="Stampa questa pagina"></form>

I parametri importanti da personalizzare sono quelli in rosso, in questo modo:
  • color:#ffffff = e` il colore della scritta
  • background-color: #45A2EF = e` il colore del bottone
  • width: 160px = e` la lunghezza del bottone
E se volete potete, naturalmente, cambiare il testo che appare sul bottone.
I colori possono essere inseriti tramite il loro codice web , oppure con il nome inglese (Editor colori).
In Google sites questo codice puo' essere inserito direttamente nel codice html della pagina, oppure seguendo il percorso inserisci->altri gadget->embed gadget.

Come inserire i bottoni di Twitter e Google+ in Google sites, utilizzando i gadget:

Per inserire i bottoni di Twitter (Twitter Tweet Botton) e Google+ (Google+ Share Botton) in Google sites, esistono, anche, gli appositi gadget. Li trovate in inserisci->altri gadget->in primo piano. Fate scorrere la lista fino ad individuarli. Non occorre inserire nulla, perchè avverrà in automatico.


Per Twitter, la finestra è questa:



Lasciate tutto com'è, nella prima parte, mettete, solo, la lingua italiana e dimensioni 100 x 21. Togliete le spunte a tutte le successive caselle.


Per Google+, la finestra e` questa:



Stessa storia, ma, dato che il bottone di Google+ è quadrato, lasciate le dimensioni come sono. Togliete la spunta alle altre caselle.
Spero di essermi spiegata bene.

AH, dimenticavo! Se dovesse capitare che dovete fare delle modifiche, non occorre rifare tutto daccapo, nooooo.....andate su modifica, cliccate sul gadget da correggere, poi scegliete la rotella e vi si riaprirà la finestra delle opzioni.





Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in   

Ti e` stato utile questo argomento?