Tips en tutorials voor beginners en gevorderde bloggers

Facebook like box op je Blogger blog

facebook like box Blogger

Nog niet eens zo heel lang geleden was het helemaal niet zo moeilijk om een Facebook Like Box op je Blogger blog te zetten. Je kopieerde de juiste code, en plakte die in een gadget. Maar toen vond Facebook dat het beter kon.

Helaas werd het ook moeilijker.

Maar het kan wel. En ik vertel je hoe! Maak je riemen vast, want het wordt een pittige rit!

Hoe plaats je een Facebook Like Box op je Blogger blog

N.B. inmiddels geeft Facebook de boel weer ‘verbeterd’. Onderaan deze post vind je de nieuwe methode!

1. Ga naar deze pagina: https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=en_GB

2. Vul de url van jouw Facebook fanpagina in. Dat is dus niet je persoonlijke Facebook pagina. Standaard staat er: https://www.facebook.com/FacebookDevelopers. Veranderd dat in het adres van jouw Facebook Fanpage. Vul bij width bijvoorbeeld 300 in en bij height 250. Maar je kunt ook voor kleiner of groter kiezen.

facebook like box op blogger

3. Kies of je gezichten wilt laten zien van volgers, of je nieuwste posts

4. Als je tevreden bent klik je op ‘Get Code’

5. Er zijn 3 mogelijke codes. Kies de iFrame code door er op te klikken.

iframe

6. Nou kan het zijn dat er iets staat dat de code nog niet ‘public’ is. In dat geval moet je dat eerst doen. Klik op Settings en zorg dat je Contact Email is ingevuld. Klik daar na op Status en review. Je ziet daar een button met de tekst: ‘Do you want to make this app and all its live features available to the general public?’ Verander de button van No in Yes.

7. Als stap 6 goed is gegaan is de code nu public. Maar nu moet je eerst nog een JavaScript installeren in je html code. Klik daarvoor op de link boven de iFrame code: ‘Initialize the JavaScript SDK’

8. Op de pagina die nu opent vind je de code. Kopieer die.

9. Ga naar je Blogger Dashboard en kies Template

10. Klik op Edit Html

11. Zoek <Body> en plak de code daar meteen achter. Klik op Save.

12. Hèhè! Nu zijn we er bijna. De rest is een makkie. Kopier nu de iframe code.

13. Ga naar je Blogger Dashboard, klik op Layout, klik op Add a Gadget, kies Html gadget en plak de code er in. Klik op Save.

14. Nu heb je een Facebook Like Box.

Samenvattend

Feitelijk zijn er 3 stappen die je moet doen om een Facebook Like Box op je Blogger blog te zetten.

  1. Eerst moet je de app ‘public’ maken
  2. Daarna moet je het Javascript installeren in de html code van je blog
  3. En het laatste is lekker makkelijk: je plakt de iFrame code in een gadget.

Op bijvoorbeeld Het Moederfront zie je de Facebook box in actie op een Blogger blog.

Facebook box op je Blogger blog april 2015

1. Ga naar je Blogger Dashboard

2. Kies Template

3. Klik op ‘Edit html’

4. Zoek:

<body

5. Plak meteen daar achter de volgende code:

<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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

6. Klik op Save

7. Ga naar Layout

8. Klik op Html gadget

9. Plak daarin deze code:

<div class="fb-page" data-href="<span style="color: #ff0000;">https://www.facebook.com/facebook</span>" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"></div>

Verander de rood gedrukte url in de url van je eigen Facebook fanpagina.

10. Klik op Save.

Leave a reply