Facebook Share Button ohne Javascript und W3C valide

In Google Chrome überlagert der Share-Button den Zähler des Twitter-Buttons, und vor dem Fanseite-Button kommt ein Zeilenumbruch. Und diesmal hab ich den Cache geleert…

In Firefox, Opera und IE8 schauts gut aus

Ach so: Für target="_blank" kann man auch hervorragend rel="external" verwenden. Klappt bei mir einwandfrei, und ist valide.

@Markus: Ist mir gerade wurscht, wenn dieser komische Google Chrome Browser sich nicht an die Vorgaben hält. Die Programmierung ist richtig, das zeigt ja vor allem auch schon, dass alle anderen Browser sich daran halten. Wenn Google Chrome meint ein Eigenleben alla IE6 zu entwickeln… bitteschön

Vorsicht Tanja… ich habe schon einen Chrome-Anteil von +10%

Aber zur Sache! Jetzt komme ich wieder ans grübeln. Nicht direkt wegen W3C, sondern mehr wegen einem Vergleich FB-Like vs. FB-Share.
Völlig subjektiv hatte ich den Eindruck, dass “Like” öfters mal geklickt wird… Aber dieser Code hier könnte mich wieder umstimmen!
Hach, solche Entscheidungen sind schwiiiiierig )

@Marc: Wenns der einzige Browser ist, der so einen “Krampf” macht… rentiert sich nicht wirklich 90% der Leute eine dicke Lücke zwischen den Buttons zu präsentieren, nur damit es für 10% nicht überlappt. Aber grad egal, wenn ich mal Zeit und Lust habe, dann werde ich mich diesem via Safari-Hack widmen. Sieht aber gar nicht mal so übel aus

Ich hab übrigens auch lange hin und her überlegt und mich dann doch für den Facebook Share Button entschieden. Die Nachteile von Like bezüglich was Facebook hier auf dem Blog dann so treibt, sind nicht von der Hand zu weisen.

@Markus: Aktualisiere bitte mal und schau nach, ob es jetzt im Chrome passt. Im Safari hat es jetzt hin und angeblich sprechen beiden auf den gleichen CSS Hack an

@Tanja – ich schlafe mal eine Nacht über share like… vielleicht nehme ich erstmal beides, lach…

Der 2Fanseite”-Button ist übrigens hübsch, ist der offiziell? Darf ich mir den klauen ?

@Marc: Der ist gar nicht offiziell *lacht*. Hab ich selbst zusammen gebastelt. Kannst Du Dir aber gerne nehmen
An “beides” hatte ich übrigens auch erst gedacht, hatte es sogar schon nebeneinander, aber dann fand ich das doch blöd… doppelt gemoppelt hält meist auch nicht besser und mich stattdessen für den Fanseite Button entschieden.

Hey, vielen Dank für den Artikel! Es hat mich schon immer gestört, dass die Facebook-Elemente nicht W3C-valide sind, zumal meine Seite zur Zeit ohne XHTML auskommt.

Gibt es so einen Workaround auch für den Gefällt-mir-Button mit dem Zähler daneben? Mich nerven die ganzen Dateien (Skripte, Stylesheets), die Facebook da im Hintergrund lädt. Wenn da jemand einen Vorschlag hätte, wäre das klasse.

Apropos Chrome: Spontan hätte ich gesagt, dass ich viele Chrome-Besucher habe. Sind aber in Wirklichkeit nur 3 %, und die meisten benutzen nicht die aktuellste Version.

Jetzt passts in Chrome, gefällt mir.

Obwohl ich keinen Facebook-Account (mehr) habe, bin ich eben dabei, den Share-Button bei mir auch einzubauen. Der sitzt nur ein paar Pixel zu hoch bei mir…

@hagelberger: Dieses ganze “Gefällt mir” Zeugs kommt mir nicht mehr auf den Blog, weswegen ich auch keine Workarounds dafür habe

@Markus: Gut zu wissen, dass es passt und auch dass dieser Browser wirklich auf die Safari Hacks anspricht
Ich habe zwar noch einen Facebook Account, doch ehrlich gesagt logge ich mich dort nie ein, ich werde so ganz und gar nicht warm mit diesem Service. Aber meinen Usern, die davon begeistert sind, will ich das Ganze nicht komplett vorenthalten, deswegen diese Buttons
Wenn der Button zu hoch sitzt, dann zieh ihn mit CSS doch einfach etwas weiter runter (margin-top oder padding-top).

VIelen Dank mal wieder,
jetzt muss ich nur noch abwägen, ob ich “like” oder “share” einsetzen werde/sollte

@maTTes: Bei Dir hätte ich jetzt auf “share” getippt, gerade da Du ja auf der Suche nach einer ganz einfache Integration warst “like” bekommst Du nur mit dem ganzen Bremborium herum…

