AMP

amp-social-share

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

La funzione di monitoraggio della condivisione è in fase di sviluppo.

 

Required Scripts

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Mostra un pulsante di condivisione social.

Script obbligatorio
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Layout supportati container, fill, fixed, fixed-height, flex-item, nodisplay, responsive
Esempi Vedi l'esempio amp-social-share del sito AMP By Example.

Panoramica

Il componente amp-social-share mostra un pulsante di condivisione per diversi fornitori di piattaforme social.

Esempi

Esempio: pulsante di condivisione social di base

Il pulsante di condivisione indovina alcuni valori predefiniti per certi fornitori preconfigurati. Il pulsante presuppone che l'URL canonico del documento corrente sia l'URL che vuoi condividere e il titolo pagina il testo che vuoi condividere.

<amp-social-share type="twitter"></amp-social-share>

Esempio: trasmettere i parametri

Se vuoi trasmettere dei parametri all'endpoint di condivisione, puoi specificare data-param-<attribute>, che verrà aggiunto all'endpoint di condivisione.

<amp-social-share type="linkedin" width="60" height="44"
    data-param-text="Hello world"
    data-param-url="https://example.com/">
</amp-social-share>

Linkedin è uno dei fornitori preconfigurati, pertanto in questo caso non è necessario che tu fornisca l'attributo data-share-endpoint.

Attributi

type (obbligatorio) Seleziona un tipo di fornitore. È obbligatorio sia per i fornitori preconfigurati che per quelli non configurati.
data-target Specifica il target in cui aprire il target. Il valore predefinito è _blank per tutti i casi eccetto email/SMS su iOS, dove invece il target è impostato su _top. Tieni presente che suggeriamo di utilizzare questo override solo per le email.
data-share-endpoint Questo attributo è obbligatorio per i fornitori non configurati.
Alcuni fornitori popolari dispongono di endpoint di condivisione preconfigurati. Per ulteriori dettagli, consulta la sezione Fornitori preconfigurati. Per i fornitori non configurati, devi specificare l'endpoint di condivisione.
data-param-* Tutti gli attributi con prefisso data-param-* vengono trasformati in parametri URL e trasmessi all'endpoint di condivisione.

Fornitori preconfigurati

Il componente amp-social-share fornisce alcuni fornitori preconfigurati che conoscono i loro endpoint di condivisione e alcuni parametri predefiniti.

Fornitore Tipo Parametri
API Web Share (attiva la finestra di dialogo di condivisione del sistema operativo) system
  • data-param-text: facoltativo, il valore predefinito è: "Titolo della pagina corrente"
  • data-mode: facoltativo, se impostato su replace, tutte le altre opzioni di condivisione vengono rimosse
Email email
  • data-param-subject: facoltativo, il valore predefinito è: Titolo della pagina corrente
  • data-param-body: facoltativo, il valore predefinito è: URL di rel=canonical
  • data-param-recipient: facoltativo, il valore predefinito è: '' (stringa vuota)
Facebook facebook
  • data-param-app_id: obbligatorio, il valore predefinito è: nessuno. Questo parametro è l'app_id di Facebook, obbligatoria per la finestra di dialogo di condivisione Facebook
  • data-param-href: facoltativo, il valore predefinito è: URL di rel=canonical
  • data-param-quote: facoltativo. Può essere utilizzato per condividere una citazione o un testo
LinkedIn linkedin
  • data-param-url: facoltativo, il valore predefinito è: URL di rel=canonical
Pinterest pinterest
  • data-param-media: facoltativo (ma vivamente consigliato), il valore predefinito è: nessuno. URL per i file multimediali da condividere su Pinterest. Se non è impostato, Pinterest chiederà all'utente finale di caricare un file multimediale.
  • data-param-url: facoltativo, il valore predefinito è: URL di rel=canonical
  • data-param-description: facoltativo, il valore predefinito è: Titolo della pagina corrente
G+ gplus
  • data-param-url: facoltativo, il valore predefinito è: URL di rel=canonical
Tumblr tumblr
  • data-param-url: facoltativo, il valore predefinito è: URL di rel=canonical
  • data-param-text: facoltativo, il valore predefinito è: Titolo della pagina corrente
Twitter twitter
  • data-param-url: facoltativo, il valore predefinito è: URL di rel=canonical
  • data-param-text: facoltativo, il valore predefinito è: Titolo della pagina corrente
WhatsApp whatsapp
  • data-param-text: facoltativo, il valore predefinito è: "Titolo della pagina corrente - URL della pagina corrente"
LINE line
  • data-param-url: facoltativo, il valore predefinito è: URL di rel=canonical
  • data-param-text: facoltativo, il valore predefinito è: Titolo della pagina corrente
SMS sms
  • data-param-body: facoltativo, il valore predefinito è: URL di rel=title - rel=canonical

Fornitori non configurati

Oltre ai fornitori preconfigurati, puoi utilizzare dei fornitori non configurati specificando attributi aggiuntivi nel componente amp-social-share.

Esempio: creare un pulsante di condivisione per un fornitore non configurato

Nell'esempio seguente, viene creato un pulsante di condivisione tramite Facebook Messenger impostando l'attributo data-share-endpoint sull'endpoint corretto per il protocollo personalizzato di Facebook Messenger.

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Poiché questi fornitori non sono preconfigurati, dovrai creare immagini e stili appropriati ai pulsanti per il fornitore.

Stili

Stili predefiniti

Per impostazione predefinita, amp-social-share include alcuni fornitori preconfigurati. I pulsanti di questi fornitori sono abbinati al colore e al logo ufficiali del fornitore. La larghezza e l'altezza predefinite sono rispettivamente 60 px e 44 px.

visita il sito AMP Start per link di condivisione adattabili e preimpostati da utilizzare nelle tue pagine AMP.

Stili personalizzati

Se vuoi utilizzare un tuo stile personale, puoi semplicemente sostituire gli stili già forniti come segue:

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

Sostituzione delle variabili

Puoi utilizzare la sostituzione delle variabili AMP globali nell'elemento <amp-social-share>. Nell'esempio seguente, TITLE viene sostituito con il titolo pagina e CANONICAL_URL con l'URL canonico del documento.

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Convalida

Consulta le regole amp-social-share nella specifica dello strumento di convalida AMP.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub