HTML lernen (2/5): Medien einbetten, Standard-URL und IDs

WordPress wandelt mittlerweile vielen Medien Links, von sozialen Netzwerken, ganz automatisch in Beiträge um. Dabei ist es allerdings wichtig, dass die richtige URL eingebettet wird. In diesem Video lernst du die Standard URLs der soziale Netzwerke kennen und lernst URLs zu lesen (Domain, Parameter und IDs).

Medien einbetten, Standard-URL und IDs – Video

Wie oben beschrieben wandelt WordPress einige Social Links bzw. deren URL automatisch in kleine Beiträge um, innerhalb deines Posts.

Dies funktioniert z.b. bei YouTube, Facebook, Instagram aber auch Twitter. Andere Inhalte, z.b. Google Maps, musst du mit HTML einbetten (Iframe). Wie solche Iframes funktionieren, lernst du im nächsten Video. Starten wir mit den Grundlagen, dem erkennen von URLs für das perfekte einbetten.

  1. URLs verstehen / lesen lernen
  2. Standards kennen (YouTube, Instagram, etc.)

[membership level=“0,-1″]

Du musst eingeloggt sein, um diesen Inhalt zu sehen!
Lukinski SEO Masterclass: Einloggen oder jetzt starten >
[pmpro_login][/membership]

[membership level=“1,2,3,4,5,6,7,8,9,10″]

[/membership]

Parameter: YouTube, Facebook, Instagram & Co.

Dabei gibt es ein paar Feinheiten, die man direkt zu Beginn verstehen sollte, z.b. die Zusammensetzung aus Domain, ID und weitere Parameter.

  • YouTube Video URL: https://youtube.com/watch?v=_FfS39LPMBc
  • Besteht aus:
    1) Domain: https://youtube.com/

2) Parameter: watch?v=

3) ID: _FfS39LPMBc

Beispiel Fehler: Zusätzlicher Zeit Parameter in der URL

[membership level=“0″]

Du musst eingeloggt sein, um diesen Inhalt zu sehen!
Lukinski SEO Masterclass: Einloggen oder jetzt starten >
[pmpro_login][/membership]

[membership level=“-1″]

Für diesen Artikel brauchst du ein Upgrade! Jetzt Paket hinzufügen >

Hey Gringo! Kauf, tu es. Kauf das Paket! Jetzt sogar günstiger, wirklich, super günstig. Viel lernen, viel Erfolg, tu es, kauf es.

 
Für diesen Artikel brauchst du ein Upgrade! Jetzt Paket hinzufügen >
[/membership]

[membership level=“4,7,8″]

Für bestimmte Filter ergänzen Plattformen ihre URL durch weitere Parameter. Z.b. ein Parameter für die Sprache oder auch ein Parameter für den Startzeitpunkt des Videos, wie gleich im Beispiel zu sehen &t=100s . Diese hängen sich an die Standard URL.

Wird die URL nicht korrekt kopiert wird, können daraus Fehler entstehen. Ein Klassiker sind z.b. YouTube-Videos, die mitten im VIdeo starten, statt am Anfang. Das passiert z.b., wenn du dir ein Video anschaust und es später noch einmal öffnest. YouTube springt dann automatisch zu der Stelle, an der du aufgehört hast. Deshalb siehst du im Browser die übliche Standard URL plus Parameter.

Wenn du die URL jetzt einfach nur kopierst, startet dein eingebettetes YouTube Video nicht  zu Beginn.

URL Aufbau

Erinnere dich jetzt an den Standardaufbau, den wir oben besprochen haben:

  • YouTube Video URL: https://youtube.com/watch?v=_FfS39LPMBc

1) Domain: https://youtube.com/
2) Parameter: watch?v=
3) ID: _FfS39LPMBc

  • Neu ist jetzt der Zeitparameter am Ende
  • YouTube Video URL: https://youtube.com/watch?v=_FfS39LPMBc&t=100s
    1) Domain: https://youtube.com/
    2) Parameter: watch?v=
    3) ID: _FfS39LPMBc
    Neu 4) Parameter für Zeit: &t=100s

Die URL enthält also zusätzlich folgenden Parameter für die Zeit &t=100s . Diesen darfst nicht mit kopieren, außer du willst, dass das Video genau an dieser Stelle startet.

Dies ist ein kleines Beispiel für die Zusammenstellung von Domain, Parameter und IDs. So wie die das 1×1 im HTML /// LINK für WordPress können solltest, beschäftige dich unbedingt auch mit der Zusammenstellung von URLs. Es sind nicht viele, die du kennen musst. Hauptsächlich geht es um die großen, sozialen Netzwerke.

ID identifizieren, egal wo

So würdest du jetzt, mit deinem neuen Wissen, auch direkt verstehen, wie sich eine WordPress URL zusammen stellt:

  • WordPress URL: https://website.com/?p=123

Du siehst nun, dass die vorliegende URL aus drei Teilen besteht: Der Domain, dem Parameter und der ID. Du weißt also auch, wenn du auf diesen Link klickst, wirst du auf eine einzelne Seite mit der Post-ID 123 gelangen.

Social Media Standard URLs

Auch Social Networks funktionieren nach diesem Prinzip. Hier sind die Standards für Einbettungen (Medien) und Links (Kanäle).

So sehen die einzelnen IDs der sozialen Netzwerke aus:

YouTube

  • YouTube Video: https://youtube.com/watch?v=ID
    Beispiel: https://youtube.com/watch?v=_FfS39LPMBc
  • YouTube Kanal:  https://youtube.com/channel/ID
    Beispiel: https://youtube.com/channel/UCzOLH93prKp0eKVUaQVK_Tw

Instagram

  • Instagram Post: https://instagram.com/p/ID
    Beispiel: https://instagram.com/p/B_Z9TlooALB
  • Instagram Kanal: https://instagram.com/NAME
    Beispiel: https://instagram.com/dior

Facebook

  • Facebook Post: https://facebook.com/NAME/photos/pcb.ID
    Beispiel: https://facebook.com/Dior/photos/pcb.2935393773181935/2935387996515846/?type=3&theater
  • Facebook Video: https://facebook.com/NAME/videos/ID
    Beispiel: https://facebook.com/Dior/videos/233564217850875
  • Facebook Kanal: https://facebook.com/NAME
    Beispiel: https://facebook.com/Dior

Wichtig: Wenn du den vollständigen Beitrag einbetten willst, musst du das von Facebook angebotene Iframe verwenden. Einzelne Medien (Foto und Video) gehen automatisch über das Einfügen der URL.

Tipp! Wenn du ein Facebook Foto kopierst, sieht die URL so aus: https://www.facebook.com/Dior/photos/pcb.2935393773181935/2935387996515846/?type=3&theater – den Parameter “ &theater “ kannst du einfach mit in WordPress kopieren.

Twitter

  • Twitter Post: https://twitter.com/NAME/status/ID
    Beispiel: https://twitter.com/Dior/status/1250182307828334595
  • Twitter Kanal: https://twitter.com/NAME
    Beispiel: https://twitter.com/dior

Wichtig: Teilen von Tweets im Stream funktionieren wie bei Facebook über das Menü (rechts oben im Tweet und „Einbetten“, dann URL kopieren). Schneller geht es so, wie du im Video siehst, klicke den Tweet an, daraufhin öffnet sich der Tweet einzeln, kopiere jetzt einfach die URL im Browser.

[/membership]

0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.