Bescherm bezoekers

social javascript

Geschreven door: op

In dit artikel wil ik het hebben over het laden van javascript t.b.v. zogenaamde Like/Share buttons en/of links.

Indien je als frontend developer social sharing element(en) op een pagina wilt gebruiken is het na een simpele Google zoekopdracht eenvoudig te realiseren, namelijk:

Er zijn echter 2 grote nadelen wanneer je de standaard functionaliteit gebruikt welke door bovenstaande social platforms wordt aangeboden, namelijk:

  • http request(s) naar externe (javascript) bestanden (kost snelheid)
  • tracking van je bezoekers door de social platforms

HTTP Request
Iedere bestand welke op een pagina ingeladen wordt is 1 HTTP request. Voor de meeste websites geldt: hoe minder HTTP requests een pagina nodig heeft, des te sneller zal deze door de browser getoond worden.

Tracking
Met tracking wordt het volgen van bezoekers in dit geval bedoelt. Dit houdt in dat een social platform bij kan houden wat je bezoeker(s) doen, bijv. m.b.v. zgn. cookies. Veel mensen zijn hier niet van gediend vanwege privacy. Wanneer de standaard share functionaliteit op een website wordt gebruikt zorg je dus eigenlijk ook dat de social platforms je bezoekers kunnen volgen.

Oplossing
Je kan de deel funktionaliteit van de bekende social platforms ook zelf aanroepen d.m.v. specifieke url's te gebruiken. Hierdoor is het niet meer noodzakelijk om het javascript van de social platforms te gebruiken waardoor je site sneller is en tegelijkertijd rekening wordt gehouden met de privacy van de bezoekers. Dat heet een WIN-WIN!

Voor Facebook kan de volgende url gebruikt worden:

http://www.facebook.com/sharer/sharer.php?u=PAGINA-URL-HIER

Voor Twitter kan de volgende url gebruikt worden:

https://twitter.com/share?url=PAGINA-URL-HIER&via=WEBSITE-NAAM&text=KORTE-OMSCHRIJVING

Voor Google+ kan de volgende url gebruikt worden:

https://plus.google.com/share?url=PAGINA-URL-HIER

Voor LinkedIn kan de volgende url gebruikt worden:

http://www.linkedin.com/shareArticle?mini=true&url=PAGINA-URL-HIER&title=TITEL-VAN-DE-PAGINA&summary=KORTE-OMSCHRIJVING&source=NAAM-VAN-DE-WEBSITE

Nou wil je natuurlijk dat wanneer er op een 1 van bovenstaande buttons geklikt wordt dat de bezoeker een mooi venstertje voor zich krijgt waar de bezoeker zelf eventueel nog iets aan het bericht kan toevoegen. Dit venster forceren we m.b.v. Javascript. Dit kan zowel op een handige jQuery manier of d.m.v. inline javascript met een onclick attribuut. Persoonlijk ben ik voorstander van de jQuery methode. 

Jquery methode:

$(".likeThis a").on("click", function() {window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;})

Onclick attribuut:

<a href="#" onclick="window.open('http://www.facebook.com/sharer/sharer.php?u=PAGINA-URL,'facebook-share-dialog','width=600,height=300');return false;">Facebook share</a>

Kanttekening: wanneer je deze methode van delen gebruikt ontbreekt het aan sommige funktionaliteit welke vanuit de javascript van de social platforms komt, te weten bijvoorbeeld een teller.

Bescherm bezoekers

Trefwoorden:

Aantal keer bekeken: 4.100