Facebook-reacties toevoegen aan uw WordPress-thema

Facebook heeft de sociale plug-ins voor ontwikkelaars in 2010 gelanceerd. U kent er allemaal minstens één, de "like" -knop die u op veel blogposts op het net ziet (zoals deze, excuseer de woordspeling!). Vandaag concentreren we ons op het Comments Box-systeem. Door Facebookcommentaar toe te voegen, kan de gebruiker commentaar geven op je blog via zijn Facebook-account. Het is niet nodig dat hij zijn naam en e-mailadres opgeeft of zelfs een account op uw site registreert.


De voordelen van het toevoegen van opmerkingen via Facebook

Ik zal niet te hard pushen of je deze functie eigenlijk wel nodig hebt op je eigen blog. Elke site heeft zijn eigen prioriteiten en best practices. Maar laten we omwille van het argument eens kijken naar de voordelen van het toevoegen van Facebook-opmerkingen aan uw WordPress-site.

Hier is een lijst met functies:

  • Facebook-melding voor likes / reacties op reacties
  • Opmerkingen kunnen met één klik op de Facebook-muur worden geplaatst
  • Antwoorden op de opmerking op de muur worden ook op uw site weergegeven
  • Gebruikersauthenticatie via Facebook of services zoals Yahoo !, AOL en Hotmail
  • Grammatica filter (voegt interpunctie toe, trimt extra witruimte, repareert veel voorkomende grammaticale fouten etc.)
  • Minder trollen, meer discussie

Hoe werkt het?

Als een gebruiker een bericht met Facebook Comments op de pagina opent, controleert het script of de gebruiker op Facebook is ingelogd. Dit gebeurt in een iframe, dus er worden geen gegevens daadwerkelijk naar uw server verzonden. De enige informatie die het script op uw website nodig heeft, is een Facebook-app-ID en de volledige URL van het bericht. Met de app-ID controleert Facebook of de gebruiker reacties mag modereren of instellingen voor het opmerkingenvenster kan wijzigen. De URL wordt gebruikt om de reacties op de Facebook-servers te lokaliseren. Als de gebruiker niet op Facebook is ingelogd, kan hij rechtstreeks inloggen in het opmerkingenvenster.

Laten we nu het vak met opmerkingen toevoegen aan uw thema.


Maak een Facebook-app

Als u een vak Facebook-opmerkingen wilt toevoegen, moet u eerst een Facebook-app maken. Ga naar https://developers.facebook.com/apps/ en maak een nieuwe app. Voer een naam in en definieer de landinstelling voor de app. De naam is niet cruciaal, omdat deze niet op de website verschijnt. Zorg er wel voor dat je de app later kunt identificeren, als je meerdere websites hebt waarop reacties op Facebook zijn ingeschakeld.

Nu ziet u een overzicht van uw applicatie. U kunt de naam, locale en andere informatie wijzigen. Omdat de applicatie niet in de App Directory zal worden gepubliceerd, hoeft u de andere velden niet in te vullen. Belangrijk is het App-ID die je bovenaan de pagina kunt vinden. We hebben de ID later nodig wanneer de code aan het thema wordt toegevoegd.

De persoon die de app heeft gemaakt, is beheerder en kan daarom standaard opmerkingen modereren. Klik op om een ​​andere beheerder toe te voegen Rollen op de linker site. U moet vrienden zijn met de persoon waaraan u de beheerdersrol wilt toewijzen.

Het is ook noodzakelijk om de site-URL en het domein te configureren. Klik op Web in het linkernavigatievenster en typ de volledige URL van uw blog als Site-URL. De domeinnaam is de basis-URL. Bijvoorbeeld: als uw blog wordt gehost bij http: //somecooldomainname.tld/mike/my-blog, het hele ding zou de Site-URL en zijn somecooldomainname.tld is het domein zelf.


Voeg de code toe aan uw thema

Het toevoegen van de opmerkingen duurt slechts 4 regels code.

De app-ID toevoegen

U moet de Facebook-app-ID toevoegen aan uw header.php bestand binnen de label. En je moet vervangen 'UW APP ID' met de ID van uw nieuw gemaakte toepassing.

 

Hier is een voorbeeld van de .

    <?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?>  

Zoals u kunt zien, is de app-ID direct na de karakterset in het kopgedeelte toegevoegd.

Het vak Opmerkingen maken

Laten we eerst de code zien.

 

De JavaScript-aanroep op de tweede regel bevat hierin een locale referentie (en_US). Als u wilt dat uw opmerkingenvak in een andere taal verschijnt, kunt u de URL wijzigen. Bijvoorbeeld http://connect.facebook.net/de_DE/all.js is voor de Duitse interface. Ik vond ook fr_FR en es_ES voor Frankrijk en Spaans om te werken. Als je wilt zien of een andere taal wordt ondersteund, open dan de link http://connect.facebook.net/de_DE/all.js in een nieuw venster en verander de locale in de URL. U ontvangt een foutmelding als de locale niet wordt ondersteund.