Zuerst einmal knuddeln weil ich solange nicht da war und dann…
Tja hätte ich gerne so einen Button auch den mit Tewitter und “gefällt mir” usw.
Aber da du meine technische Begabung kennst*gg*
Wird mein Blog wohl ohne diverse Buttons auskommen müssen…

@Markus
Das rel=”external” alleine genügt nicht, dass ein Link in einem externen Fenster aufgeht. Dazu bedarf es noch ein kleiner JS Code, welcher die Umleitung dann auch wirklich macht. In WordPress funktioniert dies, da der Java Code integriert ist.
Der Code onclick=”window.open(this.href,’_blank’);return false;” macht genau das gleiche, funktioniert auch auf nicht WP Seiten.

Also generell gesaggt rel=”external” öffnet den Link in einem neuen Fenster/Tab ist falsch, was die meisten aus der Aussage interpretieren. Das es bei WP funzt ist aber korrekt und W3C konform und empfehlenswert.

@Stefan: Danke für die Aufklärung

Ah ja, auch hier wieder das & durch amp ersetzen. Danke dir und dem Validator
Ich pack erstmal beides rein bei mir

@Arven: *knuddel* – soll ich Dir die zwei Buttons so wie ich sie habe kurz einbauen in Dein Theme? Sag einfach Bescheid

@Stefan: Danke

@maTTes: ja, die leidige Geschichte… aber der Validator meckert ja eh und egal wie ich es im Code versuche zu schreiben, das wird immer geschluckt

So, bei mir ist es nun endlich im neuen (und veröffentlichten) Theme eingebaut.

@maTTes: Hab gerade gekuckt, sieht schön aus

Hallo Tanja,

ich habe Deinen Teilen-Button bereits im Einsatz und freue ich über die Validität. Ein wenig hatte mir allerdings die Zählfunktion gefehlt. Daher habe ich Dein Script um eine Kleinigkeit ergänzt.

Den Code type=”button” habe ich nun noch durch type=”button_count” ersetzt und nun wird zusätzlich noch die Anzahl der geteilten Links auf Facebook angezeigt.

Lieben Gruß
Sylvi

@Sylvi: Ja, es gibt ja einige unterschiedliche Button Versionen, die natürlich nach Geschmack genutzt werden können.

Perfekt, habe das gerade in meinem FB-Share-Plugin umgesetzt. Jetzt ist wieder alles valide. Danke dafür!

@Kalliey: Supi, dann passt es ja jetzt auch mit der Validität

Ich bin ja auch auf der Suche nach einer Möglichkeit, einen eigenen Sharebutton ohne Plugin bereitzustellen. Deine Codeschnipsel ist daher schon mal prima.

Was mich jetzt aber noch interessiert: Kann man das irgendwie so gestalten, dass sich das Fenster nach dem Informieren wieder schließt? Bei der jetzigen Version muss der Nutzer selbst immer auf X klicken. Ist natürlich Mehraufwand, dem ich ihm ersparen möchte — sowie das ja bspw. auch bei den via IFrame integrierbaren Buttons funktioniert.

Außerdem ist mir aufgefallen, dass man am Ende zwar wieder zur Anmeldeseite umgeleitet wird, sodass es so aussieht, als sei man ordentlich ausgeloggt, aber wenn man dann mal auf das Facebookzeichen klickt, stellt man fest, dass man immer noch eingeloggt ist. :S Ist das noch jemandem passiert?

Äh, ich meine nicht “informieren”, sondern “teilen”. ^^

@Ali Schwarzer: Wenn Du in diesem Bereich etwas ändern willst, dann müsstest Du direkt in die Funktion eingreifen, die Facebook zur Verfügung stellt. Also ist eigentlich ein “no way” die Antwort, oder Du programmierst was eigenes, falls Facebook das zulässt.

Übers selber programmieren reden wir dann in ein paar Jahren, wenn ich dann eine leise Ahnung davon habe, wie man überhaupt programmiert. ^^

Nice to know: Mir ist aufgefallen, dass sich das Facebookfenster zwar nicht schließt, wenn man sich erst anmelden muss, aber das geht sehr wohl zu, wenn man eh schon parallel eingeloggt war. oO

Sollte man

the_permalink()

nicht in

echo urlencode(the_permalink())

ändern und auf die selbe Weise auch mit dem title verfahren? Sieth mir sauberer aus, lasse mich aber gerne eines besseren belehren.

@Tim: Bis dato gab es ohne keine Probleme

Hallo!
Danke erstmal für diesen tollen Code! Habe ich echt überall gesucht!! (ich bin technisch nicht so fit wie du). es ging mir halt darum ein eigenes Bild einzubauen, das hat jetzt auch super geklappt, NUR hätte ich das gerne als LIKE und nicht als SHARE hast du denn code auch als like??
viele Grüße
Isa

@Isi: Ne, sorry, mit Like arbeite ich nirgends, da habe ich keine Lösung dafür.