2021-04-18 10:23:24 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > YBlog - Social link the right way< / title >
< meta name = "keywords" content = "programming" / >
< link rel = "shortcut icon" type = "image/x-icon" href = "../../../../Scratch/img/favicon.ico" / >
2021-05-25 20:25:47 +00:00
< 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" / >
2021-04-18 10:23:24 +00:00
< 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 = "en" class = "article" >
< div id = "content" >
< div id = "header" >
< div id = "choix" >
< span id = "choixlang" >
< a href = "../../../../Scratch/fr/blog/Social-link-the-right-way/" > French< / a >
< / span >
< span class = "tomenu" > < a href = "#navigation" > ↓ Menu ↓< / a > < / span >
< span class = "flush" > < / span >
< / div >
< / div >
< div id = "titre" >
< h1 > Social link the right way< / 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 = "Too long; didn't read" > tl;dr< / abbr > : < / span > Default share buttons track your users, aren’ < / p >
< p > Do it right. Use static links instead.< / p >
< p > If you don’ < 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’ < / 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’ < / 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’ < 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’ < / 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’ < / li >
< li > use almost no computer ressource,< / li >
< li > doesn’ < / li >
< li > doesn’ < / li >
< / ul > < / li >
< li > Cons:
< ul >
< li > doesn’ < / 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’ < 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’ < / 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’ < / 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 ‘ ’ < 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" >
2021-05-25 20:25:47 +00:00
< a href = "/rss.xml" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > RSS< / a >
2021-04-18 10:23:24 +00:00
·
< a href = "https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/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/en/blog/Social-link-the-right-way/" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > FB< / a >
< br / >
< a class = "message" href = "../../../../Scratch/en/blog/Social-link-the-right-way/" > These social sharing links preserve your privacy< / a >
< / div >
< div id = "navigation" >
< a href = "../../../../" > Home< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/blog" > Blog< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/softwares" > Softwares< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/about" > About< / 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 >
< hr / >
< div style = "max-width: 100%" >
< a href = "https://cardanohub.org" >
< img src = "../../../../Scratch/img/ada-logo.png" class = "simple" style = "height: 16px ;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
< / a >
< code style = "display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
< / code >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
