Home Explore Help
Sign In
riff
/
riff_site
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 1 Releases 0 Wiki

A new Riff-radio.org site with a static approach.

Branch: master
Branches Tags
riff_site/output/pages/social_buttons.html

social_buttons.html 19KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="utf-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>Using Alternative Social Buttons with Nikola | Riff</title>

  7. <link href="../assets/css/all-nocdn.css" rel="stylesheet" type="text/css">

  8. <link rel="alternate" type="application/rss+xml" title="RSS" href="../rss.xml">

  9. <link rel="canonical" href="http://media.pagelibre.org/riff/site/pages/social_buttons.html">

  10. <link rel="icon" href="../favicon.ico" sizes="16x16">

  11. <!--[if lt IE 9]><script src="../assets/js/html5.js"></script><![endif]--><meta name="author" content="The Nikola Team">

  12. <meta property="og:site_name" content="Riff">

  13. <meta property="og:title" content="Using Alternative Social Buttons with Nikola">

  14. <meta property="og:url" content="http://media.pagelibre.org/riff/site/pages/social_buttons.html">

  15. <meta property="og:description" content='Version:

  16. 8.2.3

  17. 

  18. 

  19. Contents

  20. 

  21. The Default

  22. ShareNice

  23. SocialSharePrivacy

  24. 

  25. The Hard Way

  26. The Easy Way

  27. 

  28. 

  29. 

  30. 

  31. 

  32. The Default

  33. By Default, the themes provided with Nikola will add to your pages a "slide in" widget a'>

  34. <meta property="og:type" content="article">

  35. <meta property="article:published_time" content="2013-08-19T23:00:00-03:00">

  36. </head>

  37. <body>

  38. <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>

  39. 

  40. <!-- Menubar -->

  41. 

  42. <div class="blog-masthead">

  43.     <div class="container">

  44. <!-- This keeps the margins nice -->

  45.         <nav class="blog-nav" role="navigation"><a href="../index.html" class="blog-nav-item">Accueil</a>

  46.             <a href="about.html" class="blog-nav-item">About Riff</a>

  47.             <a href="../rss.xml" class="blog-nav-item">RSS feed</a>

  48. 

  49.             

  50. 

  51.                 

  52.                 

  53.                 

  54.             

  55.         </nav>

  56. </div>

  57. <!-- /.container -->

  58. </div>

  59. <!-- End of Menubar -->

  60. 

  61. <div class="container" id="content" role="main">

  62.     <div class="body-content">

  63.         <div class="blog-header">

  64.             <h1 class="blog-title">

  65.                 <a href="http://media.pagelibre.org/riff/site/">

  66. 

  67.                     <span id="blog-title">Riff</span>

  68.                 </a>

  69.             </h1>

  70.             <p class="lead blog-description">Riff la radio rock</p>

  71.             

  72.         </div>

  73.         <!--Body content-->

  74.         <div class="row">

  75.             <div class="col-sm-8 blog-main">

  76.                 

  77. <article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h2 class="p-name entry-title blog-post-title" itemprop="headline name"><a href="#" class="u-url">Using Alternative Social Buttons with Nikola</a></h2>

  78. 

  79.         

  80. 

  81.     </header><div class="e-content entry-content" itemprop="articleBody text">

  82.     <dl class="docinfo simple">

  83. <dt class="version">Version<span class="colon">:</span>

  84. </dt>

  85. <dd class="version">8.2.3</dd>

  86. </dl>

  87. <nav class="contents alert alert-primary float-md-right" id="contents" role="doc-toc"><p class="topic-title">Contents</p>

  88. <ul class="simple">

  89. <li><p><a class="reference internal" href="social_buttons.html#the-default" id="toc-entry-1">The Default</a></p></li>

  90. <li><p><a class="reference internal" href="social_buttons.html#sharenice" id="toc-entry-2">ShareNice</a></p></li>

  91. <li>

  92. <p><a class="reference internal" href="social_buttons.html#socialshareprivacy" id="toc-entry-3">SocialSharePrivacy</a></p>

  93. <ul>

  94. <li><p><a class="reference internal" href="social_buttons.html#the-hard-way" id="toc-entry-4">The Hard Way</a></p></li>

  95. <li><p><a class="reference internal" href="social_buttons.html#the-easy-way" id="toc-entry-5">The Easy Way</a></p></li>

  96. </ul>

  97. </li>

  98. </ul></nav><section id="the-default"><h2><a class="toc-backref" href="social_buttons.html#toc-entry-1" role="doc-backlink">The Default</a></h2>

  99. <p>By Default, the themes provided with Nikola will add to your pages a "slide in" widget at

  100. the bottom right of the page, provided by Addthis. This is the HTML code for that:</p>

  101. <pre class="code html"><a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-1"></a><span class="c">&lt;!-- Social buttons --&gt;</span>

  102. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-2"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"addthisbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"addthis_toolbox addthis_peekaboo_style</span>

  103. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-3"></a><span class="s">    addthis_default_style addthis_label_style addthis_32x32_style"</span><span class="p">&gt;</span>

  104. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-4"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"addthis_button_more"</span><span class="p">&gt;</span>Share<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  105. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-5"></a><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"addthis_button_facebook"</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  106. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-6"></a><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"addthis_button_google_plusone_share"</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  107. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-7"></a><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"addthis_button_linkedin"</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  108. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-8"></a><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"addthis_button_twitter"</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  109. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-9"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>

  110. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-10"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  111. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-11"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f7088a56bb93798"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

  112. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-12"></a><span class="c">&lt;!-- End of social buttons --&gt;</span>

  113. <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-13"></a>"""

  114. </pre>

  115. <p>You can change that using the <code class="docutils literal">SOCIAL_BUTTONS_CODE</code> option in your conf.py. In some cases, just

  116. doing that will be enough but in others, it won't. This document tries to describe all the bits

  117. involved in making this work correctly.</p>

  118. <dl>

  119. <dt>Part 1: <code class="docutils literal">SOCIAL_BUTTONS_CODE</code>

  120. </dt>

  121. <dd>

  122. <p>Social sharing services like addthis and others will provide you a HTML snippet.

  123. If it is self-contained, then just setting <code class="docutils literal">SOCIAL_BUTTONS_CODE</code> may be enough.

  124. Try :-)</p>

  125. </dd>

  126. <dt>Part 2: The theme</dt>

  127. <dd>

  128. <p>The <code class="docutils literal">SOCIAL_BUTTONS_CODE</code> HTML fragment will be embedded <em>somewhere</em> by the theme. Whether that

  129. is the correct place or not is not something the theme author can truly know, so it is possible that

  130. you may have to tweak the <code class="docutils literal">base.html</code> template to make it look good.</p>

  131. </dd>

  132. <dt>Part 3: <code class="docutils literal">BODY_END</code> and <code class="docutils literal">EXTRA_HEAD_DATA</code>

  133. </dt>

  134. <dd>

  135. <p>Some social sharing code requires JS execution that depends on JQuery being available

  136. (example: <a class="reference external" href="https://github.com/panzi/SocialSharePrivacy">SocialSharePrivacy</a>). It's good

  137. practice (and often, the only way that will work) to put those at the end of <code class="docutils literal">&lt;BODY&gt;</code>,

  138. and one easy way to do that is to put them in <code class="docutils literal">BODY_END</code></p>

  139. <p>On the other hand, it's possible that it requires you to load some CSS files.

  140. The right place for that is in the document's <code class="docutils literal">&lt;HEAD&gt;</code> so they should be added

  141. in <code class="docutils literal">EXTRA_HEAD_DATA</code></p>

  142. </dd>

  143. <dt>Part 4: assets</dt>

  144. <dd>

  145. <p>For sharing code that doesn't rely on a social sharing service, you may need to add CSS, Image, or JS

  146. files to your site</p>

  147. </dd>

  148. </dl></section><section id="sharenice"><h2><a class="toc-backref" href="social_buttons.html#toc-entry-2" role="doc-backlink">ShareNice</a></h2>

  149. <p><a class="reference external" href="https://graingert.co.uk/shareNice/">ShareNice</a> is "written in order to provide social sharing features to

  150. web developers and website administrators who wish to maintain and protect their users' privacy"

  151. which sounds cool to me.</p>

  152. <p>Let's go step by step into integrating the hosted version of ShareNice into a Nikola site.</p>

  153. <p>For testing purposes, let's do it on a demo site:</p>

  154. <pre class="literal-block">$ nikola init --demo sharenice_test

  155. A new site with example data has been created at sharenice_test.

  156. See README.txt in that folder for more information.

  157. $ cd sharenice_test/</pre>

  158. <p>To see what's going on, let's start Nikola in "auto mode". This should build the

  159. site and open a web browser showing the default configuration, with the AddThis widget:</p>

  160. <pre class="literal-block">$ nikola auto -b</pre>

  161. <p>First, let's add the HTML snippet that will show the sharing options. In your conf.py, set this, which

  162. is the HTML code suggested by ShareNice:</p>

  163. <pre class="code python"><a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-1"></a><span class="n">SOCIAL_BUTTONS_CODE</span> <span class="o">=</span> <span class="s2">"""&lt;div id="shareNice" data-share-label="Share"</span>

  164. <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-2"></a><span class="s2">    data-color-scheme="black" data-icon-size="32" data-panel-bottom="plain"</span>

  165. <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-3"></a><span class="s2">    data-services="plus.google.com,facebook.com,digg.com,email,delicious.com,twitter.com"</span>

  166. <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-4"></a><span class="s2">    style="float:right"&gt;&lt;/div&gt;"""</span>

  167. <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-5"></a>

  168. <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-6"></a><span class="n">BODY_END</span> <span class="o">=</span> <span class="s2">"""&lt;script src="https://graingert.co.uk/shareNice/code.js"&gt;&lt;/script&gt;"""</span>

  169. </pre>

  170. <p>And you should now see a sharing box at the bottom right of the page.</p>

  171. <p>Main problem remaining is that it doesn't really look good and integrated in the page layout.

  172. I suggest changing the code to this which looks nicer, but still has some placement issues:</p>

  173. <pre class="code python"><a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-1"></a><span class="n">SOCIAL_BUTTONS_CODE</span> <span class="o">=</span> <span class="s2">"""&lt;div id="shareNice" data-share-label="Share"</span>

  174. <a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-2"></a><span class="s2">    data-color-scheme="black" data-icon-size="32" data-panel-bottom="plain"</span>

  175. <a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-3"></a><span class="s2">    data-services="plus.google.com,facebook.com,email,twitter.com"</span>

  176. <a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-4"></a><span class="s2">    style="position: absolute; left: 20px; top: 60px;"&gt;&lt;/div&gt;"""</span>

  177. </pre>

  178. <p>If anyone comes up with a better idea of styling/placement, just let me know ;-)</p>

  179. <p>One bad bit of this so far is that you are now using a script from another site, and that

  180. doesn't let Nikola perform as many optimizations to your page as it could.

  181. So, if you really want to go the extra mile to save a few KB and round trips, you <em>could</em>

  182. install your own copy from the <a class="reference external" href="https://github.com/mischat/shareNice">github repo</a> and

  183. use that instead of the copy at <a class="reference external" href="https://graingert.co.uk/shareNice">ShareNice</a>.</p>

  184. <p>Then, you can create your own theme inheriting from the one you are using and add the CSS

  185. and JS files from ShareNice into your <code class="docutils literal">bundles</code> configuration so they are combined and

  186. minified.</p>

  187. </section><section id="socialshareprivacy"><h2><a class="toc-backref" href="social_buttons.html#toc-entry-3" role="doc-backlink">SocialSharePrivacy</a></h2>

  188. <section id="the-hard-way"><h3><a class="toc-backref" href="social_buttons.html#toc-entry-4" role="doc-backlink">The Hard Way</a></h3>

  189. <p><a class="reference external" href="https://github.com/panzi/SocialSharePrivacy">SocialSharePrivacy</a> is "a jQuery plugin that

  190. lets you add social share buttons to your website that don't allow the social sites to track

  191. your users." Nice!</p>

  192. <p>Let's go step-by-step into integrating SocialSharePrivacy into a Nikola site. To improve

  193. privacy, they recommend you not use the hosted service so we'll do it the hard way, by

  194. getting and distributing everything in our own site.</p>

  195. <p><a class="reference external" href="https://github.com/panzi/SocialSharePrivacy">https://github.com/panzi/SocialSharePrivacy</a></p>

  196. <p>For testing purposes, let's do it on a demo site:</p>

  197. <pre class="literal-block">$ nikola init --demo ssp_test

  198. A new site with example data has been created at ssp_test.

  199. See README.txt in that folder for more information.

  200. $ cd ssp_test/</pre>

  201. <p>To see what's going on, let's start Nikola in "auto mode". This should build the

  202. site and open a web browser showing the default configuration, with the AddThis widget:</p>

  203. <pre class="literal-block">$ nikola auto -b</pre>

  204. <p>Now, download <a class="reference external" href="https://github.com/panzi/SocialSharePrivacy/archive/master.zip">the current version</a>

  205. and unzip it. You will have a <code class="docutils literal"><span class="pre">SocialSharePrivacy-master</span></code> folder with lots of stuff in it.</p>

  206. <p>First, we need to build it (this requires a working and modern uglifyjs, this may not be easy):</p>

  207. <pre class="literal-block">$ cd SocialSharePrivacy-master

  208. $ sh build.sh -m gplus,twitter,facebook,mail -s "/assets/css/socialshareprivacy.css" -a off</pre>

  209. <p>You will now have several files in a <code class="docutils literal">build</code> folder. We need to bring them into the site:</p>

  210. <pre class="literal-block">$ cp -Rv SocialSharePrivacy-master/build/* files/

  211. $ cp -R SocialSharePrivacy-master/images/ files/assets/</pre>

  212. <p>Edit your <code class="docutils literal">conf.py</code>:</p>

  213. <pre class="code python"><a name="rest_code_65b770dc716e498eb31cf1abee0d274c-1"></a><span class="n">BODY_END</span> <span class="o">=</span> <span class="s2">"""</span>

  214. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-2"></a><span class="s2">&lt;script src="/javascripts/jquery.socialshareprivacy.min.js"&gt;&lt;/script&gt;</span>

  215. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-3"></a><span class="s2">&lt;script&gt;</span>

  216. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-4"></a><span class="s2">$(document).ready(function () {</span>

  217. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-5"></a><span class="s2">    $('.share').socialSharePrivacy();</span>

  218. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-6"></a><span class="s2">});</span>

  219. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-7"></a><span class="s2">&lt;/script&gt;</span>

  220. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-8"></a><span class="s2">"""</span>

  221. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-9"></a>

  222. <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-10"></a><span class="n">SOCIAL_BUTTONS_CODE</span> <span class="o">=</span> <span class="s2">"""&lt;div class="share"&gt;&lt;/div&gt;"""</span>

  223. </pre>

  224. <p>In my experience this produces a broken, duplicate, semi-working thing. YMMV and if you make it work correctly, let me know how :-)</p>

  225. </section><section id="the-easy-way"><h3><a class="toc-backref" href="social_buttons.html#toc-entry-5" role="doc-backlink">The Easy Way</a></h3>

  226. <p>Go to <a class="reference external" href="https://panzi.github.io/SocialSharePrivacy/">https://panzi.github.io/SocialSharePrivacy/</a> and use the provided form to get the code. Make sure you check "I already use JQuery"

  227. if you are using one of the themes that require it, like site or default, select the services you want, and use your disqus name if

  228. you have one.</p>

  229. <p>It will give you 3 code snippets:</p>

  230. <dl class="simple">

  231. <dt>"Insert this once in the head of your page"</dt>

  232. <dd>

  233. <p>Put it in <code class="docutils literal">BODY_END</code></p>

  234. </dd>

  235. <dt>"Insert this wherever you want a share widget displayed"</dt>

  236. <dd>

  237. <p>Put it in <code class="docutils literal">SOCIAL_BUTTONS_CODE</code></p>

  238. </dd>

  239. <dt>"Insert this once anywhere after the other code"</dt>

  240. <dd>

  241. <p>Put it in <code class="docutils literal">BODY_END</code></p>

  242. </dd>

  243. </dl>

  244. <p>That should give you a working integration (not tested)</p>

  245. </section></section>

  246. </div>

  247.     

  248. 

  249. </article>

  250. </div>

  251.             <div class="col-sm-3 col-sm-offset-1 blog-sidebar">

  252.                 <div class="sidebar-module sidebar-module-inset">

  253.   <h4>About</h4>

  254.   <div id="shoutcastdiv">

  255.     <script type="text/javascript">

  256.       refreshdiv();

  257.     </script>

  258. </div>

  259. </div>

  260. <div class="sidebar-module">

  261.   <h4>Links</h4>

  262.   <ol class="list-unstyled">

  263. <li><a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog Theme</a></li>

  264.     <li><a href="https://getnikola.com/">Nikola</a></li>

  265.     <li><a href="https://twitter.com/mdo">@mdo</a></li>

  266.     <li><a href="https://twitter.com/Kwpolska">@Kwpolska</a></li>

  267.     <li><a href="https://twitter.com/GetNikola">@GetNikola</a></li>

  268.   </ol>

  269. </div>

  270. 

  271. 

  272.             </div>

  273.         <!--End of body content-->

  274.         </div>

  275.     </div>

  276. </div>

  277. 

  278. <footer class="blog-footer" id="footer">

  279.     Contents © 2023         <a href="mailto:contact@riff-radio.org">Riff</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         

  280.     

  281. </footer><script src="../assets/js/all-nocdn.js"></script><!-- fancy dates --><script>

  282.     moment.locale("en");

  283.     fancydates(0, "YYYY-MM-DD HH:mm");

  284.     </script><!-- end fancy dates --><script>

  285.     baguetteBox.run('div#content', {

  286.         ignoreClass: 'islink',

  287.         captions: function(element) {

  288.             return element.getElementsByTagName('img')[0].alt;

  289.     }});

  290.     </script><script type="text/javascript" src="../refresh.js"></script>

  291. </body>

  292. </html>