AMP

amp-social-share

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.

Serve ancora aiuto?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub