So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

So fügen Sie Ihrer Website HTML-Einbettungscodes hinzu [Quick Tip]

Wenn Sie die Inhalte anderer Leute aus sozialen Medien kuratieren oder einfach Ihre eigenen visuellen Social-Media-Inhalte für Ihre gesamte Content-Strategie besser nutzen möchten, müssen Sie wissen, wie Sie HTML-Code in Ihren Blog oder Ihre Website einbetten.

Aber warten Sie einen Moment … bevor wir uns mit den Einzelheiten dieses Tipps befassen: Was zum Teufel bedeutet „einbetten“? Und was ist HTML? Wenn Sie nicht wissen, wie man programmiert, machen Sie sich keine Sorgen: Das Einbetten externer Inhalte ist ganz einfach. Nehmen wir uns einen Moment Zeit, um die Grundlagen aufzuschlüsseln.

Was bedeutet Einbetten?

Unter Einbetten versteht man das Einbinden externer Inhalte in eine andere Website oder Seite. Sie betten etwas ein, indem 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 angezeigt.

Eingebettete Inhalte werden 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 „Back-End“ Ihres Blog-Beitrags befinden. Dort fügen Sie Ihren Einbettungscode hinzu.

Die meisten sozialen und Multimedia-Websites bieten die Möglichkeit, direkt für jeden einzelnen Beitrag einen Einbettungscode zu generieren. Hier ist ein Beispiel für einen Einbettungscode für ein HubSpot-Video auf YouTube:

 

Und hier ist das eingebettete Ergebnis.

Möchten Sie dasselbe für Ihre Blog-Beiträge und -Seiten tun? Sehen wir uns an, wie Sie einen Einbettungscode für große soziale Websites generieren können.

Im Folgenden gehen wir auf diese Schritte für jede Plattform ausführlicher ein. 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. Abgeschlossen! Sie haben Inhalte auf Ihrer Website oder Ihrem Blog eingebettet.

Lassen Sie uns in jeden Schritt eintauchen.

1. Generieren Sie den Einbettungscode.

Bevor Sie externe Inhalte einbetten, müssen Sie zunächst einen Einbettungscode für den Beitrag oder die Seite generieren, die Sie auf Ihrer Website einbetten möchten.

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

Einbetten a Facebook Post

Einbetten Facebook Um zu veröffentlichen, gehen Sie wie folgt vor:

  • Navigieren Sie zu Facebook in Ihrem Desktop-Browser und navigieren Sie zu dem Beitrag, 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.

Code-Schaltfläche eingebettet in a Facebook Post

  • Es erscheint ein Popup-Fenster, in dem Sie die Möglichkeit haben, den gesamten Beitrag einzuschließen und auf erweiterte Einstellungen zuzugreifen. Für Einsteiger empfehlen wir, die Optionen so zu belassen und einfach anzuklicken Code kopieren.

Fügen Sie Codeoptionen in a ein Facebook Post

  • Abgeschlossen! Sie haben Ihren Einbettungscode.

Betten Sie einen Instagram-Beitrag ein

Möchten Sie einen Instagram-Beitrag einbetten? Der Vorgang ist ähnlich Facebook’S. Bitte 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.
  • Es erscheint ein Popup-Fenster mit mehreren Optionen. Klicken Einbettendie vorletzte Option.

Instagram-Beitrag einbetten

  • Es erscheint ein Popup-Fenster mit Ihrem Einbettungscode. Sie haben die Möglichkeit, den Titel ein- oder auszuschließen.
  • Wenn Sie mit der Anpassung Ihrer Optionen fertig sind, klicken Sie auf Kopieren Sie den eingebetteten Code.

Einbettungscode-Popup auf Instagram kopieren

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

Betten Sie ein YouTube-Video ein

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

Gehen Sie dazu folgendermaßen vor:

  • Navigieren Sie zu dem Video, das Sie auf Ihrer Website einbetten möchten.
  • Klicken Sie unter dem Video neben der Position mit den „Gefällt mir“-Angaben Aktie.

Schaltfläche „Teilen“ unter einem YouTube-Video

  • Es erscheint ein Popup-Fenster mit mehreren Optionen, einschließlich der Möglichkeit, den Beitrag mit anderen sozialen Netzwerken zu teilen. Klicken Einbetten.

Freigabeoptionen für ein YouTube-Video

  • 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 Popup-Fensters.

Für ein YouTube-Video generierter Einbettungscode

  • Vollständig! Ihr YouTube-Video ist zum Einbetten bereit.

Betten Sie einen Tweet ein

Wenn Sie einen Tweet in die Seiten Ihrer Website oder Ihres Blogs einbetten, können Sie Engagement für Sie generieren Twitter Profil, ohne von Ihnen abhängig zu sein Twitter Anhänger. Website-Besucher können mit Ihnen interagieren Twitter auch inhaltlich.

Einbetten Twitter Um zu veröffentlichen, gehen Sie wie folgt vor:

  • 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.
  • Es erscheint ein Dropdown-Menü. Klicken Fixierter Tweet.

Schaltfläche „Tweet einbetten“ aktiviert Twitter

  • 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 beispielsweise den Dunkelmodus aktivieren und die Anzeigesprache des Tweets ändern.

Optionen zum Einfügen eines Tweets

  • Sobald Sie es angepasst haben, klicken Sie auf Aktualisieren.
  • Klicken Code kopieren.
  • Abgeschlossen! Der Tweet kann nun auf Ihrer Website eingebettet werden.

Es gibt eine andere Möglichkeit, einen Einbettungscode zu generieren Twitter. Gehen Sie zu „publish.twitter.com“ und geben Sie die URL des Beitrags ein, den Sie einbetten möchten. Twitter Anschließend wird der Einbettungscode generiert, den Sie mit dem gleichen Verfahren wie bei der letzten Methode anpassen können.

Einbetten a Pinterest Post

Einbetten a Pinterest Der Beitrag kann Website-Benutzer zu Ihrer Website führen Pinterest Profil und helfen Ihnen, Ihr Profil zu erweitern Pinterest folgende. Gehen Sie zunächst wie folgt vor:

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

Schaltfläche „Pin-Einbettungscode abrufen“ auf einem Pin

  • Es erscheint ein Popup-Fenster mit dem Einbettungscode. Sie haben die Möglichkeit, einen kleinen, mittleren, großen oder extragroßen eingebetteten Pin zu erstellen.

Für einen Pin generierter Einbettungscode in Pinterest

  • Nachdem Sie die Größe angepasst haben, markieren Sie den Code und klicken Sie Befehl + C entweder STRG+C.
  • Abgeschlossen! Ihr Pin kann nun eingefügt werden.

Betten Sie eine SlideShare-Präsentation ein

Obwohl SlideShare-Präsentationen heutzutage nicht mehr so ​​beliebt sind, können sie dennoch ein nützliches Multimedia-Tool sein, um Blog-Beiträge und -Seiten aufzupeppen. So betten Sie eine SlideShare-Präsentation ein:

  • Gehen Sie zu der SlideShare-Präsentation, die Sie einbetten möchten.
  • Klicken Aktie unter der Präsentation.
  • Im selben Fenster, in dem die Präsentation erscheint, sehen Sie die Möglichkeit, sie über soziale Netzwerke zu teilen. Der Einbettungscode befindet sich darunter.

Teilen Sie SlideShare-Optionen mit einem Einbettungscode

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

Betten Sie eine externe Webseite ein

Möchten Sie keine soziale Publikation, sondern eine Webseite einfügen? Sie können eine externe Webseite mit einbetten iframe HTML-Tag.

Alle Einbettungscodes, auch die für soziale Websites, verwenden Iframe-Tags. So sehen sie aus:

 

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

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

  • Gehen Sie zurück zur Webseite und kopieren Sie die URL.
  • Fügen Sie die vollständige URL an der entsprechenden Stelle in Ihrem Iframe-Code ein. Vergessen Sie nicht, es am Anfang Ihrer URL einzufügen und den Link in Anführungszeichen zu setzen. So sollte Ihr Code aussehen:
 

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

  • Kopieren Sie die gesamte Codezeile. Anschließend ist die Webseite bereit, in Ihre Website integriert zu 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-Center

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

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

Blog-Schaltflächen und Website-Seiten im HubSpot CMS

  • 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 Bearbeiten.

cms-hub-website-page-list

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

Schaltfläche zum Einbetten in HubSpot CMS

  • Es erscheint ein Popup-Fenster. Fügen Sie den Iframe-Code in die Textleiste ein.

Eingebettetes Popup in HubSpot CMS einfügen

  • Klicken Einfügen.
  • Abgeschlossen! 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 oben genannten Schritte 1–3 aus. Klicken Sie in der oberen Optionsleiste auf Fortschrittlich > Quellcode. Anschließend können Sie Ihren Einbettungscode manuell einfügen. Bitte beachten Sie, dass das Endergebnis dasselbe ist.

WordPress

Um einen Einbettungscode auf Ihrer WordPress-Website einzufügen, gehen Sie folgendermaßen vor:

  • Greifen Sie auf Ihren Administrationsbereich zu und gehen Sie zu Seiten entweder Veröffentlichungen.
  • Klicken Sie auf den Titel des Beitrags, dem Sie den Einbettungscode hinzufügen möchten. Mit dieser Aktion gelangen Sie zum Post-Editor.
  • Klick auf das Text Klicken Sie auf die Registerkarte in der oberen rechten Ecke des Texteditors.

WordPress-Texteditor

  • 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 Social-Media-Beitrag angezeigt.

Fügen Sie eingebettete Inhalte hinzu, um die Benutzerinteraktion zu steigern

Durch die Einbindung externer Inhalte in Ihre Seiten und Beiträge können Sie das Engagement auf Ihrer Website steigern und Ihre Website-Besucher dazu bringen, mit den Inhalten zu interagieren, die Sie in sozialen Medien veröffentlichen. Das Beste daran ist, dass es ganz einfach geht: Generieren Sie einfach den Einbettungscode, fügen Sie ihn in Ihren HTML-Editor ein und beobachten Sie, wie die Benutzerinteraktion zunimmt.

Neuer Aufruf zum Handeln

Neuer Aufruf zum Handeln