285 lines
27 KiB
HTML
285 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>YBlog - Être correct avec les boutons share</title>
|
||
<meta name="keywords" content="programming" />
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="../../../../Scratch/img/favicon.ico" />
|
||
<link rel="stylesheet" type="text/css" href="../../../../css/y.css" />
|
||
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<!-- IndieAuth -->
|
||
<link href="https://twitter.com/yogsototh" rel="me">
|
||
<link href="https://github.com/yogsototh" rel="me">
|
||
<link href="mailto:yann.esposito@gmail.com" rel="me">
|
||
<link rel="pgpkey" href="../../../../pubkey.txt">
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<div id="content">
|
||
<div id="header">
|
||
<div id="choix">
|
||
<span id="choixlang">
|
||
<a href="../../../../Scratch/en/blog/Social-link-the-right-way/">Anglais</a>
|
||
</span>
|
||
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
|
||
<span class="flush"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="titre">
|
||
<h1>Être correct avec les boutons share</h1>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
<div id="afterheader" class="article">
|
||
<div class="corps">
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Social-link-the-right-way/main.png" alt="Main image" />
|
||
</div>
|
||
<div class="intro">
|
||
<p><span class="sc"><abbr title="Trop long; pas lu">tlpl</abbr>: </span> Les boutons des réseaux sociaux traquent vos utilisateurs, ont un design incohérent avec celui de votre site, utilisent des ressources, ralentissent le rendu de vos pages.</p>
|
||
<p>Faite les choses bien. Utilisez des liens statiques.</p>
|
||
<p>Si vous n’avez pas envie de lire, copiez et collez simplement le code suivant dans votre <span class="sc"><abbr title="HyperText Markup Language">html</abbr></span> :</p>
|
||
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" title="1"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"sociallinks"</span><span class="kw">></span></a>
|
||
<a class="sourceLine" id="cb1-2" title="2"> <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://twitter.com/home?status=$url$"</span></a>
|
||
<a class="sourceLine" id="cb1-3" title="3"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb1-4" title="4"> <span class="kw">></span>Tweet this<span class="kw"></a></span> -</a>
|
||
<a class="sourceLine" id="cb1-5" title="5"> <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.facebook.com/sharer/sharer.php?u=$url$"</span></a>
|
||
<a class="sourceLine" id="cb1-6" title="6"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb1-7" title="7"> <span class="kw">></span>Like this<span class="kw"></a></span> -</a>
|
||
<a class="sourceLine" id="cb1-8" title="8"> <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://plus.google.com/share?url=$url$"</span></a>
|
||
<a class="sourceLine" id="cb1-9" title="9"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb1-10" title="10"> <span class="kw">></span>Share on G+<span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb1-11" title="11"><span class="kw"></div></span></a>
|
||
<a class="sourceLine" id="cb1-12" title="12"><span class="kw"><script></span></a>
|
||
<a class="sourceLine" id="cb1-13" title="13">(<span class="kw">function</span>()<span class="op">{</span><span class="va">window</span>.<span class="at">addEventListener</span>(<span class="st">"DOMContentLoaded"</span><span class="op">,</span><span class="kw">function</span>()<span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb1-14" title="14"> <span class="kw">var</span> url<span class="op">=</span><span class="va">document</span>.<span class="at">location</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb1-15" title="15"> <span class="kw">var</span> links<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">"sociallinks"</span>)</a>
|
||
<a class="sourceLine" id="cb1-16" title="16"> .<span class="at">getElementsByTagName</span>(<span class="st">'a'</span>)<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb1-17" title="17"> <span class="cf">for</span> (<span class="kw">var</span> i<span class="op">=</span><span class="dv">0</span><span class="op">;</span>i<span class="op">!=</span><span class="va">links</span>.<span class="at">length</span><span class="op">;</span>i<span class="op">++</span>)<span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb1-18" title="18"> links[i].<span class="at">setAttribute</span>(<span class="st">"href"</span><span class="op">,</span></a>
|
||
<a class="sourceLine" id="cb1-19" title="19"> links[i].<span class="va">href</span>.<span class="at">replace</span>(<span class="st">'$url$'</span><span class="op">,</span>url))<span class="op">;}}</span>)<span class="op">}</span>)()<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb1-20" title="20"><span class="kw"></script></span></a></code></pre></div>
|
||
</div>
|
||
<h2 id="the-problem">The problem</h2>
|
||
<p>Ever been on a website and want to tweet about it? Fortunately, the website might have a button to help you. But do you really know what this button do?</p>
|
||
<p>The “Like”, “Tweet” and “+1” buttons will call a javascript. It will get access to your cookies. It helps the provider of the button to know who you are.</p>
|
||
<p>In plain English, the “+1” button will inform Google you are visiting the website, <strong>even if you don’t click on “+1”</strong>. The same is true for the “like” button for facebook and the “tweet this” button for twitter.</p>
|
||
<p>The problem is not only a privacy issue. In fact (sadly <span class="sc"><abbr title="In my Humble Opinion">imho</abbr></span>) this isn’t an issue for most people. These button consume computer ressources. Far more than a simple link. It thus slow down a bit the computer and consume energy. These button could also slow down the rendering of your web page.</p>
|
||
<p>Another aspect is their design. Their look and feel is mostly imposed by the provider.</p>
|
||
<p>The most problematic aspect in my opinion is to use a third party js on your website. What if tomorrow twitter update their tweet button? If the upgrade break something for only a minority of people, they won’t fix it. This could occur anytime without any notification. They just have to add a <code>document.write</code> in their <code>js</code> you call asynchronously and <strong>BAM!</strong> Your website is just an empty blank page. And as you call many external ressources, it can be very difficult to find the origin of the problem.</p>
|
||
<p><strong>Using social network buttons:</strong></p>
|
||
<ul>
|
||
<li>Pros:
|
||
<ul>
|
||
<li>help user share your website,</li>
|
||
<li>can provide a popularity indicator to your users.</li>
|
||
</ul></li>
|
||
<li>Cons:
|
||
<ul>
|
||
<li>you help tracking your users,</li>
|
||
<li>generally doesn’t follow the design of your website,</li>
|
||
<li>use more computer ressources,</li>
|
||
<li>slow down your website,</li>
|
||
<li>executing third party js can break things silently.</li>
|
||
</ul></li>
|
||
</ul>
|
||
<h2 id="solutions">Solutions</h2>
|
||
<p>I will provide you two solutions with the following properties:</p>
|
||
<ul>
|
||
<li>Pros:
|
||
<ul>
|
||
<li>help user share your website,</li>
|
||
<li>doesn’t follow your user,</li>
|
||
<li>use almost no computer ressource,</li>
|
||
<li>doesn’t slow down your website,</li>
|
||
<li>doesn’t execute any third party js on your website.</li>
|
||
</ul></li>
|
||
<li>Cons:
|
||
<ul>
|
||
<li>doesn’t provide any popularity information.</li>
|
||
</ul></li>
|
||
</ul>
|
||
<p><strong>Solution 1 (no js):</strong></p>
|
||
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://twitter.com/home?status=$url$"</span></a>
|
||
<a class="sourceLine" id="cb2-2" title="2"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb2-3" title="3"> <span class="kw">></span>Tweet this<span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb2-4" title="4"></a>
|
||
<a class="sourceLine" id="cb2-5" title="5"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.facebook.com/sharer/sharer.php?u=$url$"</span></a>
|
||
<a class="sourceLine" id="cb2-6" title="6"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb2-7" title="7"> <span class="kw">></span>Like this<span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb2-8" title="8"></a>
|
||
<a class="sourceLine" id="cb2-9" title="9"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://plus.google.com/share?url=$url$"</span></a>
|
||
<a class="sourceLine" id="cb2-10" title="10"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb2-11" title="11"> <span class="kw">></span>Share on G+<span class="kw"></a></span></a></code></pre></div>
|
||
<p>But you have to replace <code>$url$</code> by the current <span class="sc"><abbr title="Uniform Ressource Locator">url</abbr></span>.</p>
|
||
<p><strong>Solution 2 (Just copy/paste):</strong></p>
|
||
<p>If you don’t want to write the <span class="sc"><abbr title="Uniform Ressource Locator">url</abbr></span> yourself, you could use some minimal js:</p>
|
||
<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb3-1" title="1"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"sociallinks"</span><span class="kw">></span></a>
|
||
<a class="sourceLine" id="cb3-2" title="2"> <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://twitter.com/home?status=$url$"</span></a>
|
||
<a class="sourceLine" id="cb3-3" title="3"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb3-4" title="4"> <span class="kw">></span>Tweet this<span class="kw"></a></span> -</a>
|
||
<a class="sourceLine" id="cb3-5" title="5"> <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.facebook.com/sharer/sharer.php?u=$url$"</span></a>
|
||
<a class="sourceLine" id="cb3-6" title="6"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb3-7" title="7"> <span class="kw">></span>Like this<span class="kw"></a></span> -</a>
|
||
<a class="sourceLine" id="cb3-8" title="8"> <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://plus.google.com/share?url=$url$"</span></a>
|
||
<a class="sourceLine" id="cb3-9" title="9"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb3-10" title="10"> <span class="kw">></span>Share on G+<span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb3-11" title="11"><span class="kw"></div></span></a>
|
||
<a class="sourceLine" id="cb3-12" title="12"><span class="kw"><script></span></a>
|
||
<a class="sourceLine" id="cb3-13" title="13">(<span class="kw">function</span>()<span class="op">{</span><span class="va">window</span>.<span class="at">addEventListener</span>(<span class="st">"DOMContentLoaded"</span><span class="op">,</span><span class="kw">function</span>()<span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-14" title="14"> <span class="kw">var</span> url<span class="op">=</span><span class="va">document</span>.<span class="at">location</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-15" title="15"> <span class="kw">var</span> links<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">"sociallinks"</span>)</a>
|
||
<a class="sourceLine" id="cb3-16" title="16"> .<span class="at">getElementsByTagName</span>(<span class="st">'a'</span>)<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-17" title="17"> <span class="cf">for</span> (<span class="kw">var</span> i<span class="op">=</span><span class="dv">0</span><span class="op">;</span>i<span class="op">!=</span><span class="va">links</span>.<span class="at">length</span><span class="op">;</span>i<span class="op">++</span>)<span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-18" title="18"> links[i].<span class="at">setAttribute</span>(<span class="st">"href"</span><span class="op">,</span></a>
|
||
<a class="sourceLine" id="cb3-19" title="19"> links[i].<span class="va">href</span>.<span class="at">replace</span>(<span class="st">'$url$'</span><span class="op">,</span>url))<span class="op">;}}</span>)<span class="op">}</span>)()<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-20" title="20"><span class="kw"></script></span></a></code></pre></div>
|
||
<p>Here is the result:</p>
|
||
<div class="nostar" style="text-align:center">
|
||
<div id="sociallinks">
|
||
<p><a href="https://twitter.com/home?status=$url$" target="_blank" rel="noopener noreferrer nofollow">Tweet this</a> - <a href="http://www.facebook.com/sharer/sharer.php?u=$url$" target="_blank" rel="noopener noreferrer nofollow">Like this</a> - <a href="https://plus.google.com/share?url=$url$" target="_blank" rel="noopener noreferrer nofollow">Share on G+</a></p>
|
||
</div>
|
||
<script>
|
||
(function(){window.addEventListener("DOMContentLoaded",function(){
|
||
var url=document.location;
|
||
var links=document.getElementById("sociallinks")
|
||
.getElementsByTagName('a');
|
||
for (var i=0;i!=links.length;i++){
|
||
links[i].setAttribute("href",
|
||
links[i].href.replace('$url$',url));}})})();
|
||
</script>
|
||
</div>
|
||
<h2 id="good-looking-solutions">Good looking solutions</h2>
|
||
<p>If you don’t want just text but nice icons. You have many choices:</p>
|
||
<ul>
|
||
<li>Use images <code><img src="..."/></code> in the links.</li>
|
||
<li>Use icon fonts</li>
|
||
</ul>
|
||
<p>As the first solution is pretty straightforward, I’ll explain the second one.</p>
|
||
<ol type="1">
|
||
<li>Download the icon font <a href="http://blog.martianwabbit.com/post/4344642365.html">here</a></li>
|
||
<li>put the font file(s) at some place (here ‘fonts/social_font.ttf’ relatively to your <span class="sc">css</span> file)</li>
|
||
<li>Add this to your <span class="sc">css</span></li>
|
||
</ol>
|
||
<div class="sourceCode" id="cb4"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb4-1" title="1"><span class="im">@font-face</span></a>
|
||
<a class="sourceLine" id="cb4-2" title="2"> font-family: 'social'</a>
|
||
<a class="sourceLine" id="cb4-3" title="3"> src: url('fonts/social_font.ttf') format('truetype')</a>
|
||
<a class="sourceLine" id="cb4-4" title="4"> font-weight: normal</a>
|
||
<a class="sourceLine" id="cb4-5" title="5"> font-style: normal</a>
|
||
<a class="sourceLine" id="cb4-6" title="6">.social</a>
|
||
<a class="sourceLine" id="cb4-7" title="7"> font-family: social</a></code></pre></div>
|
||
<p>Now add this to your <span class="sc"><abbr title="HyperText Markup Language">html</abbr></span>:</p>
|
||
<p><strong>Solution 1 (without js):</strong></p>
|
||
<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb5-1" title="1"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://twitter.com/home?status=$url$"</span></a>
|
||
<a class="sourceLine" id="cb5-2" title="2"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb5-3" title="3"><span class="ot"> class=</span><span class="st">"social"</span><span class="kw">></span><span class="dv">&#116;</span><span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb5-4" title="4">·</a>
|
||
<a class="sourceLine" id="cb5-5" title="5"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.facebook.com/sharer/sharer.php?u=$url$"</span></a>
|
||
<a class="sourceLine" id="cb5-6" title="6"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb5-7" title="7"><span class="ot"> class=</span><span class="st">"social"</span><span class="kw">></span><span class="dv">&#0096;</span><span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb5-8" title="8">·</a>
|
||
<a class="sourceLine" id="cb5-9" title="9"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://plus.google.com/share?url=$url$"</span></a>
|
||
<a class="sourceLine" id="cb5-10" title="10"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb5-11" title="11"><span class="ot"> class=</span><span class="st">"social"</span><span class="kw">></span><span class="dv">&#0103;</span><span class="kw"></a></span></a></code></pre></div>
|
||
<p><strong>Solution 2 (same with a bit more js):</strong></p>
|
||
<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb6-1" title="1"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"sociallinksunicode"</span><span class="kw">></span></a>
|
||
<a class="sourceLine" id="cb6-2" title="2"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://twitter.com/home?status=$url$"</span></a>
|
||
<a class="sourceLine" id="cb6-3" title="3"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb6-4" title="4"><span class="ot"> class=</span><span class="st">"social"</span><span class="kw">></span><span class="dv">&#116;</span><span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb6-5" title="5">·</a>
|
||
<a class="sourceLine" id="cb6-6" title="6"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.facebook.com/sharer/sharer.php?u=$url$"</span></a>
|
||
<a class="sourceLine" id="cb6-7" title="7"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb6-8" title="8"><span class="ot"> class=</span><span class="st">"social"</span><span class="kw">></span><span class="dv">&#0096;</span><span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb6-9" title="9">·</a>
|
||
<a class="sourceLine" id="cb6-10" title="10"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">"https://plus.google.com/share?url=$url$"</span></a>
|
||
<a class="sourceLine" id="cb6-11" title="11"><span class="ot"> target=</span><span class="st">"_blank"</span><span class="ot"> rel=</span><span class="st">"noopener noreferrer nofollow"</span></a>
|
||
<a class="sourceLine" id="cb6-12" title="12"><span class="ot"> class=</span><span class="st">"social"</span><span class="kw">></span><span class="dv">&#0103;</span><span class="kw"></a></span></a>
|
||
<a class="sourceLine" id="cb6-13" title="13"><span class="kw"></div></span></a>
|
||
<a class="sourceLine" id="cb6-14" title="14"><span class="kw"><script></span></a>
|
||
<a class="sourceLine" id="cb6-15" title="15">(<span class="kw">function</span>()<span class="op">{</span><span class="va">window</span>.<span class="at">addEventListener</span>(<span class="st">"DOMContentLoaded"</span><span class="op">,</span><span class="kw">function</span>()<span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb6-16" title="16"> <span class="kw">var</span> url<span class="op">=</span><span class="va">document</span>.<span class="at">location</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb6-17" title="17"> <span class="kw">var</span> links<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">"sociallinksunicode"</span>)</a>
|
||
<a class="sourceLine" id="cb6-18" title="18"> .<span class="at">getElementsByTagName</span>(<span class="st">'a'</span>)<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb6-19" title="19"> <span class="cf">for</span> (<span class="kw">var</span> i<span class="op">=</span><span class="dv">0</span><span class="op">;</span>i<span class="op">!=</span><span class="va">links</span>.<span class="at">length</span><span class="op">;</span>i<span class="op">++</span>)<span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb6-20" title="20"> links[i].<span class="at">setAttribute</span>(<span class="st">"href"</span><span class="op">,</span></a>
|
||
<a class="sourceLine" id="cb6-21" title="21"> links[i].<span class="va">href</span>.<span class="at">replace</span>(<span class="st">'$url$'</span><span class="op">,</span>url))<span class="op">;}}</span>)<span class="op">}</span>)()<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb6-22" title="22"><span class="kw"></script></span></a></code></pre></div>
|
||
<p>Here is the result:</p>
|
||
<div class="nostar" style="font-size: 2em; text-align: center;">
|
||
<div id="sociallinksunicode">
|
||
<p><a href="https://twitter.com/home?status=$url$" target="_blank" rel="noopener noreferrer nofollow" class="social">t</a> · <a href="http://www.facebook.com/sharer/sharer.php?u=$url$" target="_blank" rel="noopener noreferrer nofollow" class="social">`</a> · <a href="https://plus.google.com/share?url=$url$" target="_blank" rel="noopener noreferrer nofollow" class="social">g</a></p>
|
||
</div>
|
||
<script>
|
||
(function(){window.addEventListener("DOMContentLoaded",function(){
|
||
var url=document.location;
|
||
var links=document.getElementById("sociallinksunicode")
|
||
.getElementsByTagName('a');
|
||
for (var i=0;i!=links.length;i++){
|
||
links[i].setAttribute("href",
|
||
links[i].href.replace('$url$',url));}})})();
|
||
</script>
|
||
</div>
|
||
<h2 id="conclusion">Conclusion</h2>
|
||
<ol type="1">
|
||
<li>You get your design back,</li>
|
||
<li>You stop to help tracking people,</li>
|
||
<li>You use less computer ressources and more generally power ressources which is good for the planet,</li>
|
||
<li>Your web pages will load faster.</li>
|
||
</ol>
|
||
<p><em>ps</em>: On my personal website I continue to use Google analytics. Therefore, Google (and only Google, not facebook nor twitter) can track you here. But I might change this in the future.</p>
|
||
</div>
|
||
<div id="afterarticle">
|
||
<div id="social">
|
||
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
|
||
·
|
||
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/Social-link-the-right-way/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
|
||
·
|
||
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/Social-link-the-right-way/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
|
||
<br />
|
||
<a class="message" href="../../../../Scratch/fr/blog/Social-link-the-right-way/">Ces liens sociaux préservent votre vie privée</a>
|
||
</div>
|
||
<div id="navigation">
|
||
<a href="../../../../">Accueil</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/blog">Blog</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/softwares">Logiciels</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/about">Auteur</a>
|
||
</div>
|
||
<div id="totop"><a href="#header">↑ Top ↑</a></div>
|
||
<div id="bottom">
|
||
<div>
|
||
Published on 2013-03-14
|
||
</div>
|
||
<div>
|
||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||
</div>
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
|
||
</div>
|
||
|
||
<div>
|
||
Done with
|
||
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
|
||
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
|
||
<span class="pala">&</span>
|
||
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
|
||
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|