Posts mit dem Label Media Newsroom werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Media Newsroom werden angezeigt. Alle Posts anzeigen

Donnerstag, 7. Dezember 2017

Twitter-Tweets in eine Webseite einbauen

Die neuesten Tweets eines Twitternutzers oder Twitterkontos lassen sich ganz einfach auf der Homepage, in einen Blogartikel oder auf jede andere Webseite einbauen. Mit ein paar Klicks im neuen Twitter-Konfigurator lässt sich der entsprechende kleine Code-Schnippsel (bei Twitter genannt Widget, von manchen auch als Plugin bezeichnet) generieren und anschließend einbauen. Ruft ein Nutzer die Seite dann mit seinem Browser auf, sieht er an der gewählten Stelle die neuesten Tweets in einer Art „Twitter-Box“. Eine solche Twitter-Box kann man mit Tweets des eigenen Twitterkontos konfigurieren und integrieren („embedden“), mit denen eines anderen öffentlichen Twitter-Kontos, mit Tweets, die man mit „Gefällt mir“ markiert hat, mit Tweets einer Liste oder Sammlung oder mit Tweets als Ergebnis einer vorkonfigurierten Suche. Da Twitter das Konfigurierungsverfahren und die Nutzeroberfläche gegenüber dem alten Twitter-Widget-Konfigurator etwas verändert hat, hier nun eine aktualisierte Anleitung.
"Twitter-Box", wie sie auch auf meiner Portalseite tinto.de
erscheint, um dort meine neuesten Tweets anzuzeigen.
Die Möglichkeit, eine Twitter-Box mit Tweets in eine Webseite einzubinden, ist nicht neu, aber der Konfigurator für den Twitter-Widget-Code ist nicht so leicht zu finden und Twitter hat die Vorgehensweise gerade wieder etwas verändert.

So generieren Sie Ihren Widget-Code - eine Anleitung

  1. Gehen Sie auf die Twitter-Homepage
  2. Melden Sie sich mit Ihrem Nutzernamen und Passwort an.

    Wenn Sie noch kein Twitter-Nutzerkonto (Account) haben, müssen Sie sich zuerst registrieren und sollten die normalen Twitter-Funktionen ausprobieren und kennenlernen.
  3. Klicken Sie auf Ihr Porträtbild in der Symbolleiste ganz oben rechts und wählen Sie in der Dropdown-Liste Einstellungen und Datenschutz

    Sie landen auf der Seite Account. 
  4. Wählen Sie auf der Seite Account in der Navigation auf der linken Seite Widgets (ist ziemlich weit unten zu finden). 
    Sie landen auf der Seite Widget
  5. Klicken Sie auf der Seite Widget oben rechts auf Neu erstellen.


    Nun zeigt sich ein Dropdown-Menü.
    Das bedeuten die Menüpunkte des Dropdown-Menüs:
    • Profil
      Die Twitter-Box soll mit Tweets (m)eines öffentlichen Accounts gefüllt werden.
    • Gefällt mir
      In der Twitter-Box sollen Tweets, die Sie als Favoriten gekennzeichnet haben, angezeigt werden.
    • Liste
      In der Twitter-Box sollen Tweets einer Liste, die Sie zuvor angelegt und der Sie öffentliche Twitter-Accounts zugeordnet haben, angezeigt werden.
    • Sammlung
      Die Twitter-Box soll Tweets einer Sammlung, die Sie zuvor angelegt haben, anzeigen.
    • Suchen
      In der Twitter-Box sollen Tweets, die das Ergebnis einer Suche sind, angezeigt werden, beispielsweise solche. die mit einem definierten Hashtag-Begriff #garten, gekennzeichnet wurden.
  6. In diesem Konfigurationsbeispiel sollen die Tweets des eigenen Twitter-Accounts in einer Twitter-Box auf der eigenen Portalseite angezeigt werden (siehe Bild oben), wählen Sie also im Dropdown-Menü den Menüpunkt Profil.
    Ein neues Fenster öffnet sich und sie werden gefragt, was Sie (in eine Webseite) einbetten möchten ("What would you like to embed"). Darunter befindet sich ein Eingabefeld.
  7. Geben Sie für unser Beispiel in das Eingabefeld die URL Ihres Twitter-Accounts ein, beispielsweise https://twitter.com/eva4tinto (eva4tinto ersetzen Sie durch Ihren eigenen Nutzernamen).

    Notiz: Wenn Sie vorher in das leere Eingabefeld klicken, werden Ihnen auch alle anderen Möglichkeiten mit Beispielen gezeigt - im Prinzip noch einmal dieselbe Auswahl wie vorher im Dropdown-Menü, nur auf Entwickler/Programmierer zugeschnitten.
  8. Klicken Sie nach Ihrer Eingabe innerhalb des Eingabefeld auf der rechten Seite auf den Pfeil nach rechts.

    Die Seite scrollt weiter nach unten.

  9. Sie werden gefragt, ob Sie eine Twitter-Box (Embedded Timeline) oder Twitter-Schaltflächen integrieren möchten (Twitter Buttons, die im nächsten Schritt zur Auswahl stünden: Follow Button, Mention Button).
  10. Wählen Sie für unseren Zweck Embedded Timeline.
    Die Seite schiebt sich weiter nach unten. In einem eingerahmten Bereich finden Sie den Code-Schnippsel, den Sie kopieren und in Ihre Webseite an der gewünschten Stelle einfügen müssen.



    Wer Details der Twitter-Box anpassen möchte, klickt auf den Link set customization options in der Überschrift. Es öffnet sich ein weiterer Konfigurationsbereich, in welchem man Höhe, Breite, helles oder dunkles Design sowie Linkfarbe und Sprache (um)definieren kann.

