Vine-Videos in WordPress einbinden

by ,

Für alle, die es noch nicht mitgekriegt haben: Vine ist DAS neue Ding! Das behauptet zumindest die Putzfrau von Franz-Josef Wagner. Und die muss es schließlich wissen. Vine ist eine Smartphone-App, die es bisher ausschließlich für iOS-Geräte von Apple gibt. Das Android-Betriebssystem soll aber bald folgen. Mit Vine lassen sich relativ einfach kurze Videoclips mit einer maximalen Laufzeit von sechs Sekunden drehen. Anschließend können die Filmschnipsel per Twitter und Facebook mit anderen geteilt werden. Da ich selbst etwas danach suchen musste, kommt hier jetzt eine kurze Anleitung, wie sich Vine-Videos einfach in WordPress einbinden lassen.

Nicht jeder ist bei Twitter unterwegs. Und bei Facebook sind mir bisher noch keine Vine-Videos über den Weg gelaufen. Warum also nicht auch bei WordPress? Für die beliebte Blog-Plattform konnte ich jedoch bislang kein Plugin finden, mit dem sich Vine-Videos einfach und schnell in einen Artikel einbetten lassen. Es gibt jedoch zwei funktionierende Alternativen.

Den ganzen Tweet einbetten

5 Schritte: Bei der ersten Variante wird ein ganzer Tweet eingebettet.

1. Zunächst einmal muss ein Video mit Vine erstellt werden. Dafür braucht es die kostenlose App aus dem App Store und ein iPhone oder einen iPod touch (mit einem iPad mit Kamera funktioniert es auch – allerdings ist das Programm momentan noch ausschließlich für die kleineren Apple-Geräte optimiert).

2. Wurde die App installiert, folgt die Registrierung per E-Mail oder Facebook-Account. Anschließend darf drauflos gefilmt werden.

3. Ist das Video im Kasten, kann es bei Vine, Twitter oder auf Facebook geteilt werden. Wichtig an dieser Stelle ist die Veröffentlichung auf Twitter. Denn von dort holen wir uns im vierten Schnitt den notwendigen Code.

4. Wurde das Video per Twitter veröffentlicht, sucht man einfach den entsprechenden Tweet und wählt dann über den „Mehr“-Button „Tweet einbetten“ aus. Dann sollte ein Code in einer Form wie dieser herauskommen:

[highlight]<blockquote class=“twitter-tweet“><p>S-Bahn (2) <a href=“http://t.co/XH3tE1vX“ title=“http://vine.co/v/b1Hzbmn7x7l“>vine.co/v/b1Hzbmn7x7l</a></p>&mdash; Jörgen Camrath (@uniwave) <a href=“https://twitter.com/uniwave/status/297735804367822848″>February 2, 2013</a></blockquote>
<script async src=“//platform.twitter.com/widgets.js“ charset=“utf-8″></script>[/highlight]

5. Alles markieren, kopieren und in den WordPress-Artikel einfügen, schon kann gespeichert werden. Gefällt es,  kann veröffentlicht werden. Die Möglichkeit, die Größe zu verändern, gibt es hier nicht. Am Ende sollte der eingebettete Tweet ungefähr so aussehen:

 

 

Das war es schon. Klingt einfach? Ist es auch. Aber leider nicht ganz so schön wie die folgende Alternative.

Nur das Video einbetten

5 Schritte: Bei der zweiten Variante fällt der Tweet weg, nur das Video bleibt.

1. Auch hier muss zunächst wieder ein Video mit Vine erstellt werden.

2. Nach Download, Installation und Registrierung darf drauflos gefilmt werden.

3. Ist das Video im Kasten, kann es bei Vine, Twitter oder auf Facebook geteilt werden. Ein Link in dieser Form sollte dann dabei herauskommen: http://vine.co/v/b1Hzbmn7x7l

