Social media buttons

Om je website te (laten) delen op andere website's is het makkelijk om bij een product, artikel of pagina een knop te hebben zodat de bezoeker dit makkelijk kan. Gratis publiciteit is natuurlijk nooit weg, en een plaatsing op een dergelijke website is ook goed voor de score in Google. Daarom zal ik laten zien hoe je een button kunt maken voor Facebook, Twitter en Hyves.

Facebook

Facebook heeft een like button. Deze kun je heel eenvoudig op je eigen website plaatst. Het is enkel een iframe die naar een pagina op Facebook.com staat linkt. Hierdoor hoef je geen code op je eigen website te plaatsen. De code ziet er als volgt uit:

  1. <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwwww.hier-jou-url-naar-een-pagina.nl&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

Voorbeeld

Op deze pagina kun je overigens zelf een knop aanmaken naar je eigen smaak.

Twitter

Ook Twitter heeft een soort van like knop, met als verschil dat je er zelf nog een bericht bij kan plaatsen. Ook hier is de code in een iframe geplaatst waardoor de feitelijke code niet op je eigen website staat, maar op die van Twitter. De code ziet er dan ook vrij simpel uit:

  1. <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="hier-jou-gebruikersnaam-invullen">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Voorbeeld

Twitter biedt ook een box aan waarin jouw laatste tweets op je eigen website te zien zijn. Een voorbeeld hiervan is aan de linkerkant van deze website te zien, met mijn tweets erin. Deze box is in javascript opgebouwd, maar laadt wel een extern javascript in. Hierdoor staat de code niet feitelijk op je eigen server. Verschil met de Facebook like button is dat je hier nog zelf het een en ander kan aanpassen, zoals de kleurstelling, breedte en het aantal getoonde berichten. De code is opgemaakt in een javascript object, en ziet er zo uit:

  1. <script src="http://widgets.twimg.com/j/2/widget.js"></script>
  2. <script>
  3. new TWTR.Widget({
  4.   version: 2,
  5.   type: 'profile',
  6.   rpp: 4,
  7.   interval: 6000,
  8.   width: 240,
  9.   height: 300,
  10.   theme: {
  11.     shell: {
  12.       background: '#fffaff',
  13.       color: '#00A614'
  14.     },
  15.     tweets: {
  16.       background: '#f0f0f0',
  17.       color: '#000000',
  18.       links: '#00A614'
  19.     }
  20.   },
  21.   features: {
  22.     scrollbar: false,
  23.     loop: false,
  24.     live: false,
  25.     hashtags: true,
  26.     timestamp: false,
  27.     avatars: false,
  28.     behavior: 'default'
  29.   }
  30. }).render().setUser('hier-jou-gebruikers-naam').start();
  31. </script>

Voorbeeld

Overigens is hiervoor ook weer een handige wizard beschikbaar.

Hyves

Voor hyves was er eerder geen officiële like knop of iets dergelijks beschikbaar, maar sinds kort hebben zij dit ook. Deze werkt bijna hetzelfde als die van Facebook, ook in een iframe:

  1. <iframe src="http://www.hyves.nl/respect/button?url=http://www.link-naar-jou-url.nl&icon=1" style="border: medium none; overflow:hidden; width:150px; height:21px;" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>

voorbeeld

Overigens heeft Hyves nog een heleboel voorbeelden beschikbaar. Zie daarvoor deze pagina.

LinkedIn

En ook LinkedIn heeft een share button beschikbaar, die erg veel gelijkenis vertoond met die van Twitter:

  1. <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>

Voorbeeld

Te moeilijk?

Dan kun je ook gaan voor de addThis button. Deze heeft als voordeel dat er ook gemeten kan worden hoe vaak er een pagina gedeeld wordt met de rest van de wereld. Ook zijn hier (bijna) alle sociale netwerken hierin vertegenwoordigd, waardoor deze bijna altijd door de gebruiker gedeeld kan worden.