How to Add HTML Embed Codes to Your Website [Quick Tip]

Wenn Sie die Inhalte anderer aus Social Media kuratieren oder einfach nur Ihre eigenen visuellen Social-Media-Inhalte für Ihre gesamte Inhaltsstrategie härter machen möchten, müssen Sie wissen, wie Sie HTML-Code in Ihren Blog oder Ihre Website einbetten.

Aber warten Sie eine Sekunde … bevor wir uns mit diesem Tipp beschäftigen, was zum Teufel bedeutet “einbetten”? Und was ist HTML? Wenn Sie nicht wissen, wie man programmiert, keine Sorge – das Einbetten externer Inhalte ist extrem einfach. Nehmen wir uns eine Sekunde Zeit, um die Grundlagen aufzuschlüsseln.

Was bedeutet einbetten?

Einbetten bedeutet, externe Inhalte in eine andere Website oder Seite zu integrieren. Sie betten etwas ein, wenn Sie einen Codeblock – einen sogenannten Einbettungscode – in den HTML-Editor einer anderen Website einfügen. Wenn Sie auf “Speichern” oder “Veröffentlichen” klicken, werden die Medien auf der veröffentlichten Seite gerendert.

Eingebetteter Inhalt wird mit HTML referenziert. HTML ist eine der grundlegendsten Sprachen, die im Web zum Entwerfen und Layouten von Webseiten verwendet werden.

Sie sehen diesen Code oft, wenn Sie sich im “Backend” Ihres Blogbeitrags befinden. Dort fügen Sie Ihren Einbettungscode hinzu.

Die meisten Social- und Multimedia-Websites haben die Möglichkeit, direkt in jedem einzelnen Beitrag einen Einbettungscode zu generieren. Hier ist ein Beispiel für einen Einbettungscode für ein HubSpot-YouTube-Video:

 
<iframe width="560" height="315" src="https://www.youtube.com/embed/eGUEAvNpz48" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Und hier ist das eingebettete Ergebnis.

Möchten Sie dasselbe für Ihre Blog-Posts und -Seiten tun? Sehen wir uns an, wie Sie einen Einbettungscode für die wichtigsten sozialen Websites generieren können.

Im Folgenden behandeln wir diese Schritte für jede Plattform genauer. Im Allgemeinen möchten Sie:

1. Generieren Sie den Einbettungscode.
2. Greifen Sie auf Ihr Content-Management-System zu und fügen Sie den Einbettungscode in Ihren HTML-Viewer ein.
3. Fertig! Sie haben Inhalte in Ihre Website oder Ihr Blog eingebettet.

Lassen Sie uns in jeden Schritt eintauchen.

1. Generieren Sie den Einbettungscode.

Bevor Sie externen Inhalt einbetten, müssen Sie zunächst einen Einbettungscode für den Beitrag oder die Seite generieren, die Sie in Ihre Website einbetten möchten.

Wir zeigen Ihnen, wie Sie dies in den meisten großen sozialen und Content-Netzwerken tun können.

Einbetten eines Facebook-Beitrags

Gehen Sie wie folgt vor, um einen Facebook-Beitrag einzubetten:

• Navigieren Sie in Ihrem Desktop-Browser zu Facebook und rufen Sie den Beitrag auf, den Sie einbetten möchten.
• Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Beitrags.
• Klicken Sie im Dropdown-Menü auf Einbetten.

• Es erscheint ein Pop-up, in dem Sie die Möglichkeit haben, den vollständigen Beitrag einzuschließen und auf erweiterte Einstellungen zuzugreifen. Für Anfänger empfehlen wir, die Optionen unverändert zu lassen und einfach zu klicken Code kopieren.

• Fertig! Sie haben Ihren Einbettungscode.

Einbetten eines Instagram-Posts

Möchten Sie einen Instagram-Post einbetten? Der Prozess ist ähnlich wie bei Facebook. Beachten Sie, dass Sie Beiträge nur aus der Desktop-Version und nicht aus der mobilen App einbetten können.

• Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Beitrags.
• Ein Popup wird mit mehreren Optionen erscheinen. Klicken Einbetten, die vorletzte Option.

• Ein Popup-Fenster mit Ihrem Einbettungscode wird angezeigt. Sie haben die Möglichkeit, die Beschriftung ein- oder auszuschließen.
• Nachdem Sie Ihre Optionen angepasst haben, klicken Sie auf Einbettungscode kopieren.

• Vollständig! Sie haben Ihren Instagram-Einbettungscode.

Ein YouTube-Video einbetten

YouTube-Videos können Ihre Blog-Posts auf die nächste Stufe heben, und das Beste daran ist, dass Sie die Fülle an Inhalten kostenlos in Ihre Blog-Posts einbetten können.

