FRED's blaBlog

article : How to protect your visitors' privacy and still enjoy Facebook's benefits

< Suivant  -  Précédent >     [Fermer]

There's been, for the last few weeks, a most deserved buzz against Facebook's compromising and marchandising of our privacy. The most worrysome point being those "like" or equivalent buttons webmasters can put on their website, that directly spy on their visitors and track them from site to site, building whole profiles of them, regardless of whether those visitors are facebook members or not.

There's been many articles already about what measures internet users can take against Facebook spying on them. There have also been numerous articles on the many dangers such abuses of personnal data can cause to individuals and democracy. Other articles have already explained the technical aspects of Facebook's snooping, so I won't go into that either.

Teaching visitors to protect themselves is a very good thing of course, but as an amateur web developer, I would like to share my way of benefitting from the possibility of online buzz social platforms such as Facebook provide without comprimising the privacy of my visitors - that is, those of my visitors who are not members of Facebook, or are members of Facebook but don't click the "like" button (or "share" or "recommend" or whatever) and so might expect not to be seen by Facebook while surfing my site.

Let's remind a simple principle here: by default, as a visitor, when you see a website, that website sees you. And as a web designer, when displaying a Facebook button on your page, what you actually do is display content provided by Facebook. You don't display the button on your page, Facebook does. "Like", "Share" or "recommend" buttons on a given web page are like a hole in that page, through which, as soon as visitors see it, Facebook can see them too.

So the trick is not to let anything be displayed on your page that comes from Facebook's servers... Here's how to achieve that :

Display your own link to Facebook. It can be a text link saying "Share on Facebook", for example, or an image of a Facebook button or logo you will easily find with a quick web image search. That link or button (which is then yours, not Facebook's, even though you can make it look like Facebook's), will link to the URL of Facebook's post form.

Only visitors who actually click on that button or follow that text link will be directed to a Facebook address, which will indeed spy on them. And the ones who don't click your button or follow your link will never be seen surfing your site by Facebook.

This is like saying to Facebook: don't call us, we'll call you. In addition to protecting your visitors' privacy, you'll also limit Facebook's ability to build stats about your website.

