Welkom-tab op facebookpagina Iemand komt op uw facebookpagina. Natuurlijk wil u die persoon duidelijk laten zien waar de pagina over gaat. En om die persoon regelmatig terug te zien, kan u hem aanraden om op like te klikken. Daarvoor kan u een aparte welkomstpagina aanmaken. Iedereen die op uw facebookpagina komt, ziet eerst deze pagina. 1
Wat hebt u nodig? 1. hosting en eventueel een ssl-certificaat. 2. een afbeelding voor mensen die uw pagina voor het eerst bezoeken 3. een afbeelding voor mensen die al op like geklikt hebben. Misschien hebt u deze of kan u ze zelf maken. Indien niet kan ik u voor hosting http://www.unix-solutions.be aanraden. Voor het ontwerpen van de afbeeldingen http://www.selentic.net De iframe-methode Ik kan natuurlijk één van de vele apps gebruiken, maar ik houd alles graag zelf in de hand. Daarom gebruik ik de iframe methode. Dat wil zeggen dat de welkomstpagina eigenlijk op mijn eigen server staat. Mijn facebookpagina haalt de pagina op van de server. Er zijn quasi geen beperkingen, zolang u de regels van Facebook volgt. Om de facebookpagina en de welkom-tab te laten samenwerken, maken we onze eigen facebookapplicatie. Daarvoor moeten we eerst een facebook developer worden. Dat is eenvoudig en gratis. Surf naar https://developers.facebook.com/apps en volg de instructies. 2
Aanmaken afbeeldingen De afbeeldingen mogen 520 pixels breed en 800 pixels hoog zijn. Ik maakte ze vierkant, met een duidelijk pijltje naar de like-knop. Wie al op like klikte, krijgt een bedankje te zien. U kan dit gebruiken om een kortingscode of informatie voor leden te laten zien. En u kan in plaats van afbeeldingen ook webpagina s of Java-applicaties gebruiken. 3
Opladen bestanden Maak op uw hosting een map aan. De naam mag u zelf kiezen. In deze map komen alle bestanden die we nodig hebben voor de welkomstpagina. Dat zijn de bestanden facebook.php, index.php, AFBEELDING_NOG_NIET_GELIKED.png en AFBEELDING_LIKE.png Download de facebook sdk (https://github.com/facebook/php-sdk/downloads). De bestanden die u in de map src vindt, plaatst u in de map. Enkel facebook.php is echt essentieel. Plaats de twee afbeeldingen in dezelfde map. 4
Aanmaken index.php Maak nu een nieuw bestand index.php aan. Als u véél van PHP afweet, is de rest héél eenvoudig. U schrijft de code en alles valt op zijn plaats. Of u kan gewoon mijn code gebruiken. Er zijn slechts vier zaken die u zelf moet aanpassen. <?php require 'facebook.php'; $app_id = "APP_ID_AANPASSEN"; $app_secret = "APP_SECRET_AANPASSEN"; $facebook = new Facebook(array( 'appid' => $app_id, 'secret' => $app_secret, 'cookie' => true )); $signed_request = $facebook->getsignedrequest(); $page_id = $signed_request["page"]["id"]; $page_admin = $signed_request["page"]["admin"]; $like_status = $signed_request["page"]["liked"]; $country = $signed_request["user"]["country"]; $locale = $signed_request["user"]["locale"]; if ($like_status) { echo "<img src='afbeelding_like' />"; } else { echo "<img src='afbeelding_nog_niet_geliked' />"; }?> APP_ID en APP_SECRET vindt u op de developers pagina van uw app. Dat maken we straks. AFBEELDING_LIKE is de volledige url van de afbeelding voor mensen die al op "Like" geklikt hebben. Deze moet eerst! AFBEELDING_NOG_NIET_GELIKED is de volledige url van de afbeelding voor mensen die nog niet op "Like" geklikt hebben. Vaak is dit hun eerste bezoek. Plaats index.php in dezelfde map als de andere bestanden. U merkt dat u zich niet hoeft te beperken tot de mensen die uw pagina liken. U kan bijvoorbeeld ook per land een andere afbeelding weergeven. De mogelijkheden zijn eindeloos. 5
Facebook app aanmaken Surf naar https://developers.facebook.com/apps en klik rechts op create new app. U krijgt op de pagina van de app onmiddellijk het APP ID en APP SECRET te zien. Dit moet u nog aanpassen in de index.php pagina. Ik raad u ook aan om op edit icon te klikken en het te vervangen door een icoontje. Anders heeft uw welkom-tab het standaard radertje als icoon. 6
Onderaan dezelfde pagina kan u kiezen waarvoor de app dient. Klik op I want to build a custom tab for Facebook Pages. Hier kan u de naam (Page Tab Name) en de url (Page Tab URL) van uw app invoeren. Dit is het webadres dat naar de index.php verwijst die we hierboven maakten. Ik raad u aan om ook de Secure Pag Tab URL in te voeren. Dit is dezelfde url als bij Page Tab URL, maar met https in plaats van http. Natuurlijk enkel indien u een SSL-Certificaat hebt. Als u dit niet doet, krijgen mensen die facebook in SSL-modus gebruiken, een foutmelding bij het openen van uw pagina. U hebt zojuist uw eigen facebook app aangemaakt! 7
Plaats de welkom-tab op uw facebook pagina U wil de app natuurlijk toevoegen aan uw Facebook page. Dat kan u doen door te surfen naar de volgende URL: https://www.facebook.com/dialog/pagetab?app_id=your_app_id&next=your_url U moet de variabelen YOUR_APP_ID en YOUR_URL aanpassen. Die gegevens vindt u in uw app settings. Surf naar deze URL en u krijgt een selectiescherm te zien. Hier kan u kiezen aan welke pagina (waar u admin bent) u de app wil toevoegen. 8
Selecteer de juiste Facebook page en klik op de knop Page Tab. We zijn er bijna! Heeft uw app een naam die u niet wil gebruiken in de navigatie? Geen probleem, dat past u eenvoudig aan. Ga naar uw pagina, klik op Edit Page en ga naar apps. Via Edit Settings kan u de naam van de app zoals die weergegeven wordt op uw pagina nog aanpassen. Handig als deze niet Welkom heet. Tijd voor de laatste stap Ga, in Edit Page naar Manage Permissions en zet de default landing tab op Welkom (of de naam die u aan uw app gegeven hebt). Klaar! 9
Dit is een gratis e-boek gemaakt door Chris Demeyere. U mag dit verspreiden, aanpassen, vertalen, zoals u wilt. De Creative Commons-licentie is van toepassing. Deze kan u nalezen op: http://creativecommons.org/licenses/by-nc-nd/2.0/be/deed.nl Natuurlijk aanvaard ik geen verantwoordelijkheid voor problemen. http://www.alittleconversation.be http://www.twitter.com/chrisdemeyere http://www.facebook.com/alittleconversation Noot: laatste update 11 januari 2012 10