Anwendungsmöglichkeiten für Twitter-Boxen

Ich habe eine Twitter-Box mit meinen neuesten Tweets auf meiner tinto.de-Portalseite eingebaut (und zusätzlich auch eine automatische Liste meiner neuesten Blogartikel), damit diese Einstiegsseite nicht immer gleich aussieht, sondern bei jedem Besuch einen Überblick über alle meine neuen Tweets (und Blogartikel) enthält.

Die gleiche Twitter-Box wie auf der Portalseite habe ich auch im Media Newsroom von evaschumann.biz eingebunden, wo meine Besucher und ich die meisten meiner Social Media Aktivitäten auf einen Blick erfassen können - noch nicht dabei sind lediglich Pinterest, Instagram und YoutTube.

Wer mit seinen Seitenbesuchern teilen möchte, was er/sie auf Twitter beachtenswert findet, konfiguriert die Twitter-Box so, dass sie seine/ihre Gefällt-mir-Tweets anzeigt.

Wer zeigen möchte, was zu einem Thema aktuell im Gespräch bei Twitter ist, packt interessante Twitter-Accounts in eine Liste und definiert die Twitter-Box so, dass die neuesten Tweets dieser Liste angezeigt werden, oder er definiert eine Suche, deren Ergebnisse in der Twitterbox erscheinen.

Was bei Ihnen Sinn macht, hängt von Ihrem Informations- und Kommunikationskonzept ab.

Anzeige


Ich verwende die verschiedenen sozialen Netzwerke zu unterschiedlichen Zwecken:
  • Twitter nutze ich einerseits zur Informationsbeschaffung: Dort sind neue Nachrichten als erstes zu finden. In meiner eigenen Twitter-Timeline stelle ich vorwiegend neue Blogartikel und Informationswebseiten aus meinem eigenen "Internetreich" vor. Gelegentlich teile ich auch besonders Interessantes aus meinem Netzwerk, wenn diese Tweets nicht nur meine Twitter-Follower, sondern auch meine Webseiten-/Blogbesucher interessieren könnten.
  • Zum Diskutieren bevorzuge ich die Kommentarfunktionen von Blogs sowie die Kommunikationsmöglichkeiten bei Facebook und Googleplus.
  • Bilder schaue und teile ich am liebsten bei Instagram und bei Pinterest, Videos bei YouTube.