4. Von diesem Link brauchen wir nur den hinteren Teil, also die Zahlen-Buchstaben-Kombination „b1Hzbmn7x7l“. Sie wird einfach in folgenden Code eingesetzt:

[highlight]<iframe src=“https://vine.co/v/HIER KOMMT DER CODE REIN/card“ height=“614″ width=“614″></iframe>[/highlight]

5. Der komplette Code-Schnipsel wird anschließend einfach in den angelegten WordPress-Artikel eingefügt (iFrames sollten aktiviert sein). Einmal speichern, Vorschau anzeigen und ggf. noch die Größe des Videos ändern – das sind die nächsten Schritte. Dabei sollte jedoch darauf geachtet werden, dass das 1-zu-1-Verhältnis erhalten bleibt. Vine-Filme sind quadratisch, und alles andere sähe komisch aus. Passt alles, dann kann der Artikel veröffentlicht werden, und müsste ungefähr so aussehen:

Das war es auch schon. Zwei Möglichkeiten, die momentan noch etwas umständlich sind. Allerdings macht es uns Vine-Mutter Twitter auch nicht gerade einfach. Mal abwarten, was sich in Zukunft noch so tut. Und bis dahin kommt man mit den beschriebenen Alternativen ja auch ganz gut über die Runden.

Update:

Für die zweite Variante gibt es mittlerweile eine kleine Javascript-Erweiterung. Dafür besucht man zunächst die Seite www.vineit.co. Den blauen Button speichert man dann als Lesezeichen oder zieht ihn einfach mit der Maus per Drag&Drop in die Lesezeichenleiste. Bei einer offenen Seite mit angezeigtem Vine-Video reicht dann ein einfacher Klick auf das Bookmark, und der Embed-Code wird angezeigt und kann kopiert werden. That’s it.

9 comments on “Vine-Videos in WordPress einbinden

  1. Pingback:Twitter & Vine – Sinnvoll für Unternehmen oder Spielerei? | webpixelkonsum

  2. Ralph

    Ich suchte ganz genau nach dieser Möglichkeit.
    Vielen Dank für diesen sehr guten Blogartikel über die Einbindung eines Vine-Videos in WordPress.
    Leider funktioniert bei mir nur die erste Möglichkeit.
    Ist bekannt, ob es eine weitere Möglichkeit der Veröffentlichung in WordPress gegenwärtig exitiert?

    Ralph

    1. joc Post author

      Hallo Ralph,

      bei mir funktioniert das alles ohne Probleme. Ich habe noch eine weitere Möglichkeit unten hinzugefügt. Vielleicht klappt es ja damit?

      Viele Grüße

  3. barbara

    Hallo,
    ich habe einen wordpress.com blog. Wenn ich nach Deiner Anleitung vorgehen, erscheint in dem Artikel kein Film sondern nur der code, bzw. der link. ich habe versucht, iframe zu aktivieren, finde es aber nicht. Kann es sein, dass das nur mit einem kostenpflichtigen upgrade möglich ist? Würde so gerne Filme posten, ohne diese ganzen Zeichen und die Schrift drumrum wie bei youtube.
    Hoffe, Du kannst mir weiterhelfen!
    Liebe Grüße barbara

    1. joc Post author

      Hallo barbara,
      was für einen Blog hast du denn? Ist der bei WordPress gehostet? Dann kann es in der Tat sein, dass du den Code nicht einfach übernehmen kannst. Es kann aber auch sein, dass du einfach nur in den „HTML“-Modus wechseln musst. Also falls es den dort gibt. Das ist eine spezielle Ansicht, in der die Formatierungen angezeigt werden. Vielleicht hilft dir das?
      Viele Grüße

  4. Pingback:Vine in der politischen Medienbildungsarbeit | Projektwiese

  5. Pingback:Wer arbeiten kann, darf auch entspannen | meyola

  6. Pingback:10 Beispiele für 6 Sekunden-Videos in der Bildung! Mit der Vine-App! | SicherDeinWeb

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.