Le widget EmbedSocial est un widget intégrable indépendant de tout framework : un seul <div> portant un attribut data-ref, plus un petit script de chargement. Comme il s'agit de simple HTML, le même code s'insère dans n'importe quel projet de framework JavaScript ou TypeScript. Ce guide couvre React, Vue et Angular.
Intégrer le widget dans React
Dans ce tutoriel, je vais vous donner une présentation détaillée de la façon d'intégrer votre widget dans une application React.
1. La première étape consiste à copier le code de votre widget créé :
2.Une fois le code copié, vous devrez séparer le code HTML du JavaScript, par exemple :
Voici le code du 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>
Code HTML :
<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
Code 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. Rendez-vous ensuite dans votre application React, créez un nouveau composant dans votre répertoire components et collez le code HTML à l'intérieur de la fonction render :
Collez le code JavaScript à l'intérieur de la méthode de cycle de vie componentDidMount :
4. Accédez à la page où vous voulez afficher le widget, dans notre cas nous l'ajouterons au fichier principal App.js, et importez le composant que nous venons de créer :
5. C'est tout. Une fois cela fait et les modifications enregistrées, le widget apparaîtra sur votre page.
Si vous avez des questions, cliquez sur l'icône de chat en bas à droite pour parler avec notre équipe de service client ou écrivez-nous à support@embedsocial.com. Nous sommes là pour vous 🙏
Intégrer dans Vue
Dans les applications Vue, il y a deux options pour intégrer du code HTML/JavaScript personnalisé :
- Composition API
- Options API
Vous devrez d'abord copier le code de votre widget :
Une fois le code copié, vous devrez séparer le HTML du JavaScript, par exemple :
Code du 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. Intégrer le widget via l'Options API
Pour intégrer le code du widget EmbedSocial dans une application Vue qui utilise l'Options API, suivez les étapes ci-dessous :
Rendez-vous d'abord dans votre application Vue et créez un nouveau composant dans votre répertoire components :
Collez le code HTML du widget EmbedSocial à l'intérieur des balises <template> :
Collez le code javascript du widget EmbedSocial à l'intérieur du hook de cycle de vie created :
Maintenant que vous avez créé le composant widget EmbedSocial, il vous suffit d'importer le composant et de l'afficher sur votre site.
Ouvrez le fichier ou la page où vous voulez afficher le widget et importez le composant, dans ce cas nous l'importons dans App.vue :
Voici les résultats de ce code avec l'Options API
2. Composition API
La Composition API est un ajout au framework Vue créé pour répondre aux limites de l'Options API utilisée dans Vue2.
Pour intégrer le code de votre widget dans une application Vue qui utilise la Composition API, vous devrez suivre les étapes ci-dessous :
Rendez-vous d'abord dans votre application Vue et créez un nouveau composant dans votre répertoire components :
Ensuite, collez le code HTML du widget EmbedSocial à l'intérieur des balises <template> :
Vous devrez ensuite importer la fonction onMounted depuis Vue et coller le code javascript du widget EmbedSocial à l'intérieur de la fonction onMounted :
En suivant les étapes ci-dessus, vous avez créé le composant widget EmbedSocial, il nous reste à importer le composant et à l'afficher sur votre site.
Ouvrez le fichier ou la page où vous voulez afficher votre widget et importez le composant, dans ce cas nous l'importons dans App.vue :
Une fois cela fait, votre widget s'affichera sur votre site.
C'est tout.
Si vous avez des questions, cliquez sur l'icône de chat en bas à droite pour parler avec notre équipe de service client ou écrivez-nous à support@embedsocial.com. Nous sommes là pour vous 🙏
Intégrer dans Angular
Dans les applications Angular, il y a deux options pour intégrer du code JavaScript personnalisé.
Une option consiste à intégrer le code directement dans le HTML, et l'autre meilleure solution est de créer un composant.
- # Intégrer le code n'importe où sur la page
C'est une option familière et la plus simple. Vous pouvez donc simplement accéder au html de n'importe lequel de vos fichiers Angular et y coller directement le code EmbedSocial.
Voici un exemple :
2. Créer un composant
Vous devez suivre deux étapes pour y parvenir :
- Créer le composant
- Utiliser le composant
1. Dans le terminal, utilisez la commande suivante `ng generate component EmbedSocialWidget` pour créer un composant angular appelé `EmbedSocialWidget`
2. Une fois le composant créé, ouvrez `EmbedSocialWidget.component.ts` et ajoutez une chaîne `@Input() decorated` appelée `refId` juste au-dessus du constructeur.
3. Dans ce même fichier, à l'intérieur de la fonction `ngOnInit()`, ajoutez le javascript embedsocial, qui est chargé de construire le widget.
Votre fichier de composant `EmbedSocialWidget.component.ts` devrait ressembler à l'image ci-dessous :
Utiliser le composant
Commencez par vous connecter à votre compte EmbedSocial et allez dans Widgets. Ouvrez l'un des widgets que vous voulez intégrer et récupérez la valeur de l'attribut data-ref d'EmbedSocial (comme indiqué ci-dessus).
L'attribut data-ref devrait ressembler à ceci :
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Une fois le data-ref en main, vous pouvez utiliser librement le composant `EmbedSocialWidget` nouvellement créé n'importe où dans votre projet angular. Modifiez simplement le binding `refId` du composant avec le refId que vous avez copié depuis EmbedSocial.
Voici un exemple d'utilisation du composant :
C'est tout.
Utiliser le widget intégrable dans un projet TypeScript
Rien ne change dans le code d'intégration lui-même, car le widget est du simple HTML plus un script de chargement. Dans un projet de framework TypeScript, vous ne typez que le wrapper que vous construisez autour. L'exemple Angular ci-dessus est déjà du TypeScript : refId est déclaré comme une chaîne @Input() dans EmbedSocialWidget.component.ts. Faites de même dans React ou Vue, typez la référence du widget comme une prop string sur votre propre composant, et gardez le script de chargement dans le hook de cycle de vie de montage.
Nous espérons que cela vous a été utile, et si vous avez des questions ou besoin d'aide, n'hésitez pas à nous contacter à : support@embedsocial.com