Führen Sie dazu die folgenden Schritte aus:

• Navigieren Sie zu dem Video, das Sie in Ihre Website einbetten möchten.
• Klicke unter dem Video neben den Likes auf Teilen.

• Ein Pop-up bietet mehrere Optionen, einschließlich des Teilens des Beitrags in anderen sozialen Netzwerken. Klicken Einbetten.

• YouTube erstellt einen Einbettungscode, den Sie anpassen können. Sie können das Video an einem bestimmten Punkt starten oder die Player-Steuerelemente ausblenden.
• Nachdem Sie Ihre Optionen ausgewählt haben, klicken Sie auf Kopieren in der unteren rechten Ecke des Popups.

• Vollständig! Ihr YouTube-Video kann eingebettet werden.

Einen Tweet einbetten

Wenn Sie einen Tweet auf Ihren Website-Seiten oder Ihrem Blog einbetten, können Sie Engagement für Ihr Twitter-Profil generieren, ohne sich auf Ihre Twitter-Follower verlassen zu müssen. Website-Besucher können auch mit Ihren Twitter-Inhalten interagieren.

Gehen Sie wie folgt vor, um einen Twitter-Beitrag einzubetten:

• Navigieren Sie in einem Desktop-Browser zu dem Beitrag, den Sie einbetten möchten.
• Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Beitrags.
• Ein Dropdown-Menü wird angezeigt. Klicken Fixierter Tweet.

• Twitter führt Sie zu einer externen Seite auf veröffentlichen.twitter.com, wo Sie das Aussehen des Tweets weiter anpassen können, bevor Sie ihn in Ihre Website einbetten. Sie können ihn beispielsweise in den Dunkelmodus versetzen und die Anzeigesprache des Tweets ändern.

• Klicken Sie nach der Anpassung auf Aktualisieren.
• Klicken Code kopieren.
• Fertig! Der Tweet kann nun in Ihre Website eingebettet werden.

Es gibt noch eine andere Möglichkeit, einen Einbettungscode für Twitter zu generieren. Gehe zu veröffentlichen.twitter.com und geben Sie die URL des Beitrags ein, den Sie einbetten möchten. Twitter generiert dann den Einbettungscode, und Sie können ihn mit demselben Verfahren wie bei der letzten Methode anpassen.

Einbetten eines Pinterest-Beitrags

Das Einbetten eines Pinterest-Beitrags kann Website-Benutzer zurück zu Ihrem Pinterest-Profil führen und Ihnen helfen, Ihre Pinterest-Follower zu vergrößern. Um zu beginnen, gehen Sie wie folgt vor:

• Navigieren Sie zu dem Pinterest-Beitrag, den Sie einbetten möchten.
• Klicken Sie auf die drei Punkte direkt neben dem Bild (oder unter dem Bild, wenn Sie die mobile Website verwenden).
• Klicken Sie im Dropdown-Menü auf Pin-Einbettungscode abrufen.

• Ein Popup mit dem Einbettungscode wird angezeigt. Sie haben die Möglichkeit, einen kleinen, mittleren, großen oder extra großen eingebetteten Pin zu erstellen.

• Sobald Sie die Größe angepasst haben, markieren Sie den Code und klicken Sie auf Befehl + C oder STRG + C.
• Fertig! Dein Pin kann nun eingebettet werden.

Einbetten einer SlideShare-Präsentation

Während SlideShare-Präsentationen heutzutage nicht mehr so ​​beliebt sind, können sie dennoch ein praktisches Multimedia-Tool sein, um Blog-Posts und -Seiten aufzupeppen. So betten Sie eine SlideShare-Präsentation ein:

• Gehen Sie zu der SlideShare-Präsentation, die Sie einbetten möchten.
• Klicken Teilen unter der Präsentation.
• Im selben Fenster, in dem die Präsentation angezeigt wird, sehen Sie die Option, sie über soziale Kanäle zu teilen. Darunter befindet sich der Einbettungscode.

• Wählen Sie die Größe des Einbettungsfensters und die Folie aus, auf der die Präsentation beginnen soll.
• Markieren Sie den Einbettungscode und klicken Sie auf Befehl + C oder STRG + C.
• Bereit! Sie können die SlideShare-Präsentation jetzt in eine Webseite oder einen Beitrag einbetten.

Einbetten einer externen Webseite

Sie möchten keinen Social Post einbetten, sondern eine Webseite? Sie können eine externe Webseite einbetten, indem Sie das iframe HTML-Tag.

Alle Einbettungscodes, einschließlich der Codes für soziale Websites, verwenden iframe-Tags. So sehen sie aus:

 
<frame src="https://blog.hubspot.com/marketing/url" title="description" ></iframe>

