Wil je ook graag een Facebook Vind ik leuk/Like – knop voor je WordPress website? Volg de stappen hieronder om het te implementeren.
- Ga naar je theme folder en maak open je header.php en plak daarin vlak onder de body tag:
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>
- Maak vervolgens open je single.php
- Kijk in de broncode waar je dit knopje wilt hebben en plak daarzo:
<fb:like href="<?php echo get_permalink(); ?>" action="like"></fb:like>
- Opslaan en uploaden!
Je zult nu zoiets moeten zien bij elk artikel:
Je kan deze code op any pagina van je website plaatsen, zodat je het like/Vind ik leuk-knopje kan krijgen.
Hierboven heb ik uitgelegd hoe je een eenvoudige Vind ik leuk knop kun zetten voor je website.
Dit artikel wil ik verder uitbreiden met hoe je een Facebook fan badge kunt zetten op je website van je Facebook fan page, waar je vb. 10 fans kunt vertonen, met daarboven/daaronder een Vind ik leuk / Like knopje, geheel met je eigen css. Zoals hieronder in het voorbeeld:
Volg de stappen om dit zelf te doen:
- Als eerste heb je een Facebook Application ID nodig, daarvoor ga je naar deze pagina, vul je daar je Website naam en Website URL in, en laat je het genereren.
- Als twee, plak je de onderstaande code in je website, vlak voordat je de body afsluit
<!-- start facebook --> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({appId: 'JOUW-EIGEN-APP-ID', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('auth.sessionChange', function(response) { if (response.session) { // A user has logged in, and a new cookie has been saved } else { // The user has logged out, and the cookie has been cleared } }); </script> <!-- einde facebook -->
- Plaats nu de onderstaande code, waar je de badge wilt laten verschijnen, dit kan je ook in een div gooien, en dat vervolgens positioneren.
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script> <fb:fan profile_id="ID-VAN-JE-FANPAGE" stream="false" connections="6" logobar="0" width="178" height="286" css="URL-NAAR-JE-CSS"></fb:fan>
- De onderstaande code kan je gebruiken voor je css, en zelf aanpassen/opleuken. Let wel dat elke keer je het aanpast, je de naam van je css bestand ook moet aanpassen, vanwege dat Facebook je css bestand steeds cachet. Dus als je bestand vb. Facebook.css heette, veranderd het dan naar Facebook1.css enz. Dit ook steeds veranderen in de code van stap 3.
@charset "utf-8"; /* CSS Document */ body {} .fan_box .connect_widget{ position: absolute; bottom: 0; right: 10px; margin: 0 !important; } .fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; } .fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; } .fan_box .connections { background-color:#000000; border:1px solid #3E3D4E; color:#bbb;} .fan_box .full_widget { border:none;} .fan_box .full_widget .connect_top { background-color:#0A0910; border-bottom:none; border-left:1px solid #3E3D4E; border-right:1px solid #3E3D4E; border-top:1px solid #3E3D4E;} .fan_box .full_widget .connect_top a { color:#FFFFFF;} .fan_box .full_widget .connect_top a:hover { color:#EEBB00;}
Mocht het niet duidelijk zijn, kan je dat gerust laten weten in de reacties.
En de wordpress community zou de wordpress community niet zijn als er al weer een x aantal goed werkende plugins te vinden zijn. Hoewel deze stappen ook erg makkelijk zijn, is het toch mooi dat daar zo snel weer iets voor te vinden is voor de echte noob.
Deze features gaan steeds belangrijker worden, Facebook krijgt zo wel erg veel data (van buiten de site) waardoor het zoeken weer makkelijker gaat worden via zulke kanalen en uiteindelijk gaat het weer allemaal over de content, mensen waarderen je content > betere positie in de resultaten.
Slimme zet van Facebook en ik ben benieuwd naar de ontwikkelingen de komende tijd!
Dit is een stukje fbml code en ik zou niet weten waarom dat zo maar zou werken op een willekeurige (Wp) website. Draait er dan al ergens een plugin of zo die de fb-code herkent? Bij mij werkt het voorbeeld in ieder geval niet ‘out of the box’. Ik zie geen enkel effect, maar had dat eigenlijk ook niet verwacht. Doe ik wat fout? Dank! Robbert
Hi Netnotion (?),
Ik ben eigenlijk niet zo een fan van WordPress plugins, maar ik ben wel zeker dat je hiervoor plugins kunt vinden. Ik ga meestal proberen te hardcoden op m’n eigen manier of als er documentatie van een bestaande plugin aanwezig is, ga ik liever daarvoor.
@Robbert
Goede punt. Ik ben dit zelf ook gaan onderzoeken, waarom het bij mij gewoon out of the box werkte.
Je had ook nog gelijk. Heb de code getest op een andere WordPress website van mij, daar werkte het niet.
Schijn dat het te maken heeft met de Thesis theme zelf, daarop werkt dit gewoon out of the box, had hiermee dus geen rekening gehouden toen ik m’n artikel schreef (eerlijk gezegd wist ik dat ook niet).
In de functions staat er namelijk al de onderstaande code, waardoor je alleen een xfbml code hoeft te plaatsen:
function script_facebook(){ if(is_single()){ ?> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'JOU APP ID', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script> <? } } add_action('thesis_hook_before_html','script_facebook');Heb dit artikel ook even bijgewerkt, nu zal het wel werken op any WP website.
[...] zie je steeds vaker verschijnen. Bijvoorbeeld onder artikelen van Coopr.nl kun je klikken op de ‘vind ik leuk’ button, waarmee je aangeeft dat je het artikel leuk vindt en je het direct kunt delen met je [...]
Bij mij werkte de codes niet.
Oplossing: http://connect.facebook.net/en_US/all.js#xfbml=1
ipv: http://connect.facebook.net/en_US/all.js
En uiteraard kun je en_US vervangen door nl_NL
beste,
ik krijg steeds een opgestoken duim met text na.
ik zoek enkel de opgestoken duim te zien.
hoe kan ik dat oplossen aub?
Het is mij niet gelukt maar wat me wel gelukt is, én erg goed bevalt is via AddThis buttons toe te voegen. Met een beetje handigheid krijg je zelfs de Google+ button erop.
Groet
@Internet Marketing : Hoe heb je die +1 knop er op gekregen?
Super dit! Erg bedankt man
Hallo,
Ik krijg dit niet voor elkaar… Er verschijnt mij bij niets op de website.. Ik heb het getest met een lege html pagina en heb het eerste gedeelte van de code meteen onder geplaatst en het tweede gedeelte staat daar meteen onder. Verder is het document leeg. Wat doe ik fout? Alvast bedankt!