• Integreer een sociaal netwerk in je website (2)

    Integreer een sociaal netwerk in je website (2)

    Tijdens de zoektocht naar info voor het integreren van een like button, werd ik al snel geconfronteerd met tal van andere Facebook plugins. Iets wat mij direct aansprak, was de manier om comments te verzorgen met "FB:comments".

    Het bespaart je eigenlijk heel wat werk. Je hoeft praktisch geen enkele lijn code te schrijven en je krijgt er een volwaardig commentsysteem in ruil voor. Jammer genoeg heb ik dit pas laat ontdekt. M'n commentsysteem stond namelijk al op poten toen ik hierachter kwam. Typisch! Maar swat, ik wou het toch eens testen. De volgende regel code is eigenlijk al voldoende.

    < script src="http://connect.facebook.net/nl_BE/all.js#xfbml=1">< /script>
    < fb:comments href="www.tagz.be" num_posts="2" width="500">< /fb:comments>
    


    Daar krijg je dan zoiets voor.

    Facebook comments Tagz

    Allright, that was easy!

    OK, dit is best wel cool. Ik heb net in 5 minuten de mogelijkheid toegevoegd om gepersonaliseerde comments te plaatsen zonder deze zelfs te moeten opslaan in een databank. Je kan bovendien ook een moderatoraccount toevoegen om zo de comments te kunnen beheren. Meer info vind je hier.

    Ik vind dat er echter 1 groot nadeel aan is: de layout. Facebook plugis zijn qua layout (kleur/vorm) erg moeilijk aan te passen. Er zijn slechts 2 kleurschema's om uit te kiezen, light en dark. De kans dat deze layout niet past binnen die van een website is dus erg groot. Webdesigners zullen het daar ongetwijfeld mee eens zijn.

    Wat als er een mogelijkheid bestond om de gegevens (naam, e-mail, profielfoto, ...) van een Facebookgebruiker vrij te kunnen plaatsen in je website? Je zou alles kunnen bepalen: lettertype, corps, kleur en vorm.

    Wel, good news everyone! Die mogelijkheid is er!

    Login with Facebook

    Je kan natuurlijk niet zomaar iedereen z'n gegevens opvragen en opslaan in je eigen databank. Dat zou een ernstige inbreuk op de privacy zijn. Nee, eerst moet er toestemming gegeven worden om de persoonlijke gegevens te mogen gebruiken. Dit kunnen we doen aan de hand van de FB login-button.

    Facebook connect Tagz

    Om deze graad van verificatie te mogen gebruiken op je website, moet je het domein wel eerst registeren bij Facebook. Eens je geregistreerd bent, krijg je een App ID. Als je die ID in handen hebt, kun je eraan beginnen:

    < div id="fb-root">< /div>
    < script src="http://connect.facebook.net/en_US/all.js">< /script>
    < script>
    FB.init({ 
    appId:'YOUR_APP_ID', cookie:true, 
    status:true, xfbml:true 
    });
    < /script>
    < fb:login-button>Login with Facebook< /fb:login-button> 
    


    Jij beslist welke informatie je nodig hebt. Met bovenstaand script vraag je eigenlijk naar alle basisgegevens zoals naam, geslacht en profielfoto. Maar het kan ook precieser:

    < fb:login-button perms="email">Login with Facebook< /fb:login-button>


    Hier vraag je om het e-mailadres. Dit behoort niet tot de basisgegevens en moet daarom specifiek aangevraagd worden.

    Hier kan je de volledige lijst met permissions nalezen.

    Eens je toegang hebt tot de gegevens, kun je ze plaatsen waar je wil. En daarmee bedoel ik zowel op je website, als in de databank. Er is wel een uitzondering. FB laat niet toe de profielfoto lokaal te bewaren (again, privacyschennis). Maar je kunt er wel rechtstreeks naar linken via de FacebookId. Je slaat met andere woorden enkel de FacebookId op, en niet de profielfoto.

    < fb:profile-pic uid='VUL HIER DE FACEBOOK ID IN'>< /fb:profile-pic>


    Ziezo, je kan dit alles testen door hieronder een boodschap achter te laten. Vergeet niet om de FB login-button te gebruiken!