Also, if we, web developers, join the resistance against Facebook's appetites, we might help limiting the average net user's paranoia. For if every user in the world starts masking his/her request headers to keep Facebook from spying on them, we web developers will also be penalized by not being able to retrieve basic info about our visitors even through transparent and legitimate visitor stat tools. (By the way: Google Analytics is not one of those legitimate and transparent tools ! What it does is first sending Google all data about both you and your visitors, and then, and only then, Google sends you back the data in a readable, useful form. But you can get exactly the same service from an open-source analytics tools, which is as easy to install on your server as embedding Google's javacript into your code, and which will retain all retrieved data within your server and never send it elsewhere. I personally use Piwik, which also allows you to provide visitors with an "opt out" button so they can choose not to be tracked even by you.)

Enough chatter, here is how to do this.

The syntax of the URL a Facebook "share" button links to is this:

in which YOURURL is the url of the page to share.

So all you have to do is link your Facebook-looking button to that address.

Don't forget to rawurlencode(YOURURL) if it contains any non-legacy standard character. A raw url encode means spelling my webpage.htm as my%20webpage.htm, for example.

(Note that this also provides you with a new possibility: you can specify an URL other than that of the page the button or link is actually placed on -- I'll leave you sole judge of whether there's a reason for doing that.)

It works just as well, except the only feature you won't have access to anymore is the (optional) counter next to the button: that's because only Facebook knows the share count -or like count- of your webpage, so only them could display it. If you don't display anything from Facebook on your page, which is exactly the point here, then you can't display that counter.

Note that, even though the big buzz today is about Facebook, this is more or less true of every centralized social platform, such as Google+ and many others.

I'll share here the link syntax for the few social networks I've experimented with already :



Pinterest: (Haven't thoroughy tested this one - but I guess is_video=true should be used in certain cases)

Note that you must rawurlencode() every value represented by all-uppercase symbols in every example here.

The last example is interesting, because you can see that, in addition to the URL to your page, you can specify a direct link to the image that will represent your page on Pinterest, as well as a text description that will display next to it.

To Facebook too, you can provide a thumbnail image, a title and a brief description. But you don't do it thought the request. Instead, you must place those in the <head> section of your HTML page (the page YOURURL refers to) in the form of meta tags whereof properties all start with "OG:", for Open Graph. Here are the fields I complete, personally:

      <meta property="og:title" content="YOURPAGETITLE">
      <meta property="og:site_name" content="YOURSITENAME">
      <meta property="og:type" content="YOURSITEGENRE">
      <meta property="og:url" content="YOURURL"> (same as YOURURL above)
      <meta property="og:description" content="YOURSHORTDESCRIPTION">
      <meta property="og:image" content="YOURTHUMBNAILURL">

Note that none of these fields are mandatory. If you don't provide them, Facebook will analyze your page and try to derive them automatically when a share is requested (and not before). I can only encourage you to learn the full syntax from Facebook's tech pages. Also, if for debugging purpose you need to see what Facebook sees when your page is shared, enter your page's URL in Facebook's debugger. It will also have the effect of clearing Facebook's cache of anything it might remember from previous shares (this too is useful for debugging purposes).

Also, note that these last few paragraphs explain a common practice, not exclusive to protecting privacy. This is also part of the more common ass-spying method.

A last word: I did't invent any of this. I copied these tricks from the HTML source of other websites already using them. (You can see an example of my own implementation in this photo blog).

That's all. I hope I have contributed.

EDIT: Moreover, this method will keep the Facebook link on your page from being discarded by anti-snooping browser add-ons. Quite legitimately too, since it won't be snooping.

P.S.: The visitor-side equivalent of this precaution would be: use a web browser extension/plugin/add-on or any other mean to block Facebook's buttons from displaying, and then, when you want to share some link, just copy its address directly onto your Facebook wall.

12 JULY 2013

0 commentaire(s) - ajouter un commentaire
[Thèmes : technical - computers - privacy - advice - webdev ]

Liste des articles :

21 DECEMBRE 2013   Voilà-t-y pas qu'on me menace sur Facebook... (0)
[Français]   [ société - Dieudonné ]
19 DECEMBRE 2013   Pourquoi j'aime bien Dieudonné (0)
[Français]   [ société - Dieudonné ]
12 JULY 2013   How to protect your visitors' privacy and still enjoy Facebook's benefits (0)
[English]   [ technical - computers - privacy - advice - webdev ]
1 JUILLET 2013   Conseils pour la protection de la vie privée en ligne (4)
[Français]   [ technique - informatique - vie privée - libertés - conseils ]
10 MAI 2013   Capitaine Flam en jazz (grille d'accords) (0)
[Français]   [ musique - partition ]
16 FEB 2013   Who Seeks Control over The Internet ? (0)
[English]   [ politics - censorship - internet - freedom ]
12 FEV 2013   Poème touffu (0)
[Français]   [ poésie - transcendance ]
13 JAN 2013   Nom de Dieu (suite) (0)
[Français]   [ langues - racisme - société - censure - internet ]
28 NOV 2012   Finished translating an Ingmar Bergman interview (0)
[English]   [ culture - movies - work - interview - translation ]
16 OCT 2012   Combat intérieur (0)
[Français]   [ société - (lien) ]
19 SEPT 2012   L'obsolescence, programmée ou non (0)
[Français]   [ économie - (lien) ]
31 AOUT 2012   Sois libre et tais-toi. (2)
[Français]   [ censure - racisme - société ]
16 MAI 2012   Nom de Dieu (1)
[Français]   [ langues - racisme - société ]
11 MAI 2012   Nouveau règlement de Paypal (1)
[Français]   [ business - libertés - liberté d'expression - société - censure ]
26 MAR. 2012   Access to The Pirate Bay from Belgium (1)
[English]   [ censorship - freedom - computers - technical ]
26 MARS 2012   Accès à Pirate Bay depuis la Belgique (1)
[Français]   [ technique - informatique - libertés - censure ]
23 MARS 2012   Bazarder nos acquis sociaux ne sert à rien (0)
[Français]   [ politique - économie - société - (lien) ]
13 MARS 2012   La véritable histoire de La Chèvre de M. Seguin (0)
[Français]   [ litterature ]
08 JUIN 2010   Petite sélection de Musique Acousmatique (0)
[Français]   [ art - culture - musique - m. contemporaine - m. électronique ]
06 JUIN 2010   Droit à la sécurité (suite...) (0)
[Français]   [ politique - société - histoire ]
05 JUIN 2010   Droit à la sécurité ? (0)
[Français]   [ politique - société ]
27 MAI 2010   Megapixels (0)
[Français]   [ technique - photo ]
27 MAI 2010   Petite sélection de Musique Contemporaine (0)
[Français]   [ art - culture - musique - m. classique - m. contemporaine ]
24 MAI 2010   Simenon et Maigret (0)
[Français]   [ art - culture - litterature - belge - société ]
01 NOV. 2007   La crise belge son côté sympa (0)
[Français]   [ politique - belge ]
DEC. 2005   Dentier vs. Tétine (0)
[Français]   [ art - culture - cinéma - film - société - censure ]
NOV. 2005   Vrijdag Visdag de Jan Bucquoy (1)
[Français]   [ art - culture - cinéma - film - belge - flamand - neérlandais - censure ]
  [FAQ : Frequently Asked Questions] (0)
[English]   [ legal - contact ]
  [FAQ : Foire Aux Questions] (0)
[Français]   [ légal - contact ]