Bitte nutzt/nutzen Sie die Kommentarfunktion und fügt eure/Ihre Erfahrungen hinzu. Wenn der Blogbeitrag euch/Sie inspiriert hat, abonniert/abonnieren Sie den Feed oder per E-Mail.

Das könnte Sie auch interessieren:

Sie suchen Werbeplatz in diesem Blog oder eine Technische Redakteurin/Autorin/Texterin zu Software-, Informatik- oder Internetthemen für Ihre Website, ein Buchprojekt, ein Kundenmagazin o. Ä.? Schreiben Sie mir!

Samstag, 17. Juni 2017

Letzte Blogartikel, Foren- und Social-Media-Beiträge als Linklisten in eine Website einbinden

Damit die Einstiegseite einer Website nicht immer gleich aussieht und gleiche Inhalte zeigt, lassen sich die neuesten Beiträge aus Blogs, Foren und/oder Social-Media-Seiten als automatisch aktuelle Linklisten einbinden. Man kann auf die Art auch eine Nachrichtenseite ((Social) Media Newsroom) basteln, auf der man alle neuen Veröffentlichungen der verschiedenen Kommunikationskanäle wie Blogs, Foren, Twitter-Accounts sowie von Social-Media-Seiten aufführt. Von diesem Nachrichtenüberblick oder einer speziellen Nachrichtenseite profitieren nicht nur Kunden, Geschäftspartner oder andere Seitenbesucher, sondern auch man selbst beziehungsweise die Mitarbeiter sehen auf einen Blick, was alles in letzter Zeit online publiziert wurde. In diesem Blogbeitrag wird beschrieben, wie man mithilfe von FeedBurner automatisch eine Liste der letzten Blogbeiträge erstellen und einbinden kann.

Wie man die letzten Tweets mithilfe eines Twitter-Widgets als Twitterbox auf einer Webseite einbindet, wird bei Twitter auf Website einbinden erläutert. Für Foren von Forum-Romanum sowie für Facebook-Seiten gibt es ebenfalls einfache Lösungen. Mit Hilfe eines Werkzeuges kann man auch den eigenen Unternehmensblog oder Themenblog auslesen und eine Liste aus verlinkten Überschriften mit dem jeweiligen Textanfang automatisch generieren und auf einer beliebigen Website einbauen, ohne dass man selbst anspruchsvoll programmieren können muss. Wie beim Twitter-Widget muss man nur ein bisschen Code in den Quelltext der Webseite, auf der die Liste eingespielt werden soll, einfügen.

Ein Schnipsel Code bewirkt, dass immer die letzten Beiträge meines Blogs im gelb markierten Bereich auf der Portalseite von tinto.de aufgeführt werden.
Das Werkzeug meiner Wahl, mit dessen Hilfe ein Feed "gebrannt" und auch der Code zum Publizieren – in diesem Fall ist es JavaScript - generiert wird, ist der FeedBurner von Google, der einen Dienst namens BuzzBoost enthält. Der Haken: Offiziell hat Google die Programmierschnittstelle (Application Access Interface, API) seines kostenlosen FeedBurners schon 2012 eingestellt, bietet keinen Support mehr und unterstützt auch nicht mehr Adsense for Feeds, aber in der Praxis funktioniert der FeedBurner bei mir für die unten beschriebene Einbindungsfunktion bis heute einwandfrei. Ich habe ihn für Wordpress-, Blogger-, Tumblr-Blogs sowie für Googleplus-Seiten im Einsatz. Die Anwendung ist einfach und ein Social Media Newsroom ist damit schnell erstellt (Beispiel Social Media Newsroom von evaschumann.biz). Es gibt zwar keinerlei Angaben, wie lange Google den Service noch laufen lässt, aber das Problem, dass ein Dienst aus dem Internet verschwinden kann, hat man immer. Notfalls muss man auf Alternativen zum FeedBurner ausweichen – die sind teilweise kostenpflichtig, oft aber auch mit neuen Funktionen ausgestattet, – oder selbst programmieren.

Anzeige


Alternativen zum Google FeedBurner 

