SÄ hÀr lÀgger du till Facebook Like Box / Fan Box i WordPress

Facebook like box / fan box widget settings

Facebook-liknande lĂ„da, Ă€ven kĂ€nd som Facebook-fanbox, har blivit ett mĂ„ste-element för mĂ„nga webbplatser. Det gör det möjligt för webbplatsĂ€gare att ge sina anvĂ€ndare ett enkelt sĂ€tt att gĂ„ med i deras facebook-community och fĂ„ uppdateringar direkt i deras Facebook-nyhetsflöde. Nyligen uppmĂ€rksammade en av vĂ„ra anvĂ€ndare att vi inte har tĂ€ckt Ă€mnet för hur man lĂ€gger till Facebook som rutan i WordPress. Även om vi har beskrivit hur man lĂ€gger till Facebook-liknande-knappen, facebook-skicka-knappen och facebook-kommentarer. I den hĂ€r artikeln kommer vi att visa dig hur du lĂ€gger till Facebook-fan-rutan i WordPress.

LÀgga till Like Box med hjÀlp av det officiella Facebook-plugin-programmet för WordPress

Kanske Àr det enklaste sÀttet att lÀgga till en Facebook-liknande ruta till din WordPress-webbplats genom att anvÀnda det officiella Facebook-plugin-programmet för WordPress. Det första du behöver göra Àr att installera och aktivera Facebook-plugin. Efter att ha aktiverat plugin, gÄ till Utseende »Widgets. Dra och slÀpp bara widgeten Facebook som rutan till din sidofÀlt. Du mÄste ange webbadressen till din Facebook-fansida i widgetkonfigurationerna.

Widgeten har samma alternativ som Facebook-sociala plugins för webbplatser. Du kan vÀlja att visa en ström, visa ansikten, ta bort rubrik, Àndra kantfÀrg. Det finns för nÀrvarande endast tvÄ teman tillgÀngliga ljusa och mörka.

LÀgg till like Box manuellt utan att anvÀnda nÄgot plugin

Det Àr möjligt att lÀgga till Facebook som rutan manuellt utan att anvÀnda nÄgot plugin. GÄ till sidan Facebook Social Plugins Like Box-sida. Ange webbadressen till din Facebook-sida och konfigurera utseendet pÄ liknande rutan.

Att fÄ koden för att manuellt lÀgga till Facebook som rutan i WordPress

tryck pÄ HÀmta kod -knappen för att fÄ gilla rutan kod.

Facebook ger dig flera sÀtt att lÀgga till liknande rutan pÄ din webbplats. Du kan vÀlja mellan HTML5, XFBML och iframe. Vi visar hur du lÀgger till var och en av dem men du mÄste vÀlja en. Enligt vÄr mening Àr HTML5 ett rimligt bra alternativ för de flesta WordPress-drivna webbplatser. XFBML Àr bra för personer som anvÀnder andra Facebook-plugins som anvÀnder XFBML för att visa Facebook-knappar. AnvÀnd iframe om de tvÄ första alternativen inte fungerar för dig.

Facebook-liknande-rutan finns i flera kodformat

LĂ€gga till HTML5 Facebook Like Box-kod i WordPress

Klicka pÄ HTML5-fliken frÄn kodfönstret och kopiera den första delen av koden. De rekommenderar att du klistrar in det direkt efter -taggen som vanligtvis finns i din header.php-fil. Det kommer dock att fungera var som helst i kroppen. För att göra det enkelt för dig sjÀlv kan du helt enkelt lÀgga till det i sidfoten genom att anvÀnda plugin för infoga sidhuvuden och sidfötter. Den första delen av koden skulle se ut sÄ hÀr:


<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Detta javascript ansluter din webbplats till Facebooks javascript-bibliotek. Kopiera nu den andra delen av koden som ser ut sÄ hÀr:


<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Denna del av koden berÀttar det javaskript som du laddade tidigare för att visa liknande rutan pÄ den hÀr platsen och med dessa parametrar. För detta exempel kommer vi att klistra in den hÀr koden i sidofÀltets widgets. GÄ till Utseende »Widgets. Dra och slÀpp en textwidget till sidofÀltet och klistra in koden i den. Spara din widget och kolla din webbplats.

Detta fungerar ocksÄ i alla andra delar av din webbplats. Om du Àr skicklig med kod kan du klistra in den i sidfoten, efter inlÀgg etc.

Glöm inte att Àndra webbadressen till Facebook-fansidan till din egen webbadress.

LĂ€gga till XFBML Facebook Like Box Code i WordPress

Klicka pÄ XFBML-fliken för att fÄ koden för XFBML Facebook-liknande rutan. För att lÀgga till en XFBML Facebook Like Box mÄste du lÀgga till tre smÄ kodbitar i WordPress.

Kopiera den första koden och klistra in den i ditt temas header.php-fil direkt efter -taggen. PÄ samma sÀtt som den sista kommer den hÀr koden att fungera var som helst i kroppen. För att göra det enkelt för dig sjÀlv kan du helt enkelt lÀgga till det i sidfoten genom att anvÀnda plugin för infoga sidhuvuden och sidfötter. Den hÀr koden vill ha nÄgot liknande:


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Denna lilla javascript-funktion ansluter din webbplats till Facebooks javascript-bibliotek.

Den andra kodraden Àr en XML-namnomrÄdedeklaration och du mÄste lÀgga till den i -taggen pÄ din webbplats. Det enklaste sÀttet Àr att öppna ditt temas funktioner.php-fil, klistra in följande kod:


//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

Slutligen kopiera den tredje raden kod som ser nÄgot ut sÄ hÀr:


<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

Den hÀr koden berÀttar det javaskript som du laddade in i det första steget, för att visa liknande ruta pÄ den hÀr platsen och med dessa parametrar. GÄ till Utseende »Widgets. Dra och slÀpp en textwidget till sidofÀltet och klistra in den tredje kodraden i den textwidgeten. Spara dina Àndringar och förhandsgranska din webbplats.

LĂ€gga till Facebook-uppdatering iframe i WordPress

Klicka pĂ„ IFRAME-fliken för att kopiera iframe-koden. GĂ„ till Utseende »Widgets och dra och slĂ€pp en textwidget till sidofĂ€ltet. Klistra in iframe-koden i textwidgeten och spara Ă€ndringarna. Öppna din webbplats för att förhandsgranska Facebook-fanboxen.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till Facebook Like-rutan / Fan-rutan pÄ din WordPress-webbplats. För frÄgor och feedback vÀnligen lÀmna en kommentar. Du kan ocksÄ följa oss pÄ Facebook.