Important: this documentation is not applicable to your currently selected format email!
amp-social-share
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>
Supported Layouts
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 |
|
email |
| |
facebook |
| |
linkedin |
| |
pinterest |
| |
| G+ | gplus |
|
| Tumblr | tumblr |
|
twitter |
| |
whatsapp |
| |
| LINE | line |
|
| SMS | sms |
|
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.
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.
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