Was ist ein Widget?
Ein Widget ist ein Dienst, der auf einem Bildschirm, also einer grafischen Oberfläche, angezeigt wird. Ein Widget ist im Gegensatz zur App kein selbstständiges Programm, sondern ist in eine Umgebung eingebunden. Web-Widgets, wie das Twitter-Widget, kann man in den Quellcode einer Webseite einfügen – an der Stelle wird dann der Dienst, in dem Fall die Twitterbox mit den letzten Tweets, angezeigt.

So sieht beispielsweise der Twitterbox-Widget-Code für meinen Account eva4tinto aus:
<a class="twitter-timeline" href="https://twitter.com/eva4tinto" data-widget-id="344824960914690048">Tweets von @eva4tinto</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Den musste ich aber nicht selbst programmieren, sondern konnte ihn mit Twitter in wenigen Minuten generieren und konfigurieren. -> Zur Anleitung Twitter auf Website einbinden


Was ist FeedBurner?
Ein Feed ist ein Nachrichtenstrom in einem Format, das mit dem passenden Feedreader dargestellt und gelesen werden kann. Manche Feedreader sind im Browser integriert, andere wie Feedly sind eigenständige Programme oder Apps.

Ein Feedburner ist ein Dienst, mit dem ein optimierter Feed erstellt wird. Außerdem lassen sich mit ihm Statistiken abrufen und analysieren, die Feed-Abonnenten verwalten, Feeds per E-Mail verschicken und vieles mehr.

FeedBurner ist ein Google Dienst, mit dem man einen Web-Feed optimieren („brennen“) und unter anderem über das Einbinden woanders bekannt machen kann. Im Grunde wird der Feed in eine Webseite eingebaut. Wie oben erwähnt hat Google allerdings die API, den Support und Adsense for Feed 2012 offiziell eingestellt, doch der FeedBurner und die alten Hilfen sind alle noch online.

Hinweis:
Manche Blogs werden öfter über einen Feedreader gelesen als direkt im Blog. Wer von Werbeeinnahmen seiner Anzeigen im Blog abhängig ist, sollte sich überlegen, ob er/sie den ganzen Feed für Feedreader freigibt oder nur Überschrift und erste Sätze mit Link zum vollständigen Originalartikel.

Anleitung, wie man Blogartikel-, Foren- und Social-Media-Beiträge als Linklisten in eine Website einbindet

Die Vorgehensweise hat mehrere Etappen, die wiederum jeweils aus mehreren Schritten bestehen. Dies sind die Etappen:
  • Zuerst wird der Feed mit FeedBurner „gebrannt“ und die Veröffentlichung vorbereitet. 
  • Dann wird optional „gebrandet“ (der öffentliche Link zum Feed gehört dann zur eigenen Domain und nicht zum FeedBurner). 
  • Schließlich wird der Code eingebaut.  

Etappe 1: Den Feed mit FeedBurner brennen

