Twitter @anywhere installieren
Für den vorherigen Tweet habe ich mit ein bisschen Code ein neue Funktion in ByteInvader eingebaut, es nennt sich Twitter @ anywhere. In den nächsten Zeilen möchte ich euch erklären, wir ihr dieses auch auf eurem Blog installieren könnt, dies funktioniert nicht nur mit WordPress, sondern sollte eigentlich mit jedem CMS, jeder HTML und PHP-Website funktionieren!
Zuerst möchte ich aber mal die Grundsatzfrage klären: Was bring Twitter @ anywhere? Das ganze ist eine Funktion, die offiziell von Twitter zur Verfügung gestellt wird und ermöglicht zum einen, dass jeder Name, der mit einem @ vorne beginnt ein Twitter-Link generiert wird. Dies spart beim bloggen einiges an Zeit, da man nicht jedes mal noch den Namen einfügen muss, sondern dieser automatisch eingefügt wird, zum anderen werden sog. Hovercards angezeigt. Um diese zu testen hier mal mein Twitter-Accout: @sebietter – Wenn ihr jetzt darüber fahrt mit der Maus, dann erscheint eine Art “Karte”,welche wichtige Informationen und einen Folgen-Button enthält. DAS ist die Hovercard!
Das ganze funktioniert mit jedem x-beliebigen Twitter-Account. Twitter @ anywhere kann allerdings noch mehr als diese FUnktionen, welche ja für Blogger schon extrem praktisch sind. Ich möchte euch aber jetzt zuerst erklären, wie ihr diese Hovercard’s auf euren Blog bring.
Als erstes müsst ihr bei Twitter eine neue Appliaktion erstellen. Dazu müsst ihr alle Infos ausfüllen, im nachfolgenden Screenshot seht ihr, wie dies Fertig in etwa aussehen sollte.
Dazu müsst ihr zuerst folgenden Code in der Datei header.php zwischen den <head> und dem </head> Tag platzieren:
<script src="http://platform.twitter.com/anywhere.js?id=EUERAPIKEYHIEREINFÜGEN&v=1" type="text/javascript"></script>
Nach dem ihr die Applikation erstellt habt, solltet ihr einen API-Key erhalten. Diesen müsst ihr im Code von Oben bei “EUERAPIKEYHIEREINFÜGEN” mit eurem API-Key ersetzen. Nun ist die Grundanforderung erfüllt.
Als nächstes installieren wir die Funtkion, dass @-irgendwas-Namen direkt einen Twitter-Link erhalten, ohne das wir was machen müssen. Dazu fügen wir schlicht folgenden Code unter dem Code von oben ein. Wichtig: Der Code muss immer noch ZWISCHEM dem <head> und </head> Tag sein! Das ist der Code:
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.linkifyUsers();
};
</script>
So als nächstes wollen wir die Hovercards aktivieren. Auch dazu müssen wir ganz einfach einen Code direkt unter dem vorherigen für die Links einfügen. Der Code lautet folgendermassen:
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.hovercards();
};
</script>
So die Hovercards sind nun auch aktiviert. Was gibt es noch für Funktionen? Man kann eine Tweetbox einfügen, welche folgendermassen aussieht und über welche man Tweets direkt vom Blog aus versenden kann:
Dazu muss man zuerst einen diesen Code in die header.php Datei einfügen:
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter("#custom-tweetbox").tweetBox({
label: "Twitter Box:",
defaultContent: "Followt alle unbedingt dem @sebietter",
height: 50,
width: 480,
});
};
</script>
Danach muss man noch, um die Twitter Box im Post bzw. der Seite zu integrieren, folgenden Code in der betreffenden Stellen einfügen:
<div id="custom-tweetbox"></div>
Als letztes zeige ich euch noch, wie ihr einen schönen Twitter-Follow-Me-Button einfügt, der aussieht wie dieser hier:
So wie fügen wir diesen Button ein? Zuerst müssen wir wie gewohnt einen Code in den Header einfügen. Dieser lautet folgendermassen:
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter('#follow-sebietter').followButton("sebietter");
};
</script>
Um euren Nutzernamen einzufügen, müsst ihr sebietter durch euren Nuternamen ersetzen. Leider muss man für jeden User Button wieder einen neuen Code erstellen.
Um den Button dann im Artikel einzufügen, müsst ihr diesen Code an der betreffenden Stelle einfügen:
<div id="follow-sebietter"></div>
Auch hier müsst ihr “sebietter” durch euren Nuternamen ersetzen, welchen ihr oben im Code angegeben habt!
So ich hoffe, ich habe euch die Funktionen so erklärt, dass ihr sie verstanden habt und auch nachbauen könnt. Ich wünsche euch viel Spass beim ausprobieren und schreibt doch den Link zum Blog, auf welchem ihr dies ausprobiert in die Comments!
2 Comments
Trackbacks/Pingbacks
- Tweets that mention Twitter @anywhere installieren » ByteInvader -- Topsy.com - [...] This post was mentioned on Twitter by rumnerden.de, sebietter. sebietter said: Twitter @ anywhere installieren -> http://chli.li/8 [...]
hat gut funktioniert. Man sollte nur erwähnen, dass im Quellcode vor dem @-zeichen nur ein Leerzeichen stehen darf. also @rumnerden funktioniert z. B. nicht. Außerdem ist wichtig, dass die zeile mit dem http://platform.twitter.com/anywhere.js VOR dem twttr.anywhere… Block stehen muss.
hat gut funktioniert. Man sollte nur erwähnen, dass im Quellcode vor dem @-zeichen nur ein Leerzeichen stehen darf. also @rumnerden funktioniert z. B. nicht. Außerdem ist wichtig, dass die zeile mit dem http://platform.twitter.com/anywhere.js VOR dem twttr.anywhere… Block stehen muss.