Das EmbedSocial-Widget ist ein Framework-unabhängiges einbettbares Widget: ein <div> mit einem data-ref-Attribut und dazu ein kleines Loader-Skript. Da das reines HTML ist, lässt sich derselbe Code in jedes JavaScript- oder TypeScript-Framework-Projekt einsetzen. Diese Anleitung behandelt React, Vue und Angular.
Das Widget in React einbetten
In dieser Anleitung führe ich Sie ausführlich durch das Einbetten Ihres Widgets in eine React-Anwendung.
1. Der erste Schritt ist, den Code aus Ihrem erstellten Widget zu kopieren:
2.Nachdem der Code kopiert ist, müssen Sie den HTML-Code vom JavaScript trennen, zum Beispiel:
Das ist der EmbedSocial-Widget-Code:
<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>
HTML-Code:
<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
JavaScript-Code:
(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. Wechseln Sie als Nächstes zu Ihrer React-Anwendung, erstellen Sie eine neue Komponente in Ihrem Verzeichnis components und fügen Sie den HTML-Code in die render-Funktion ein:
Fügen Sie den JavaScript-Code in die Lifecycle-Methode componentDidMount ein:
4. Gehen Sie zu der Seite, auf der Sie das Widget anzeigen möchten, in unserem Fall fügen wir es der Haupt-App.js hinzu, und importieren Sie die gerade erstellte Komponente:
5. Fertig. Sobald Sie das getan und die Änderungen gespeichert haben, erscheint das Widget auf Ihrer Seite.
Wenn Sie Fragen haben, klicken Sie unten rechts auf das Chat-Symbol, um mit unserem Customer-Success-Team zu sprechen, oder schreiben Sie uns eine E-Mail an support@embedsocial.com. Wir sind für Sie da 🙏
In Vue einbetten
In Vue-Anwendungen gibt es zwei Möglichkeiten, benutzerdefinierten HTML-/JavaScript-Code einzubetten:
- Composition API
- Options API
Zuerst müssen Sie Ihren Widget-Code kopieren:
Nachdem Sie den Code kopiert haben, müssen Sie das HTML vom JavaScript trennen, zum Beispiel:
EmbedSocial-Widget-Code:
<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. Das Widget über die Options API einbetten
Um den EmbedSocial-Widget-Code in eine Vue-Anwendung einzubetten, die die Options API verwendet, folgen Sie bitte den Schritten unten:
Wechseln Sie zuerst zu Ihrer Vue-Anwendung und erstellen Sie eine neue Komponente in Ihrem Verzeichnis components:
Fügen Sie den HTML-Code des EmbedSocial-Widgets innerhalb der <template>-Tags ein:
Fügen Sie den JavaScript-Code des EmbedSocial-Widgets in den Lifecycle-Hook created ein:
Nachdem Sie nun die EmbedSocial-Widget-Komponente erstellt haben, müssen Sie die Komponente nur noch importieren und auf Ihrer Website anzeigen.
Öffnen Sie die Datei bzw. Seite, auf der Sie das Widget anzeigen möchten, und importieren Sie die Komponente, in diesem Fall importieren wir sie in App.vue:
Hier sind die Ergebnisse dieses Codes und der Verwendung der Options API
2. Composition API
Die Composition API ist eine Ergänzung des Vue-Frameworks, die die Einschränkungen der in Vue2 verwendeten Options API beheben soll.
Um Ihren Widget-Code in eine Vue-Anwendung einzubetten, die die Composition API verwendet, folgen Sie den Schritten unten:
Wechseln Sie zuerst zu Ihrer Vue-Anwendung und erstellen Sie eine neue Komponente in Ihrem Verzeichnis components:
Fügen Sie als Nächstes den HTML-Code des EmbedSocial-Widgets innerhalb der <template>-Tags ein:
Anschließend müssen Sie die Funktion onMounted aus Vue importieren und den JavaScript-Code des EmbedSocial-Widgets in die Funktion onMounted einfügen:
Mit den Schritten oben haben Sie die EmbedSocial-Widget-Komponente erstellt. Jetzt müssen wir die Komponente importieren und auf Ihrer Website anzeigen.
Öffnen Sie die Datei bzw. Seite, auf der Sie Ihr Widget anzeigen möchten, und importieren Sie die Komponente, in diesem Fall importieren wir sie in App.vue:
Sobald das erledigt ist, wird Ihr Widget auf Ihrer Website angezeigt.
Fertig.
Wenn Sie Fragen haben, klicken Sie unten rechts auf das Chat-Symbol, um mit unserem Customer-Success-Team zu sprechen, oder schreiben Sie uns eine E-Mail an support@embedsocial.com. Wir sind für Sie da 🙏
In Angular einbetten
In Angular-Anwendungen gibt es zwei Möglichkeiten, benutzerdefinierten JavaScript-Code zu integrieren.
Eine Möglichkeit ist, den Code direkt in das HTML einzubetten, die andere und beste Lösung ist, eine Komponente zu erstellen.
- # Code an beliebiger Stelle auf der Seite einbetten
Das ist die vertraute Variante und der einfachste Weg. Sie können also einfach das HTML in einer beliebigen Ihrer Angular-Dateien öffnen und den EmbedSocial-Code direkt einfügen.
Hier ist ein Beispiel:
2. Eine Komponente erstellen
Dafür sind zwei Schritte nötig:
- Die Komponente erstellen
- Die Komponente verwenden
1. Verwenden Sie im Terminal den folgenden Befehl `ng generate component EmbedSocialWidget`, um eine Angular-Komponente namens `EmbedSocialWidget` zu erstellen
2. Nachdem die Komponente erstellt ist, öffnen Sie `EmbedSocialWidget.component.ts` und fügen Sie direkt über dem Konstruktor einen mit `@Input() decorated` versehenen String namens `refId` hinzu.
3. Fügen Sie in derselben Datei innerhalb der Funktion `ngOnInit()` das EmbedSocial-JavaScript hinzu, das für den Aufbau des Widgets zuständig ist.
Ihre Komponentendatei `EmbedSocialWidget.component.ts` sollte aussehen wie im Bild unten:
Die Komponente verwenden
Melden Sie sich zuerst bei Ihrem EmbedSocial-Konto an und gehen Sie zu Widgets. Öffnen Sie eines der Widgets, das Sie einbetten möchten, und holen Sie sich den Wert des EmbedSocial-Attributs data-ref (wie oben erwähnt).
Das data-ref-Attribut sollte so aussehen:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Sobald Sie den data-ref haben, können Sie die neu erstellte Komponente `EmbedSocialWidget` überall in Ihrem Angular-Projekt frei verwenden. Passen Sie einfach das `refId`-Binding der Komponente mit der refId an, die Sie zuvor aus EmbedSocial kopiert haben.
Hier ist ein Beispiel für die Verwendung der Komponente:
Fertig.
Das einbettbare Widget in einem TypeScript-Projekt verwenden
Am Einbettungscode selbst ändert sich nichts, denn das Widget ist reines HTML plus ein Loader-Skript. In einem TypeScript-Framework-Projekt typisieren Sie nur den Wrapper, den Sie darum herum bauen. Das Angular-Beispiel oben ist bereits TypeScript: refId wird in EmbedSocialWidget.component.ts als @Input()-String deklariert. Machen Sie es in React oder Vue genauso, typisieren Sie die Widget-Referenz als string-Prop an Ihrer eigenen Komponente und belassen Sie das Loader-Skript im Mount-Lifecycle-Hook.
Wir hoffen, das war hilfreich. Wenn Sie Fragen haben oder Unterstützung benötigen, wenden Sie sich gerne an: support@embedsocial.com