Voraussetzung für die Nutzung des FeedBurners ist ein Google-Konto.
  1. Gehen Sie zu http://feedburner.google.com und melden Sie sich mit Ihren Google-Daten an. Wer noch kein Google-Konto hat, klickt auf Weitere Optionen -> Konto erstellen und erstellt ein Konto.
  2. Nach dem Einloggen landet man auf der Seite My Feeds. Um einen Feed zu brennen, gibt man die URL des Feeds in das Feld unter Burn a feed right this instant. ein und klickt auf Next.

    Bei Tumblr lautet die Feed-URL beispielsweise http://evaschumann.tumblr.com/rss,
    bei Blogger-Blogs beispielsweise: http://beste-geldanlage.blogspot.com/feeds/posts/default oder http://text-und-kommunikation.blogspot.com/feeds/posts/default,
    bei meinem Wordpress-Blog (tinto bloggt) beispielweise http://www.tinto.de/tipps/feed/
    bei meiner Googleplus-Seite tinto – Tipps und Themen ist die URL http://gplus-to-rss.appspot.com/rss/116952844595275855722 (Ersetzen Sie einfach meine ID durch Ihre eigene.)

    Das Fenster Welcome! Let us burn a feed for you. wird geöffnet. 
  3. Übernehmen Sie die Vorschläge für den Feed Title und die Feed Address oder ändern Sie sie. Klicken Sie Next.
    Das Fenster Congrats! Your … wird geöffnet.
    Klicken Sie Skip directly to feed management.
    Das Feed-Fenster öffnet sich. 
  4. Klicken Sie auf den Reiter Optimize, dann links in der Navigation auf BrowserFriendly (Funktion sollte standardmäßig bereits aktiviert sein).
    Optimize Your Feed wird geöffnet.

    Die voreingestellten Appearance Options und die Content Options werden angezeigt. Hier muss normalerweise nichts verstellt werden.  
  5. Klicken Sie auf den Reiter Publicize, dann links in der Navigation auf BuzzBoost (standardmäßig noch nicht aktiviert).
    BuzzBoost wird geöffnet. 
  6. Die Feed Settings in BuzzBoost konfigurieren



    und dann auf Activate klicken.
    Die Einstellungen lassen sich danach jederzeit verändern und speichern.
    Im oberen Bereich wird nach der Aktivierung Your BuzzBoost Is Ready angezeigt. Dort können Sie (später, siehe Etappe 3) den Code entnehmen, mit dem Sie den Feed auf einer Webseite einbauen. 
So sehen die Code-Schnipsel aus, die man von FeedBurner erhält:
Skript-Beispiel für Wordpress-Blog:
<script src="http://feeds.feedburner.com/TintoBloggt?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/TintoBloggt"></a><br/>Powered by FeedBurner</p> </noscript>

Skript-Beispiel für einen Blogger-Blog:
<script src="http://feeds.feedburner.com/BesteGeldanlage?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/BesteGeldanlage"></a><br/>Powered by FeedBurner</p> </noscript>

Skript-Beispiel für eine Googleplus-Seite:
<script src="http://feeds.feedburner.com/appspot/pJND?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/appspot/pJND"></a><br/>Powered by FeedBurner</p> </noscript>


Nur zur Information für besonders Interessierte

Zum Vergleich: So sah der Code zur Einbindung der Facebook Like Box aus:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FEva-Schumann-Text-Kommunikation%2F156644737729445&amp;width=330&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=true&amp;height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:330px; height:427px;" allowTransparency="true"></iframe>

Inzwischen ist die Like Box zwar offiziell aus dem Programmangebot genommen worden, funktioniert aber noch, da sie hinter den Kulissen in das neue Seiten-Plugin umgewandelt wird. Das neue Seiten-Plugin von Facebook for Developers generiert einen zweigeteilten Code:
Der erste Code-Teil ist das JavaScript Software Development KIT (SDK) und muss im Quelltext gleich nach <body> eingefügt werden. Er sieht so aus:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.9"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Der zweite Code-Teil kommt im Quelltext dorthin, wo die Facebook-Box mit den letzten Posts ausgespielt werden soll. Er setzt sich folgendermaßen zusammen:
<div class="fb-page" data-href="https://www.facebook.com/Gartensaison/" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/Gartensaison/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Gartensaison/">Gartensaison-Hobbygärtner</a></blockquote></div>

Und dies ist der Code zur Einbindung von Forenbeiträgen aus meinem Geld-Forum bei Forumromanum:
<script src="http://349849.forumromanum.com/member/forum/last_entry.php?action=ext_index&amp;USER=user_349849&amp;threadid=4&amp;page=10&amp;font=Arial&amp;font_size=2&amp;cell_width=120&amp;table_width=380"></script>
Für ein anderes Forum muss man nur die Nummer 349849 am Anfang und in der User-ID user_349849 ersetzen.

Anzeige

Etappe 2 (optional): Branding

