Facebook “Freunde einladen” in einem page tab

29. Juni 2012

Eigentlich ergab meine Recherche, dass man den apprequets dialog von Facebook in einem Seitenreiter nicht benutzen kann. Das stimmt theoretisch auch, wenn man die Methode aufruft, öffnet sich zwar das Fenster, die Einladungen werden aber nicht verschickt. Allerdings kann man dieses Problem relativ leicht umgehen:

1. Man gibt der App auch eine Canvas URL, dieselbe wie für den page tab auch. Nun funktioniert das Freunde einladen auch im page tab, wenn diese allerdings auf den request klicken, werden sie zur Applikation (nicht zum Seitenreiter) weitergeleitet

2. Man richtet auf der index.php eine Weiterleitung ein, wenn der Parameter fb_source gesetzt ist. Der ist in einer Applikation immer gesetzt, im Seitenreiter nie. So leitet man all jene, die über Freundschaftsinvites kommen, einfach weiter.

  1. if($_REQUEST['fb_source']){
  2.     die("<script>window.top.location = 'http://www.facebook.com/PAGENAME/app_XXXXXXXXX'; </script>");
  3. }

 

Parsen von XFBML

28. Juni 2012

Wenn man content via Ajax nachlädt, kann es einem schonmal passieren, dass man einen like-Button oder eine Kommentarbox hat, die erst über einen ajax request in den Content eingefügt wird. Diese werden dann aber nicht von Facebook geparst, darum gibt es eine nette Javascript Funktion, die nach dem einfügen der neuen Daten aufgerufen werden kann:

  1. FB.XFBML.parse(document.getElementById('div_id'));

Damit werden auch nachgeladene Elemente korrekt von Facebook dargestellt.

WordPress Archiv Widget: gruppieren nach Jahren

28. Juni 2012

Nachdem meine Einträge nun schon bis ins Jahr 2008 zurückreichen, wollte ich mein Archiv in der rechten Sidebar nach Jahren gruppieren und die einzelnen Monate nur dann anzeigen lassen, wenn man auf ein Jahr klickt. Und das geht durch folgenden code in der sidebar.php:

  1. $args = array(
  2.     'type'            => 'monthly',
  3.     'limit'           => '',
  4.     'format'          => 'html',
  5.     'before'          => '',
  6.     'after'           => '',
  7.     'show_post_count' => false,
  8.     'echo'            => 0
  9. );
  10. $res = wp_get_archives( $args );
  11. $archi = explode( '</li>' , $res );
  12. $links = array();
  13. foreach( $archi as $link ) {
  14.     $link = str_replace( array( '<li>' , "\n" , "\t" , "\s" ), '' , $link );
  15.     if( '' != $link )
  16.         $links[] = $link;
  17.     else
  18.         continue;
  19. }
  20. $y = 0;
  21. foreach($links as $k => $v){
  22.     $match = array();
  23.     preg_match("/title='(.*?)'/si", $v, $match);    
  24.     $tmp = explode(" ", $match[1]);
  25.     if($y != $tmp[1]){
  26.         echo "<li><b><a href='#' onclick='$(\".li_".$tmp[1]."\").show();'>".$tmp[1]."</a></b></li>";
  27.     }
  28.     $y = $tmp[1];
  29.     echo "<li style='margin-left:10px;display:none;' class='li_".$tmp[1]."'>".$v."</li>";
  30. }

Das wars! Voraussetzung dafür ist nur, dass jQuery inkludiert ist.

Das WordPress Admin Interface verändern

27. Juni 2012

Eigentlcih brauch ich dazu gar nichts schreiben, weil es auf Six Revisions bereits ausführlich beschrieben wurde. Ein sehr nützlicher, hilfreicher Artikel, danke!

Der Facebook Like Button vs. Designer: Runde 2402

22. Juni 2012

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:

  1.     <a href="#" onclick="shareStuff()">Teilen!</a>
  2.     <script type="text/javascript">    
  3.     function shareStuff(){
  4.             FB.ui({
  5.                         method: 'stream.publish',
  6.                         message: '',
  7.                         attachment : {
  8.                             name: 'Dies ist der Titel des Wallposts',
  9.                             caption: '',
  10.                             description: 'der lange Text des Wallposts blablablablabla',
  11.                             href:'https://www.facebook.com/pages/xxx/app_0000000000',
  12.                             media: [{
  13.                             type: 'image',
  14.                             href: 'https://www.facebook.com/pages/xxx/app_0000000000',
  15.                             src: 'img/logo_share.jpg'
  16.                           }]
  17.                         },
  18.                         action_links: [
  19.                     { text: 'Mitspielen!', href: 'https://www.facebook.com/pages/xxx/app_0000000000' }
  20.                 ]
  21.         });            
  22.     }
  23.     </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.

  1. <?php
  2. $w = 78;
  3. $agent = $_SERVER["HTTP_USER_AGENT"];
  4. if (strrpos($agent, "Safari") > -1)
  5.     $w = 83;
  6. ?>
  7. <style>
  8.      body{padding:0px;margin:0px;}
  9.      .fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {display: none !important;}
  10.     .fb-like iframe{width:<?=$w?>px !important;}
  11. </style>
  12. <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.

Wenn Facebook sagt “Leider ist etwas schief gelaufen”…

06. Juni 2012

Da musste ich heute einen Tab auf einer Seite hinzufügen. Das ist ja eigentlich kein Problem, wenn man den Link hat, um das zu bewerkstelligen, allerdings hat Facebook heute spontan beschlossen, dass das nicht funktioniert. Statt dessen bekomme ich beim Aufrufen des Links die Meldung dass etwas schief gelaufen ist. Sehr hilfreich, Facebook, wirklich. Ich war schon am Verzweifeln, da fand ich diesen Link:

http://marco-senkpiel.de/2012/06/06/facebook-tab-application-hinzufuegen-workaround/

Nie war ich dankbarer für einen Tip als für diesen. Danke!

Update: da der Link inzwischen nicht mehr aktiv ist, kopiere ich hier mal die einzelnen Schritte rein:

  • öffne den Facebook API Explorer
  • klicke auf “Get Access Token”
  • gehe auf den “Extended Permissions”-Tab und wähle “manage_pages”
  • klicke auf “Get Access Token”

Nun brauchst du den Namen oder die Page-ID der Page, wo der Tab hinzugefügt werden soll bspw. für Coca Cola Fanpage: “http://graph.facebook.com/cocacola

  • nun wähle die Methode “GET” und schreibe in der das Input-Field “http://graph.facebook.com/? fields=access_token”
  • klicke Submit, und die Antwort sollte so aussehen:

{“access_token”: “XXXXXXXXXXXXXXXXXXXXXXXX”,”id”: “1234567890”,”type”: “page”.}

  • kopiere den Access Token in das Input Field “Access-Token”
  • nun wähle die Methode “POST” und schreibe in der das Input-Field “http://graph.facebook.com//tabs”
  • klicke unter dem Input-Field auf “add field” und schreibe in das “name”-Field “app_id” und in das “value”-Field die App-Id der Application die auf der Page installiert werden soll
  • klicke submit, und die Antwort sollte true lauten
  • nun gehe zur Page, die App sollte nun unter den Favorites zu finden sein

Das ist ein Workaround für https://www.facebook.com/dialog/pagetab