Facebook Like Box Widget for WordPress

Hvis nettstedet ditt har en Facebook-side, er det en god idé å markedsføre dette til leserne dine ved å vise en Facebook-boks på siden av bloggen.

I denne opplæringen skal vi lage en WordPress-widget som viser din Facebook-boks. Med denne WordPress-widgeten får du muligheten til å vise boksens topptekst, vise de nyeste fansen og vise din nyeste Facebook-strøm.


Facebook Sider

Facebook Sider har eksistert en stund nå, og de har nylig blitt konvertert for å bruke den nye tidslinjefunksjonen for å gi enda mer eksponering til dine tidligere innlegg på profilen din.

En Facebook-side er den samme som en personlig side, men du kan ikke venn andre, dette er fordi Facebook Pages er for bedrifter å koble til sine kunder.

Facebook Sider gir deg et mer dynamisk forhold til de offentlige figurene og organisasjonene du er interessert i.

Hvis du har din egen virksomhet, kan du også lage din egen Facebook-side.


Facebook Like Box

En Facebook-boks er en sosial plugin som gjør at Facebook-eiere kan vise en lignende knapp og en statusstrøm på egen nettside.

Den samme boksen betyr at besøkende på nettstedet ditt kan:

  • Se hvor mange personer som siden og hvilken av vennene deres som denne siden.
  • Se de siste statusoppdateringene dine.
  • Liker din Facebook-side uten å forlate nettstedet ditt.

Her er et eksempel på Wptuts + 's Facebook like boks.

For å lage en Facebook Like Box for Facebook-siden din må du registrere en Facebook-app for å kunne bruke Facebook-åpen graf-API.

Nå ser du hvordan Facebook-boksen er, kan vi forstå hvordan du gjør dette til en WordPress-widget.


WordPress Widgets

Før vi begynner å koding widgeten, må vi forstå hva en WordPress-widget er, og hvordan vi kan bruke WordPress Widget API for å enkelt lage WordPress-widgets.

En WordPress-widget er et stykke PHP-kode som vil løpe inne i et WordPress-sidebjelke.

Et WordPress sidebar er et registrert område i ditt tema der du kan legge til WordPress-widgets.

WordPress-widgets kan enkelt legges til sidelinjer ved å gå til Widget-siden i Dashboard og navigere til Utseende -> Widgets. Fra denne Widgets-siden kan du dra og slippe widgets i et sidebar etter eget valg. Widgeten bør ha en form for Admin-skjema, slik at du kan redigere dataene som vises av widgeten.


WordPress WP_Widget

Å opprette en WordPress-widget alt du trenger å gjøre er å arve fra standarden WP_Widget klasse og bruk noen av sine funksjoner.

Det er tre hovedfunksjoner som må brukes til widgeten for å fungere disse funksjonene er form (), widget () og Oppdater().

De WP_Widget klassen ligger i wp-includes / widgets.php.


WordPress Starter Widget