Oben habe ich gezeigt, wie der Code aussieht, den der FeedBurner BuzzBoost generiert. Allerdings habe ich meinen Feed gebrandet, sprich: ihm eine URL in meiner Domain verpasst, sodass mein Skript für den Einbau der Überschriften vom Wordpress-Blog nun so lautet:
<script src="http://feeds.tinto.de/TintoBloggt?format=sigpro" type="text/javascript"></script><noscript><p> Subscribe to RSS headline updates from: <a href="http://feeds.tinto.de/TintoBloggt"></a><br/>Powered by FeedBurner</p> </noscript>

So sieht das Skript beispielsweise für Blogger-Blogs aus: <script src="http://feeds.tinto.de/BesteGeldanlage?format=sigpro" type="text/javascript"></script><noscript><p> Subscribe to RSS headline updates from: <a href="http://feeds.tinto.de/BesteGeldanlage"></a><br/>Powered by FeedBurner</p> </noscript>

So funktioniert das Branding mit MyBrand – über Google FeedBurner konfiguriert: 
  1. Im Google FeedBurner in der Navigation ganz rechts oben auf My Account -> MyBrand klicken und den CNAME Alias kopieren.


  2. Beim Hosting-Provider in der Domain-Verwaltung eine Subdomain, beispielsweise feeds, für die Domain einrichten und für die Subdomain die DNS-Einstellungen, nämlich den CName Alias vom vorherigen Schritt eintragen.
    Anzeige
  3. Damit jeweils der richtige Blog ausgewählt wird, muss man den Namen, so wie man ihn im FeedBurner bei den Feed Details eingetragen hat, beispielsweise BesteGeldanlage, an die gebrandete Feedadresse hängen.



    Hinweis: Falls man bei Wordpress ein Feedburner Plugin installiert hat, muss man dort auch die neue Feedburner-Adresse eintragen, damit die Besucher dorthin weitergeleitet werden. Ebenso trägt man bei Blogger-Blogs unter Einstellungen -> Sonstiges im Bereich Website-Feed jeweils die neue gebrandete URL als Weiterleitungs-URL für Post-Feeds ein. 

Etappe 3: Den Code in den Quelltext einer Webseite einfügen

  1. Klicken Sie im FeedBurner auf der Startseite auf den Blog, dessen Feed Sie integrieren möchten. Wählen Sie den Reiter Publicize
  2. Klicken Sie links in der Navigation auf BuzzBoost.
    BuzzBoost wird geöffnet. 
  3. Im Bereich Feed Settings prüfen Sie noch einmal, was der publizierte Feed enthalten soll, und speichern ihn. 
  4. Kopieren Sie den Code in die Zwischenablage. 
  5. Öffnen Sie die Webseite, in die der Code eingebaut werden soll, mit einem HTML-Editor und fügen Sie den Code an der gewünschten Stelle in den Quelltext ein.


    Der gelb eingerahmte Code spielt den Feed auf der Webseite aus. Wie das im Browser aussieht, sieht man ganz oben im obersten Screenshot im gelben Rahmen. 
  6. Speichern Sie die Änderungen und prüfen Sie, ob die gewünschten letzten Beiträge in der gewünschten Art angezeigt werden.
Damit die eingespielten Überschriften und Texte optisch zum Rest der Webseite passen oder sich - wenn gewünscht - als Block abheben, kann das Aussehen mit CSS (.feedburnerFeedBlock) angepasst werden, siehe Buzzboost Google Support hier.

Disclaimer: Alle Angaben ohne Gewähr. Jede Haftung ist ausgeschlossen.

 Das könnte Sie auch interessieren:

Sie suchen Werbeplatz in diesem Blog oder eine Technische Redakteurin/Autorin/Texterin zu Software-, Informatik- oder Internetthemen für Ihre Website, ein Buchprojekt, ein Kundenmagazin o. Ä.? Schreiben Sie mir!

Anzeige


Donnerstag, 13. Juni 2013

Twitter auf Webseite einbinden

Wäre es nicht schön, wenn Ihre Homepage- oder Blogbesucher Ihre Tweets beziehungsweise öffentliche Tweets Ihrer Wahl direkt auf einer Website - beispielsweise auf Ihrer Homepage, im Blog oder auf einer anderen Webseite Ihrer Domains - lesen könnten? Kein Problem, Twitter bietet Widgets, mit denen man eine Twitter-Box auf der Website integrieren kann.


