Gesucht wurde eine möglichst schlanke und valide Lösung um Facebook und Twitter einzubinden.
Zum Einbau der Facebook etc. Schaltfläche die WordPress single.php bearbeiten.
Intro
Unterhalb des Titels habe ich noch ein klitzekleines Bild eingebaut um schon mal auf die Funktion von Facebook und Twitter hinzuweisen. Leute die damit hantieren dürften die Symbole erkennen.
Die Grafik ist intern verlinkt zu den Buttons unterhalb des Beitrags. (Stichwort: Textanker).
Einbau-Code
<a title="Spread the message (Facebook und Twitter)" href="#social"><img src="<?php bloginfo('template_url'); ?>/images/facebook-twitter.png" alt="Facebook | Twitter" /></a>
Der Code unter dem Beitrag (die Buttons)
Habe dem Bereich noch eine id gegeben damit der Textanker funktioniert und dem Facebook-Link eine class gegeben, damit sich der Bereich stylen lässt.
Einbau-Code
<p id="social">Spread the message! <a class="facebook" title="Share the message - facebook" name="fb_share" type="button" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title();?>" rel="nofollow" target="_blank">Facebook</a> |
<iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&lang=de&count=none&via=funkygog" style="width:70px; height:20px; vertical-align:bottom;" frameborder="0" scrolling="no"></iframe></p>
Das beim Klick auf das obige Icon die Buttons kurzzeitig farbig unterlegt sind, liegt an dem yellowfade-Script, das ich hier verwende.
Für das sanfte dahingleiten („Please Scroll soft with me“) ist ein kleines Script verantwortlich welches ich bei ElmaStudio gefunden habe.
Damit das mit Twitter auch Sinn macht, habe ich mir extra einen Twitter-Account zugelegt. Geht fix von der Hand, auch wenn ich sicherlich dort nur selten etwas schreiben werde.
Detlef hat mir noch den Tipp gegeben, das WP-Plug-In WordTwit zu installieren, dadurch erscheinen neue Beiträge automatisch bei Twitter.
WordPress 2 iPhone:
Damit der Blog auch bequem über ein iPhone (und anderen Smartphones) lesbar ist, habe ich folgenden Tipp umgesetzt:
Das Plug-In WPtouch macht seine Sache sehr gut! Es empfiehlt sich in den Plug-In Einstellungen unter user-agents noch weitere Mobile-Hersteller einzutragen.
So hat Caschy folgendes eingetragen:
nokia, iemobile, symbian, opera mini, opera mobi, windows ce, samsung, wap, symbian, wml, pda, ericsson, sonyericsson
Um zu Testen wie der Blog auf einem Smart-Phone aussieht, kann man den Opera Mobile Emulator installieren.
Speziell für iPad und iPhone gibt es die Freeware iBB Demo.
Hinweis zur Installation und Bedienung von iBB
Dazu unten beim Bild auf „installieren“ klicken. Es wird dann zunächst Adobe Air installiert.
Ist das Programm dann installiert, erscheint ein iPad und oben eine Browserzeile in der man die Website-Adresse eingibt.
Um dann umzustellen auf die iPhone-Simulation einfach STRG+2 drücken.
Steht zwar auf der Startseite, aber ich hatte das zunächst übersehen.
Mit STRG+1 wechselt man wieder zum iPad.
weitere Infos:
- Die Anzahl der Facebook Freunde anzeigen ohne Widget: Perun.net
- Wer Facebook-Share mit Zähler verwenden möchte:
Anleitung vom admartinator
7 Kommentare
Hi funkygog,
danke für den interessanten Artikel. Da meine WP-Karrerie noch in den Kinderschuhen steckt (bzw. ich noch nicht so viel Ahnung davon habe – schmunzel) und ich mit meinen aktuellen Social-Buttons noch nicht so ganz zufrieden bin, kommt mir Dein Artikel gerade recht.
Ich werde es die nächsten Tage testen.
Danke und Gruß
Andi
Danke Euch! Ist schon ärgerlich das die Großen sich überhaupt nicht um Validation kümmern. youTube könnte man da auch noch nennen.
Aber auch bei WordPress läuft nicht alles rund. Diese Ping-Geschichte nervt gewaltig und eure Kommentare musste ich leider erst aus dem Spam von Akismet fischen.
Langweilig wird es jedenfalls nicht so schnell.
und jawohl – say it loud: „Code is poetry“
Da war der Pingback aber wieder lange unterwegs… und das trotz der eigentlich so geringen Entfernung 🙂 . Danke für den Link!
Ich pflichte Robert auch bei, man stöß bei Dir immer wieder auf Infos die man durchaus gut gebrauchen kann. Das Thema Validation ist eine durchaus komplizierte Angelegenheit. Wenn man bedenkt, dass Google einerseits valide Seiten verlangt (oder andernfalls im PR fallen lässt) und selbst eine Seite hat die aktuell 150 Fehler aufweist sagt das glaube ich alles.
Darin schlummert auch ein Stück weit Allgemeinkritik, wie ich ehrlicherweise zugeben muss, ich finde es einfach unbegreiflich das sich Webmonster wie Facebook oder Twitter immer wieder gegen Standards die allen zu Gute kommen stellen.
Wie gut, das es funkygog gibt, der mich immer über die Bemühungen der Blogosphäre informiert, für die Code noch Poetry ist 😉
@Crazy Girl
sehr gerne
@Robert
Vielen Dank für das Kompliment.
Die Geschichte mit xhtml 1.0 vs. 1.1 muss ich mir mal anschauen.
Nun so 100% valide kriegt man es vielleicht nicht hin, aber immer noch besser als die von Facebook angebotenen Codes.
Wie immer, vielen Dank auf für diesen Super Tipp. Auch auf die Gefahr hin mich zu wiederholen, ich finde du schreibst immer noch die verständlichsten Anleitungen zum Einbau von irgendwas.
Kleine Anmerkung zum Artikel: Es sollte natürlich nicht unerwähnt bleiben, das die Validierung nur mit xhtml1.0 Transitional möglich ist, bei xhtml1.1 oder 1.0 strict ist das weiterhin nicht möglich. Das war auch bei mir der Grund warum es zunächst und partout nicht validieren wollte.
Danke für die Erwähnung 🙂