Il widget EmbedSocial è un widget incorporabile indipendente dal framework: un <div> che porta un attributo data-ref, più un piccolo script di caricamento. Poiché si tratta di semplice HTML, lo stesso codice si inserisce in qualsiasi progetto con framework JavaScript o TypeScript. Questa guida copre React, Vue e Angular.
Incorpora il widget in React
In questo tutorial ti darò una guida dettagliata su come incorporare il tuo widget in un'applicazione React.
1. Il primo passaggio è copiare il codice dal widget che hai creato:
2.Una volta copiato il codice dovrai separare il codice HTML dal JavaScript, per esempio:
Questo è il codice del widget EmbedSocial:
<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
<script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>
Codice HTML:
<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
Codice JavaScript:
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
3. Poi vai alla tua applicazione React, crea un nuovo componente nella tua directory components e incolla il codice HTML dentro la funzione render:
Incolla il codice JavaScript dentro il metodo di ciclo di vita componentDidMount:
4. Vai alla pagina in cui vuoi mostrare il widget, nel nostro caso lo aggiungeremo al file principale App.js, e importa il componente che abbiamo appena creato:
5. Ecco fatto. Una volta fatto questo e salvate le modifiche, il widget comparirà nella tua pagina.
Se hai domande, fai clic sull'icona della chat in basso a destra per parlare con il nostro team di assistenza clienti oppure scrivici a support@embedsocial.com Siamo qui per te 🙏
Incorpora in Vue
Nelle applicazioni Vue ci sono due opzioni per incorporare codice HTML/javascript personalizzato:
- Composition API
- Options API
Per prima cosa dovrai copiare il codice del tuo widget:
Dopo aver copiato il codice, dovrai separare l'HTML dal javascript, per esempio:
Codice del widget EmbedSocial:
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
<script>
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
</script>HTML
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>JavaScript
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));1. Incorporare il widget tramite le Options API
Per incorporare il codice del widget EmbedSocial in un'applicazione Vue che usa le Options API, segui i passaggi qui sotto:
Per prima cosa vai alla tua applicazione Vue e crea un nuovo componente nella tua directory components:
Incolla il codice HTML del widget EmbedSocial dentro i tag <template>:
Incolla il codice javascript del widget EmbedSocial dentro l'hook di ciclo di vita created:
Ora che hai creato il componente widget EmbedSocial, devi solo importare il componente e mostrarlo sul tuo sito web.
Apri il file o la pagina in cui vuoi mostrare il widget e importa il componente, in questo caso lo importiamo in App.vue:
Ecco i risultati di questo codice con le Options API
2. Composition API
Le Composition API sono un'aggiunta al framework Vue creata per superare i limiti delle Options API usate in Vue2.
Per incorporare il codice del tuo widget in un'applicazione Vue che usa le Composition API, dovrai seguire i passaggi qui sotto:
Per prima cosa vai alla tua applicazione Vue e crea un nuovo componente nella tua directory components:
Poi incolla il codice HTML del widget EmbedSocial dentro i tag <template>:
Poi dovrai importare la funzione onMounted da Vue e incollare il codice javascript del widget EmbedSocial dentro la funzione onMounted:
Seguendo i passaggi qui sopra hai creato il componente widget EmbedSocial: ora dobbiamo importare il componente e mostrarlo sul tuo sito web.
Apri il file o la pagina in cui vuoi mostrare il tuo widget e importa il componente, in questo caso lo importiamo in App.vue:
Una volta fatto questo, il tuo widget verrà mostrato sul tuo sito web.
Ecco fatto.
Se hai domande, fai clic sull'icona della chat in basso a destra per parlare con il nostro team di assistenza clienti oppure scrivici a support@embedsocial.com Siamo qui per te 🙏
Incorpora in Angular
Nelle applicazioni Angular ci sono due opzioni per integrare codice JavaScript personalizzato.
Un'opzione è incorporare il codice direttamente nell'HTML, mentre l'altra soluzione, la migliore, è creare un Component.
- # Incorporare il codice in qualsiasi punto della pagina
Questa è un'opzione conosciuta ed è la via più semplice. Puoi semplicemente aprire l'html in uno qualsiasi dei tuoi file Angular e incollare direttamente il codice di EmbedSocial.
Ecco un esempio:
2. Creare un Component
Per farlo devi seguire due passaggi:
- Creare il componente
- Usare il componente
1. Nel terminale, usa il comando `ng generate component EmbedSocialWidget` per creare un componente angular chiamato `EmbedSocialWidget`
2. Una volta creato il componente, apri `EmbedSocialWidget.component.ts` e aggiungi una stringa `@Input() decorated` chiamata `refId` subito sopra il constructor.
3. Nello stesso file, dentro la funzione `ngOnInit()`, aggiungi il javascript di embedsocial, che si occupa di costruire il widget.
Il tuo file di componente `EmbedSocialWidget.component.ts` dovrebbe avere l'aspetto dell'immagine qui sotto:
Usare il componente
Per prima cosa, accedi al tuo account EmbedSocial e vai su Widget. Apri uno dei widget che vuoi incorporare e ottieni il valore dell'attributo data-ref di EmbedSocial (come indicato sopra).
L'attributo data-ref dovrebbe avere questo aspetto:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Una volta ottenuto il data-ref, puoi usare liberamente il componente `EmbedSocialWidget` appena creato in qualsiasi punto del tuo progetto angular. Basta modificare il binding `refId` del componente con il refId che hai copiato prima da EmbedSocial.
Ecco un esempio di utilizzo del componente:
Ecco fatto.
Usare il widget incorporabile in un progetto TypeScript
Nel codice di incorporamento non cambia nulla, perché il widget è semplice HTML più uno script di caricamento. In un progetto con framework TypeScript tipizzi soltanto il wrapper che costruisci attorno a esso. L'esempio Angular qui sopra è già TypeScript: refId è dichiarato come stringa @Input() dentro EmbedSocialWidget.component.ts. Fai lo stesso in React o Vue, tipizza il ref del widget come prop string sul tuo componente e tieni lo script di caricamento nell'hook di ciclo di vita di mount.
Speriamo sia stato utile e, se hai domande o ti serve assistenza, non esitare a contattarci a: support@embedsocial.com