Nachtrag:
Twitter hat die Nutzeroberfläche und die Konfigurierung verändert, weshalb ich eine neue Anleitung erstellt habe, siehe Twitter-Tweets in eine Webseite einbauen.
Twitter-Tweets auf einer Webseite einbinden
Die Twitter-Box lässt sich nach Wunsch konfigurieren und kann
in jede Webseite eingebaut werden. Ich nutze sie auf meiner
Portalseite tinto.de, um dort meine neuesten Tweets anzuzeigen.
Eigentlich gibt es die Möglichkeit, eine Twitter-Box mit öffentlichen Tweets in die Website einzubinden, schon seit Langem, doch war die Funktion etwas versteckt. Jetzt wurde der Widget-Code von Twitter umgestellt, der Widget-Konfigurator erweitert und leichter auffindbar gemacht.

Twitter auf Website einbinden - Anleitung

So generieren Sie Ihr Widget:
  1. Gehen Sie auf die Twitter-Homepage  
  2. Loggen Sie sich mit ID und Passwort ein.
  3. Klicken Sie auf Ihr Porträtbild in der Symbolleiste oben rechts und wählen Sie in der Dropdown-Liste Einstellungen und Datenschutz
  4. Auf der Seite Account wählen Sie in der Navigation auf der linken Seite Widgets
  5. Klicken Sie auf Neu erstellen
  6. Nun öffnet sich der Widgets-Konfigurator.

    Widgets-Konfigurator für die Konfigurierung einer Benutzer-Timeline
  7. Über die Reiter unterhalb von Wähle eine Timeline-Quelle können Sie aussuchen, welche Art von Tweets Ihre Twitter-Box zeigen soll: 
    • Benutzer Timeline
      Tweets eines öffentlichen Accounts
    • Gefällt mir
      Tweets, die Sie als Favoriten gekennzeichnet haben 
    • Liste
      Tweets einer Liste, die Sie zuvor angelegt und denen Sie öffentliche Twitter-Accounts zugeordnet haben
    • Suchen
      Tweets, die mit einem definierten Hashtag-Begriff, z. B. #garten, gekennzeichnet wurden 
    • Sammlung
      Tweent einer Sammlung, die Sie zuvor angelegt haben.
  8. Die Konfigurierung ist weitgehend selbsterklärend.

    Beispiel Benutzer-Timeline: 
    1. Wählen Sie den Reiter Benutzer Timeline
    2. Auf der linken Seite können Sie Ihr Widget nun konfigurieren, auf der rechten Seite wird währenddessen eine Vorschau angezeigt. 
    3. Bei Nutzername können Sie Ihren eigenen oder einen anderen öffentlichen Twitter-Account angeben. 
    4. Bei Optionen können Sie wählen, ob Antworten auf Tweets auch eingeblendet und ob Bilder angezeigt werden sollen. 
    5. Bei Höhe geben Sie einen Wert von mindestens 200 ein, wenn Sie nicht den vorgegebenen Wert von 600 px beibehalten wollen. Die Breite muss nicht angegeben werden, da Twitter die Breite der Box automatisch an die Umgebung anpasst - sie ist jedoch mindestens 180 px breit. 
    6. Bei Thema können Sie zwischen Hell und Dunkel wählen. 
    7. Bei Linkfarbe können Sie eine Farbe auswählen, nachdem Sie in das Feld geklickt haben, und diese speichern. 
    8. Twitter für mich nicht anpassen aktivieren Sie mit einem Häkchen, wenn Sie nicht möchten, dass Ihnen Twitter Tweets einblendet aufgrund von Informationen, die der Dienst über Ihre Interessen und Verhalten gespeichert hat. 
    9. Klicken Sie auf Widget erstellen oder später beim Bearbeiten Änderungen speichern.
      Die Eingaben werden nun auf einem Twitter-Server gespeichert und rechts unten im Code-Feld Ihr Widget-Code eingeblendet. 
    10. Kopieren Sie den Code und fügen Sie ihn an der Stelle, an der Sie Twitter in die Website einbinden wollen, in den HTML-Code Ihrer Website/Homepage oder Ihres Blogs ein.

      Tipp:
      Zusätzliche Anpassungsmöglichkeiten ("Client Side Options") werden auf der Seite für Twitter Entwickler beschrieben (Englisch).