Nedenfor er boilerplate av en WordPress-widget, når du lager en ny widget, bare kopier og lim inn underkoden som utgangspunkt for widgeten din.

 / ** * Legger til Foo_Widget-widgeten. * / klasse Foo_Widget utvider WP_Widget / ** * Register widget med WordPress. * / offentlig funksjon __construct () foreldre :: __ construct ('foo_widget', // Base ID 'Foo_Widget', // Navn array ('description' => __ ('En Foo Widget', 'text_domain')) / Args);  / ** * Front-end-visning av widgeten. * * @see WP_Widget :: widget () * * @param array $ args Widget argumenter. * @param array $ instance Lagrede verdier fra database. * / offentlig funksjon widget ($ args, $ forekomst) ekstrakt ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); ekko $ before_widget; hvis (! tomt ($ tittel)) ekko $ before_title. $ tittel. $ After_title; ?> Hei, Verden! 


Opprette Facebook Like Box Widget

Vi skal lage en WordPress-widget som lar deg enkelt legge til og endre en Facebook-boks på WordPress-bloggen din.

Fordelen med å bruke en widget er for fleksibiliteten den gir deg. Valget du har på din Facebook-boks gjør det mulig å fullstendig endre funksjonaliteten bare ved å plassere forskjellige attributter i liknende boks.

Facebook-boksen har følgende egenskaper:

  • data-href - Nettadressen til Facebook-siden din.
  • data-bredde - Bredden på den samme boksen.
  • data-vis-ansikter - En ekte eller falsk verdi som bestemmer om du vil vise folk som liker siden din.
  • data strøm - En ekte eller falsk verdi som bestemmer om du vil vise de nyeste statusoppdateringene.
  • data-header - En sann eller falsk verdi som bestemmer om du vil vise finner oss på Facebook-baren.

Dette er alternativene vi trenger for å sikre at brukeren kan endre seg på widgetens administrasjonsskjerm, slik at de kan endre utseendet til den samme boksen direkte i WordPress dashboard.

Nå vet vi hva du kan forvente fra Facebook-boksen, så kan vi begynne å kode.

Facebook Widget Constructor

Først skal vi registrere widgeten på widget_init handling.

 / * * Plugin Navn: Paulund Facebook Like Box * Plugin URI: http://www.paulund.co.uk * Beskrivelse: En widget som en facebook som boks for nettstedet ditt * Versjon: 1.0 * Forfatter: Paul Underwood * Forfatter URI : http://www.paulund.co.uk * Lisens: GPL2 Copyright 2012 Paul Underwood Dette programmet er gratis programvare; Du kan omfordele den og / eller endre den under vilkårene i GNU General Public License, versjon 2, som publisert av Free Software Foundation. Dette programmet distribueres i håp om at det vil være nyttig, men UTEN NOGEN GARANTI; uten selv den underforståtte garantien om SALGBARHET eller EGNETHET TIL ET BESTEMT FORMÅL. Se GNU General Public License for mer informasjon. * / / ** * Registrer Widget * / add_action ('widgets_init', create_function (", 'register_widget (" pu_facebook_widget ");'));

De register_widget funksjonen vil ringe til pu_facebook_widget klasse. I konstruktøren kan vi lage widgeten ved å passere gjennom argumenter til WP_Widget konstruktør.

 / ** * Lag widget-klassen og strekk fra WP_Widget * / class pu_facebook_widget utvider WP_Widget / ** * Register widget med WordPress. * / offentlig funksjon __construct () foreldre :: __ construct ('pu_facebook_widget', // Base ID 'Facebook Like Box', // Navn array ('classname' => 'pu_facebook_widget', 'description' => __ widget som viser en facebook-boks fra din facebook-side. ',' rammeverk ')));  // endekonstruktør

Widget Funksjon

Widgetfunksjonen kalles for å utføre widgeten i sidefeltet. Det er her vi må samle datainngangen fra brukeren på dashbordet og vise widgeten på nettstedet.

Bruk følgende funksjon for å vise din Facebook-boks.

 / ** * Front-end visning av widget. * * @see WP_Widget :: widget () * * @param array $ args Widget argumenter. * @param array $ instance Lagrede verdier fra database. * / offentlig funksjon widget ($ args, $ forekomst) ekstrakt ($ args); / * Våre variabler fra widgetinnstillingene. * / $ this-> widget_title = apply_filters ('widget_title', $ instance ['title']); $ this-> facebook_id = $ instance ['app_id']; $ this-> facebook_username = $ instance ['page_name']; $ this-> facebook_width = $ instance ['width']; $ this-> facebook_show_faces = ($ instance ['show_faces'] == "1"? "true": "false"); $ this-> facebook_stream = ($ instance ['show_stream'] == "1"? "true": "false"); $ this-> facebook_header = ($ instance ['show_header'] == "1"? "true": "false"); add_action ('wp_footer', array (& $ dette, 'add_js')); / * Vis widgettittelen hvis en ble lagt inn (før og etter definert av temaer). * / hvis ($ this-> widget_title) echo $ this-> widget_title; / * Like Box * /?> 

Du har kanskje lagt merke til at vi legger til en handling for wp_footer å kjøre funksjonen add_js. Det er her du må legge til Facebook JavaScript for å få den samme boksen for å fungere riktig.

 / ** * Legg til Facebook javascripts * / public function add_js () echo '
';

Oppdater Funksjon

Oppdateringsfunksjonen brukes til å oppdatere WordPress-databasen når widgetadministrasjonsskjemaet er sendt inn.

Det er her du må legge til eventuell validering som trengs på verdiene fra skjemaet. Dette tar 2 parametere, en rekke verdier som sendes for å bli lagret, og en rekke verdier som for øyeblikket er lagret. Retur av denne funksjonen er de nye verdiene som er lagret i databasen.

 / ** * Sanitize widget skjema verdier som de er lagret. * * @see WP_Widget :: oppdatering () * * @param array $ new_instance Verdier bare sendt for å bli lagret. * @param array $ old_instance Tidligere lagrede verdier fra database. * * @return array Oppdaterte sikre verdier som skal lagres. * / funksjon oppdatering ($ new_instance, $ old_instance) $ instance = $ old_instance; / * Stripetiketter for tittel og navn for å fjerne HTML (viktig for tekstinnganger). * / $ forekomst ['title'] = strip_tags ($ new_instance ['title']); $ instance ['app_id'] = strip_tags ($ new_instance ['app_id']); $ instance ['page_name'] = strip_tags ($ new_instance ['page_name']); $ instance ['width'] = strip_tags ($ new_instance ['width']); $ instance ['show_faces'] = (bool) $ new_instance ['show_faces']; $ instance ['show_stream'] = (bool) $ new_instance ['show_stream']; $ instance ['show_header'] = (bool) $ new_instance ['show_header']; returner $ instance; 

Form Funksjon

Skjemafunksjonen brukes til å lage skjemaet på widgetens dashbord. Dette må pre-populeres med gjeldende verdier i databasen og gjøre det enkelt for brukeren å endre verdiene for å endre widgetens oppførsel.

 / ** * Lag skjemaet for Widget admin * * @see WP_Widget :: form () * * @param array $ instance Tidligere lagrede verdier fra database. * / funksjonsskjema ($ forekomst) / * Konfigurer noen standard widgetinnstillinger. * / $ standard = array ('title' => $ this-> widget_title, 'app_id' => $ this-> facebook_id, 'page_name' => $ this-> facebook_username, 'width' => $ this-> facebook_width , 'show_faces' => $ this-> facebook_show_faces, 'show_stream' => $ this-> facebook_stream, 'show_header' => $ this-> facebook_header); $ instance = wp_parse_args ((array) $ forekomst, $ standardverdier); ?>  

/>

/>

/>

Du trenger ikke å legge til en sende-knapp, da WordPress automatisk legger til det for deg.


nedlasting

Det er alt du trenger for å lage et WordPress-plugin som lager en widget for å vise din Facebook-lignende side. Alt du trenger å gjøre nå, er å installere pluginet, aktivere det, legge til widgeten i et sidebjelke og fyll ut skjemaet med sidedetaljer.

Du kan laste ned dette pluginet fra WordPress.org: Last ned Facebook Like Box Plugin