Facebook hat sich ja vor einer ganzen Weile schon entschieden, den Teilen Button nicht weiter zu unterstützen. Tatsächlich haben sie den sehr gut modifizierbaren Share Button durch den starren, sehr eingeschränkten Like/Recommend Button ersetzt. Was heißt das für Designer?
Fakt 1: Den Teilen (Share) Button GIBT es nicht mehr.
Ich kann das gar nicht oft genug sagen, aber es kommen immer noch Anfragen für Webseiten mit dem Share Button. Weil der so schön modifizierbar war. Da konnte der Designer von Welt sich so richtig austoben. Nachdem die Nachfrage einfach nicht stoppen will, habe ich mir schließlich einen Weg überlegt, um den Kunden zu geben, was sie wollen: man kann den Share Button simulieren und damit jedes Designerherz höher schlagen lassen. Dann können sie nach Herzenslust einen Button gestalten und man ruft via Javascript halt die FB.ui method:stream.publish. So fordert man den User auf, einen Wallpost zu machen. Dies funktioniert dann in etwa so:
<a href="#" onclick="shareStuff()">Teilen!</a>
<script type="text/javascript">
function shareStuff(){
FB.ui({
method: 'stream.publish',
message: '',
attachment : {
name: 'Dies ist der Titel des Wallposts',
caption: '',
description: 'der lange Text des Wallposts blablablablabla',
href:'https://www.facebook.com/pages/xxx/app_0000000000',
media: [{
type: 'image',
href: 'https://www.facebook.com/pages/xxx/app_0000000000',
src: 'img/logo_share.jpg'
}]
},
action_links: [
{ text: 'Mitspielen!', href: 'https://www.facebook.com/pages/xxx/app_0000000000' }
]
});
}
</script>Statt dem Text kann man nun an der Stelle seinen gestylten Button einbauen und macht so den Designer glücklich. Der weiß natürlich nicht, dass für seinen heißgeliebten Share Button nicht mehr nur ein Snippet kopiert werden musste, und sieht einen dann fragend an, wenn man ihm versucht zu erklären, warum man statt 5 Minuten eine halbe Stunde gebraucht hat für seinen blöden Button.
Fakt 2: Der Like Button sieht nicht so aus, wie Designer das glauben
Wenn man den Gestalter doch soweit hat, mit dem Likebutton zu arbeiten statt sich den Share Button einzubilden, gilt es, ihm klarzumachen, dass seine Vorstellung vom Likebutton FALSCH ist. Sehen wir uns doch mal einen kleinen Vergleich an:
 |
 |
|
| DIES IST KEIN LIKEBUTTON!So sieht er nur aus, wenn noch keine einzige Person „gefällt mir“ geklickt hat. Idealerweise werden aber sehr viele Leute klicken, also sollte er diesen Status nicht lange behalten. | So könnte ein Likebutton aussehen.Es gibt auch noch 2 andere Varianten, aber es zeigt, dass der Likebutton für gewöhnlich NICHT einfach so alleine steht. er hat mindestens einen Zähler dabei und wenn man klickt, öffnet sich ein Detailfenster zur Texteingabe. |
Ich glaube, hier wird schon deutlich, wo das Problem liegt. Der Designer nimmt das, was er für den Likebutton hält, als Vorlage, und quetscht es ins Design. Und wundert sich dann, wenn der Likebutton mit seinem Counter andere Elemente überdeckt. Gestalter scheinen sowieso ein natürliches Gespür für das Unpraktische zu haben, darum kann man eigentlich davon ausgehen, dass der Designer den Button irgendwo ganz nach rechts platziert (und dann total entsetzt ist, wenn er draufklickt, das Textfenster nach rechts aufgeht und eine SCROLLBAR erscheint).
Mein eindringlicher Rat ist es deshalb, dem Gestalter frühzeitig mitzuteilen, dass seine Vorstellung des Likebuttons schlicht und ergreifend nicht den Tatsachen entspricht und dass er idealerweise genügend Platz für den Counter und das Textfenster einkalkuliert. Ein auf diese Weise gebriefter Designer wird sich neue und kreative Wege überlegen, den Likebutton ästhetisch in sein Layout einzubauen.
…und dann wache ich auf weil mein Wecker klingelt. Nein, die Erfahrung zeigt, dass der Designer sich in seinem ästhetischen Empfinden verletzt fühlen wird und darauf bestehen wird, dass man einen Weg findet, den Counter und das Textfeld auszublenden. Soviel zum Thema Flexibilität der Designer. Und ich habe mich dem gefügt und es gibt tatsächlich einen Weg, beides auszublenden. Den Counter blendet man aus, indem man die Größe des iframes definiert. Hier ist allerdings auf eines zu achten: der gute alte Safari (auf MacOSX) braucht natürlich eine Extrawurst, der hat einen breiteren Likebutton. Muss man also eine Browserweiche machen.
<?php
$w = 78;
$agent = $_SERVER["HTTP_USER_AGENT"];
if (strrpos($agent, "Safari") > -1)
$w = 83;
?>
<style>
body{padding:0px;margin:0px;}
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {display: none !important;}
.fb-like iframe{width:<?=$w?>px !important;}
</style>
<div data-href="LIKEURL" data-send="false" data-layout="button_count" data-width="78" data-show-faces="true"></div>Und damit werden die Count Bubble und der Text versteckt. Und der Designer ist dann hoffentlich auch glücklich. Wird sich zeigen, ob Facebook das länger mitmacht.