Twitter auf Website einbinden - Anwendungsbeispiele

Ich habe eine Twitter-Box mit meinen letzten Tweets auf meiner tinto.de-Einstiegsseite und im Media Newsroom von evaschumann.biz eingebunden. Ob das auch bei Ihnen Sinn macht, hängt von der persönlichen Nutzung und vom Kommunikationskonzept ab.
Anzeige


Ich verwende die verschiedenen Social-Media-Plattformen zu unterschiedlichen Zwecken:
  • Zum Diskutieren bevorzuge ich die Kommentarfunktionen von Blogs sowie die Kommunikationsmöglichkeiten bei Facebook und Googleplus.
  • In meiner Twitter-Timeline stelle ich vorwiegend neue Blogartikel und Informationswebseiten aus meinem eigenen "Internetreich" vor. Nur manchmal teile ich auch besonders Interessantes aus meinem Netzwerk auf Twitter - allerdings nur dann, wenn ich meine, dass diese Tweets nicht nur meine Twitter-Follower, sondern auch meine Webseiten-/Blogbesucher interessieren könnten, denn wie bereits erwähnt: Ich habe Twitter auf meiner tinto.de-Einstiegsseite und im Social Media Newsroom von evaschumann.biz eingebunden. So haben auch meine Webseiten- und Blogbesucher eine komfortable Möglichkeit, sich anhand der letzten Tweets über Neues in meinen Internetprojekten zu informieren.


Nutzt/nutzen Sie die Kommentarfunktion und fügt eure/Ihre Erfahrungen hinzu. Wenn der Blogbeitrag euch/Sie inspiriert hat, abonniert/abonnieren Sie den Feed oder per E-Mail.

Das könnte Sie auch interessieren:

Sie suchen Werbeplatz in diesem Blog oder eine Technische Redakteurin/Autorin/Texterin zu Software-, Informatik- oder Internetthemen für Ihre Website, ein Buchprojekt, ein Kundenmagazin o. Ä.? Schreiben Sie mir!

Sonntag, 19. Juni 2011

Media Newsroom - das Neueste auf einen Blick


Media Newsroom - das Neueste auf einen Blick
Media Newsroom - das Neueste auf einen Blick
Meine verschiedenen Websites und Blogs umfassen inzwischen mehrere hundert Seiten. Der neue Media Newsroom zeigt jetzt auf einen Blick, was gerade los ist:
  • Twitter-Timeline mit News von den Websites und mehr
  • Die neuesten Artikel (Blogposts) in den Blogs
  • Aktuelle Meldungen und Gespräche auf den Facebook-Seiten
  • Die neuesten Einträge und Diskussionen in den Foren
  • Aktuelle Meldungen und Gespräche aus meinem Google-Plus-Stream (öffentliche)

Das sind die beiden Unternehmungen, die dahinter stehen
  • Eva Schumann Text & Kommunikation
  • Eva Schumann Online Publikationen
-> Media Newsroom
Folgen Sie mir bei Twitter, kommentieren Sie in den Blogs, diskutieren Sie mit in den Foren und bei Facebook!

-> Publikationen
Hier erhalten Sie einen Überblick über alle meine Websites/Domains, Blogs und Social-Media-Konten bzw. Social-Media-Seiten

Besuchen Sie die Webseiten, reden und diskutieren Sie mit in den Foren, bei Twitter, Facebook & Co.

Das könnte Sie auch interessieren:

Sie suchen Werbeplatz in diesem Blog oder eine Technische Redakteurin/Autorin/Texterin zu Software-, Informatik- oder Internetthemen für Ihre Website, ein Buchprojekt, ein Kundenmagazin o. Ä.? Schreiben Sie mir!