For dem, der har fulgt Facebook F8-udviklerkonference, bør du vide, at Facebook CEO Mark Zuckerberg havde officielt lanceret Open Graph-protokollen og de sociale plugins. Bliver efterfølgerne af Facebook Connect, vil disse to ting ændre hele boldspil og bringe websocialiteten til et helt nyt niveau.

For dem, der stadig ikke er klar over, er den nye Open Graph-protokol og de sociale plugins sæt af værktøjer, som nyligt blev lanceret af Facebook, som giver dig mulighed for at integrere Facebook dybt ind i dit websted og gøre dit websted mere "omgængeligt". Ting som "Like" -knappen kan nu nemt tilføjes til din side og gøre det muligt for dine brugere at dele dit indhold i deres Facebook-konto.

Hvordan tilføjer jeg en "Like" -knap til mit websted? (Den nemme måde)

For at tilføje en "Like" -knap skal du blot indsætte følgende iframe-kode til en hvilken som helst del af siden (eller det sted, hvor du vil have det vist).

For at ændre indstillingen for "Like" -knappen, skal du gå til denne Facebook-lignende-knapside, tilpasse indstillingen, tage fat i iframe-koden og indsætte den på dit websted.

Alternativt kan du installere lignende plugin, som kan automatisere de fleste af de grundlæggende ting til dig.

Er det alt? Hvad hvis jeg vil have mere?

Du bad om det. Så her er du, metoden til at integrere Facebook dybt ind i dit websted (og gøre dit websted til en social graf).

Der er grundlæggende to måder at implementere Facebook sociale plugins på dit websted:

  1. iFrame
  2. Xfbml

Jeg vil anbefale at bruge XFBML, da det giver dig adgang til hele spektret af plugins. Den følgende metode vil blive udført ved hjælp af XFBML-protokollen.

1. Registrer en Facebook-app

Bare rolig, vi behøver ikke at lære programmering og piske op ad en annonce. Alt du skal gøre her er at tilmelde dig en Facebook-app (Kort sagt skal du blot udfylde en formular og indsende den).

Gå til Facebook Application Creation side og opret en app (du skal logge ind på din Facebook-konto).

Når applikationen er oprettet med succes, vil du se dit programdashboard. Indtast program-id'et (du bruger det senere).

2. Tilføjelse af brugerdefineret tag

Gå nu til din tema mappe, og åbn header.php filen. Skift tag til følgende:

 > 

3. Tilføjelse af brugerdefinerede metakoder til dit tag

Fortsæt i din header.php, tilføj følgende linje i mellem tagget.

Bemærk :

  • Husk at ændre alt CAPS-feltet til dit websted indstilling i metatags.
  • For at finde ud af, hvad der er din Facebook USER_ID, skal du gå til http://graph.facebook.com/your-username . Du vil se dit FB-bruger-id.

  • Tjek denne side for en fuldstændig forklaring af metatags og andre metatags, som du kan medtage

4. Tilføjelse af javascript sdk

For at gøre brug af XFBML skal vi tilføje javascript SDK til dit tag.

Tilføj følgende linjer lige efter tagget.

Nu skal du erstatte " DIN APP ID " med det applikations-id, du har oprettet lige nu.

5. Vælg de sociale plugins, du vil bruge

Gå til Facebook Social Plugins websted, du vil se en række værktøjer, som du kan implementere på dit websted.

Som knap : Vis en "Ligesom" -knap på dit websted. Det mest almindelige plugin.
Anbefalinger : Vis brugere personlige forslag til sider på dit websted, som de måske vil have.
Log ind med Faces : Tillad brugerne at tilmelde sig dit websted med deres Facebook-konto. det viser også en liste over brugerens venner, der også har tilmeldt dig dit websted.
Kommentarer : Tillad brugere at kommentere dit websted. Bemærkningerne vil også blive sendt tilbage til brugerne Facebook wall.
Aktivitets Feed : Viser brugere, hvad deres venner gør på dit websted gennem likes og kommentarer.
Som boks : Dette er tidligere kendt som fanboksen.
Facepile : Viser profilbilleder af brugerens venner, der allerede har tilmeldt dig dit websted.
Live Stream : Lader dine brugere dele aktivitet og kommentarer i realtid, da de interagerer under en live-begivenhed.

6. Konfigurer de sociale plugins

Vælg det sociale plugin, du vil bruge på dit websted. I dette eksempel vil jeg bruge "Like" -knappen, da den er den mest almindeligt anvendte blandt alle.

Klik på knappen Lignende knap

Konfigurer dine "Like" -knapindstillinger. Lad URL-feltet være tomt. Klik på " Få kode " knappen i slutningen for at hente kildekoden.

Fremhæv og kopier XFBML- koden

Indsæt det på stederne (enten i widgets-området eller single.php- filen), hvor du vil have "Like" -knappen vist.

Gør det samme for andre sociale plugins, som du bruger.

Det er det!

Implementering af sociale plugins i MakeTechEasier

"Ligesom" -knappen for hver indgang

Ligesom boks i sidepanelet

Anbefal boks i postfoden

Referencer

Her er nogle nyttige links til din reference:

  • Facebook OpenGraph-protokol
  • Facebook Javascript SDK
  • Facebook sociale plugins
  • Facebook Application Dashboard

Hvis du finder dette indlæg nyttigt, skal du ikke glemme at " lide " det og dele det med dine venner. Lad os vide i kommentarerne, hvordan har du brug for de sociale plugins på dit websted.