Sie können dieselben Tags verwenden, um eine externe Webseite einzubetten. Hier ist wie:

• Navigieren Sie zu der Webseite, die Sie in Ihre Website einbetten möchten.
• Öffnen Sie die Notizblock-App auf Ihrem Computer. Fügen Sie den folgenden Code darin ein:

 
<iframe src="https://blog.hubspot.com/marketing/url" title="description" width=”” height=””></iframe>

• Kehren Sie zur Webseite zurück und kopieren Sie die URL.
• Fügen Sie die gesamte URL dort ein, wo sie steht URL in Ihrem iframe-Code. Nicht vergessen einzuschließen https:// am Anfang Ihrer URL und setzen Sie den Link in die Anführungszeichen. So sollte Ihr Code aussehen:

 
<iframe src="https://example.com/embedded-page" title="Embedded Page Title" width=”” height=””></iframe>

• Ändern Sie bei Bedarf die Breite und Höhe des Rahmens.

 
<iframe src="https://example.com/embedded-page" title="Website Page Title" width=”750” height=”500”></iframe>

• Kopieren Sie die gesamte Codezeile. Danach kann die Webseite in Ihre Website eingebettet werden.

2. Greifen Sie auf Ihr Content-Management-System zu und fügen Sie den Einbettungscode in Ihren HTML-Viewer ein.

Obwohl jedes CMS anders ist, können Sie den HTML-Viewer wahrscheinlich mit ähnlichen Schritten finden. Wir gehen darauf ein, wie Sie dies in CMS Hub und WordPress tun können.

CMS-Hub

In CMS Hub müssen Sie Ihre Einbettungsinhalte nicht mit dem HTML-Editor hinzufügen (obwohl Sie die Möglichkeit dazu haben). Hier ist wie:

• Navigieren Sie in Ihrem HubSpot-Dashboard zu Marketing > Webseite > Blog. Wenn Sie den Code zu einer Website-Seite hinzufügen möchten, navigieren Sie zu Marketing > Webseite > Website-Seiten.

• Suchen Sie den Beitrag oder die Seite, zu der Sie den Einbettungscode hinzufügen möchten. Bewegen Sie den Mauszeiger darüber und klicken Sie dann Bearbeiten.

• Klicken Sie in das Modul, in dem Sie den Einbettungscode hinzufügen möchten. Oben auf dem Bildschirm wird eine Optionsleiste angezeigt. Klicken Sie auf der rechten Seite auf Einfügung.
• Wählen Einbetten aus dem Dropdown-Menü.

• Ein Popup wird angezeigt. Fügen Sie den iframe-Code in die Textleiste ein.

• Klicken Einfügung.
• Fertig! Sie können die Breite und Höhe des eingebetteten Inhalts bearbeiten, um ihn weiter anzupassen.

Um auf den HTML-Editor zuzugreifen, führen Sie die Schritte 1 bis 3 oben aus. Klicken Sie in der oberen Optionsleiste auf Fortschrittlich > Quellcode. Sie können Ihren Einbettungscode dann manuell einfügen. Beachten Sie, dass das Endergebnis das gleiche ist.

WordPress

Um einen Einbettungscode in Ihre WordPress-Website einzufügen, führen Sie die folgenden Schritte aus:

• Greifen Sie auf Ihren Admin-Bereich zu und gehen Sie zu entweder Seiten oder Beiträge.
• Klicken Sie auf den Titel des Beitrags, dem Sie den Einbettungscode hinzufügen möchten. Diese Aktion führt Sie zum Post-Editor.
• Drücke den Text Registerkarte in der oberen rechten Ecke des Texteditors.

• Fügen Sie Ihren Einbettungscode dort ein, wo das Modul angezeigt werden soll.

3. Fertig! Sie haben Inhalte auf Ihrer Website oder Ihrem Blog eingebettet.

Sobald Sie die Seite neu laden, wird Ihr eingebetteter sozialer Beitrag angezeigt.

Fügen Sie eingebettete Inhalte hinzu, um das Benutzerengagement zu erhöhen

Durch das Einbetten externer Inhalte in Ihre Seiten und Beiträge können Sie das Engagement auf Ihrer Website erhöhen und Ihre Website-Besucher dazu bringen, mit den Inhalten zu interagieren, die Sie in sozialen Medien veröffentlichen. Das Beste daran ist, dass es einfach zu tun ist – generieren Sie einfach den Einbettungscode, fügen Sie ihn in Ihren HTML-Editor ein und beobachten Sie, wie Ihr Benutzerengagement wächst.

Anmerkung der Redaktion: Dieser Beitrag wurde ursprünglich im September 2013 veröffentlicht und wurde aus Gründen der Vollständigkeit aktualisiert.