Het etiket fb: commentaar in de derde regel vertelt het vak 'Opmerkingen' om alleen de opmerkingen voor de gedefinieerde URL weer te geven. De WordPress-functie gebruiken the_permalink () stelt ons in staat om dynamisch de juiste URL voor elke post toe te wijzen. Als u een vaste URL gebruikt, ziet u dezelfde opmerkingen over elke post / pagina. Gewoon voor de lol, probeer "http: // localhost" als URL. U ontvangt van Facebook een foutmelding dat de pagina niet toegankelijk is, maar deze zal nog steeds werken. En zoals u ziet, zijn er opmerkingen van andere ontwikkelaars die dezelfde URL gebruikten om te testen.

U moet ook de optie wijzigen breedte (in px) om bij uw thema te passen. Deze optie definieert de breedte van het hele commentaarvak. Er is een andere optie genaamd NUM_POSTS. Hiermee kunt u definiëren hoeveel opmerkingen standaard worden weergegeven. Als er meer reacties zijn dan gedefinieerd in NUM_POSTS, het toont een link om meer te tonen.

Het opmerkingenveld plaatsen

Het is het gemakkelijkst om het te wijzigen comments.php. Natuurlijk is dit in elk thema anders, dus volg gewoon de basisregels.

Toon alleen de opmerkingen als:

  • De post / pagina is niet met een wachtwoord beveiligd of het juiste wachtwoord is ingevoerd
  • Reacties zijn toegestaan ​​in de post / pagina

Ik wijzigde het comments.php bestand van het standaardthema "Twenty Ten" als voorbeeld:

 

Zoals u kunt zien, tonen we alleen het opmerkingenvenster als er geen wachtwoordbeveiliging is of als de post openbaar is (regel 9). Als de opmerkingen zijn gesloten, wordt een passend bericht weergegeven.


Laten we eens kijken

Dit is het standaardthema met Facebook-opmerkingen ingeschakeld.

U ziet een foutmelding boven de eerste opmerking. Het bleek dat ik via mijn lokale webserver het opmerkingenvenster opbelde http: // localhost / wordpress / p = 1 en Facebook kan er geen verbinding mee maken. Dus, hoe ziet het er online uit? Dit is de weergave voor een beheerder.

Als u de schermafbeelding vergelijkt met de bovenstaande ziet u extra opties. Hoewel ik als "ik" werd herkend toen ik de pagina van mijn lokale server opende, kon Facebook de site zelf niet bereiken. Nu het online is en Facebook de pagina daadwerkelijk kan bereiken, heb ik toegang tot de beheeropties om reacties te modereren en instellingen te wijzigen. De opmerkingen kunnen worden gemodereerd op elke berichtpagina of alle opmerkingen in één keer hier http://developers.facebook.com/tools/comments.

Op de pagina met instellingen kunt u bepalen of opmerkingen voor iedereen meteen zichtbaar zijn of dat u ze eerst wilt controleren. U kunt ook een zwarte lijst maken voor slechte woorden, aanmelden via externe provider toestaan ​​(zie hieronder) en een eenvoudige spellingcorrectie inschakelen.

Als een gebruiker die geen beheerder is naar de opmerkingen kijkt, ziet hij het volgende:

Als u besluit de opmerking aan uw muur te plaatsen, wordt deze als volgt weergegeven:

Er moet een open Facebook-sessie zijn om de gebruiker te authenticeren. Als de gebruiker niet is aangemeld, kan hij zich aanmelden bij Facebook of een andere service gebruiken (Yahoo !, AOL of Hotmail) om zichzelf te verifiëren.

Zoals ik al zei, is het toestaan ​​van services van derden voor authenticatie optioneel en kan worden uitgeschakeld in de instellingen.


Geef het aantal reacties weer

Het aantal reacties wordt boven aan het vak Opmerkingen weergegeven, waar u ook kunt wijzigen in welke volgorde de opmerkingen moeten worden weergegeven. Het aantal reacties kan ook worden weergegeven met behulp van dit iframe.

 

Het geeft je de klassieke Facebook-tekstballon en de tekst $ n opmerkingen, het komt allemaal in Facebook blauw.

Als u de stijl van het aantal reacties wilt wijzigen, probeert u de methode:

 > comentarios

Dit zou moeten resulteren in een met het aantal reacties. Bijvoorbeeld $ n comentarios. Tot nu toe kon ik het aantal reacties echter niet op deze manier weergeven.

Bedankt voor het lezen en voel je vrij om vragen te stellen in de comments.

  • Meer informatie over sociale plug-ins op Facebook: http://developers.facebook.com/docs/plugins/
  • Aparte pagina om reacties te modereren http://developers.facebook.com/tools/comments