123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- <dl class="docinfo simple">
- <dt class="version">Version<span class="colon">:</span></dt>
- <dd class="version">8.2.3</dd>
- </dl>
- <nav class="contents alert alert-primary float-md-right" id="contents" role="doc-toc">
- <p class="topic-title">Contents</p>
- <ul class="simple">
- <li><p><a class="reference internal" href="#the-default" id="toc-entry-1">The Default</a></p></li>
- <li><p><a class="reference internal" href="#sharenice" id="toc-entry-2">ShareNice</a></p></li>
- <li><p><a class="reference internal" href="#socialshareprivacy" id="toc-entry-3">SocialSharePrivacy</a></p>
- <ul>
- <li><p><a class="reference internal" href="#the-hard-way" id="toc-entry-4">The Hard Way</a></p></li>
- <li><p><a class="reference internal" href="#the-easy-way" id="toc-entry-5">The Easy Way</a></p></li>
- </ul>
- </li>
- </ul>
- </nav>
- <section id="the-default">
- <h1><a class="toc-backref" href="#toc-entry-1" role="doc-backlink">The Default</a></h1>
- <p>By Default, the themes provided with Nikola will add to your pages a "slide in" widget at
- the bottom right of the page, provided by Addthis. This is the HTML code for that:</p>
- <pre class="code html"><a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-1"></a><span class="c"><!-- Social buttons --></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-2"></a><span class="p"><</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>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-3"></a><span class="s"> addthis_default_style addthis_label_style addthis_32x32_style"</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-4"></a><span class="p"><</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">></span>Share<span class="p"></</span><span class="nt">a</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-5"></a><span class="p"><</span><span class="nt">ul</span><span class="p">><</span><span class="nt">li</span><span class="p">><</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">></</span><span class="nt">a</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-6"></a><span class="p"><</span><span class="nt">li</span><span class="p">><</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">></</span><span class="nt">a</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-7"></a><span class="p"><</span><span class="nt">li</span><span class="p">><</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">></</span><span class="nt">a</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-8"></a><span class="p"><</span><span class="nt">li</span><span class="p">><</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">></</span><span class="nt">a</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-9"></a><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-10"></a><span class="p"></</span><span class="nt">div</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-11"></a><span class="p"><</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">></</span><span class="nt">script</span><span class="p">></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-12"></a><span class="c"><!-- End of social buttons --></span>
- <a name="rest_code_fdbd4b2582b34ec78f82fe9fab67f0d6-13"></a>"""
- </pre><p>You can change that using the <code class="docutils literal">SOCIAL_BUTTONS_CODE</code> option in your conf.py. In some cases, just
- doing that will be enough but in others, it won't. This document tries to describe all the bits
- involved in making this work correctly.</p>
- <dl>
- <dt>Part 1: <code class="docutils literal">SOCIAL_BUTTONS_CODE</code></dt>
- <dd><p>Social sharing services like addthis and others will provide you a HTML snippet.
- If it is self-contained, then just setting <code class="docutils literal">SOCIAL_BUTTONS_CODE</code> may be enough.
- Try :-)</p>
- </dd>
- <dt>Part 2: The theme</dt>
- <dd><p>The <code class="docutils literal">SOCIAL_BUTTONS_CODE</code> HTML fragment will be embedded <em>somewhere</em> by the theme. Whether that
- is the correct place or not is not something the theme author can truly know, so it is possible that
- you may have to tweak the <code class="docutils literal">base.html</code> template to make it look good.</p>
- </dd>
- <dt>Part 3: <code class="docutils literal">BODY_END</code> and <code class="docutils literal">EXTRA_HEAD_DATA</code></dt>
- <dd><p>Some social sharing code requires JS execution that depends on JQuery being available
- (example: <a class="reference external" href="https://github.com/panzi/SocialSharePrivacy">SocialSharePrivacy</a>). It's good
- practice (and often, the only way that will work) to put those at the end of <code class="docutils literal"><BODY></code>,
- and one easy way to do that is to put them in <code class="docutils literal">BODY_END</code></p>
- <p>On the other hand, it's possible that it requires you to load some CSS files.
- The right place for that is in the document's <code class="docutils literal"><HEAD></code> so they should be added
- in <code class="docutils literal">EXTRA_HEAD_DATA</code></p>
- </dd>
- <dt>Part 4: assets</dt>
- <dd><p>For sharing code that doesn't rely on a social sharing service, you may need to add CSS, Image, or JS
- files to your site</p>
- </dd>
- </dl>
- </section>
- <section id="sharenice">
- <h1><a class="toc-backref" href="#toc-entry-2" role="doc-backlink">ShareNice</a></h1>
- <p><a class="reference external" href="https://graingert.co.uk/shareNice/">ShareNice</a> is "written in order to provide social sharing features to
- web developers and website administrators who wish to maintain and protect their users' privacy"
- which sounds cool to me.</p>
- <p>Let's go step by step into integrating the hosted version of ShareNice into a Nikola site.</p>
- <p>For testing purposes, let's do it on a demo site:</p>
- <pre class="literal-block">$ nikola init --demo sharenice_test
- A new site with example data has been created at sharenice_test.
- See README.txt in that folder for more information.
- $ cd sharenice_test/</pre>
- <p>To see what's going on, let's start Nikola in "auto mode". This should build the
- site and open a web browser showing the default configuration, with the AddThis widget:</p>
- <pre class="literal-block">$ nikola auto -b</pre>
- <p>First, let's add the HTML snippet that will show the sharing options. In your conf.py, set this, which
- is the HTML code suggested by ShareNice:</p>
- <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">"""<div id="shareNice" data-share-label="Share"</span>
- <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-2"></a><span class="s2"> data-color-scheme="black" data-icon-size="32" data-panel-bottom="plain"</span>
- <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>
- <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-4"></a><span class="s2"> style="float:right"></div>"""</span>
- <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-5"></a>
- <a name="rest_code_d45bd5e47f254bfeb9aa565ed399def8-6"></a><span class="n">BODY_END</span> <span class="o">=</span> <span class="s2">"""<script src="https://graingert.co.uk/shareNice/code.js"></script>"""</span>
- </pre><p>And you should now see a sharing box at the bottom right of the page.</p>
- <p>Main problem remaining is that it doesn't really look good and integrated in the page layout.
- I suggest changing the code to this which looks nicer, but still has some placement issues:</p>
- <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">"""<div id="shareNice" data-share-label="Share"</span>
- <a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-2"></a><span class="s2"> data-color-scheme="black" data-icon-size="32" data-panel-bottom="plain"</span>
- <a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-3"></a><span class="s2"> data-services="plus.google.com,facebook.com,email,twitter.com"</span>
- <a name="rest_code_b749fc146e7e47cc8686e5aaf4c038f1-4"></a><span class="s2"> style="position: absolute; left: 20px; top: 60px;"></div>"""</span>
- </pre><p>If anyone comes up with a better idea of styling/placement, just let me know ;-)</p>
- <p>One bad bit of this so far is that you are now using a script from another site, and that
- doesn't let Nikola perform as many optimizations to your page as it could.
- So, if you really want to go the extra mile to save a few KB and round trips, you <em>could</em>
- install your own copy from the <a class="reference external" href="https://github.com/mischat/shareNice">github repo</a> and
- use that instead of the copy at <a class="reference external" href="https://graingert.co.uk/shareNice">ShareNice</a>.</p>
- <p>Then, you can create your own theme inheriting from the one you are using and add the CSS
- and JS files from ShareNice into your <code class="docutils literal">bundles</code> configuration so they are combined and
- minified.</p>
- </section>
- <section id="socialshareprivacy">
- <h1><a class="toc-backref" href="#toc-entry-3" role="doc-backlink">SocialSharePrivacy</a></h1>
- <section id="the-hard-way">
- <h2><a class="toc-backref" href="#toc-entry-4" role="doc-backlink">The Hard Way</a></h2>
- <p><a class="reference external" href="https://github.com/panzi/SocialSharePrivacy">SocialSharePrivacy</a> is "a jQuery plugin that
- lets you add social share buttons to your website that don't allow the social sites to track
- your users." Nice!</p>
- <p>Let's go step-by-step into integrating SocialSharePrivacy into a Nikola site. To improve
- privacy, they recommend you not use the hosted service so we'll do it the hard way, by
- getting and distributing everything in our own site.</p>
- <p><a class="reference external" href="https://github.com/panzi/SocialSharePrivacy">https://github.com/panzi/SocialSharePrivacy</a></p>
- <p>For testing purposes, let's do it on a demo site:</p>
- <pre class="literal-block">$ nikola init --demo ssp_test
- A new site with example data has been created at ssp_test.
- See README.txt in that folder for more information.
- $ cd ssp_test/</pre>
- <p>To see what's going on, let's start Nikola in "auto mode". This should build the
- site and open a web browser showing the default configuration, with the AddThis widget:</p>
- <pre class="literal-block">$ nikola auto -b</pre>
- <p>Now, download <a class="reference external" href="https://github.com/panzi/SocialSharePrivacy/archive/master.zip">the current version</a>
- 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>
- <p>First, we need to build it (this requires a working and modern uglifyjs, this may not be easy):</p>
- <pre class="literal-block">$ cd SocialSharePrivacy-master
- $ sh build.sh -m gplus,twitter,facebook,mail -s "/assets/css/socialshareprivacy.css" -a off</pre>
- <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>
- <pre class="literal-block">$ cp -Rv SocialSharePrivacy-master/build/* files/
- $ cp -R SocialSharePrivacy-master/images/ files/assets/</pre>
- <p>Edit your <code class="docutils literal">conf.py</code>:</p>
- <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>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-2"></a><span class="s2"><script src="/javascripts/jquery.socialshareprivacy.min.js"></script></span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-3"></a><span class="s2"><script></span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-4"></a><span class="s2">$(document).ready(function () {</span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-5"></a><span class="s2"> $('.share').socialSharePrivacy();</span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-6"></a><span class="s2">});</span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-7"></a><span class="s2"></script></span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-8"></a><span class="s2">"""</span>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-9"></a>
- <a name="rest_code_65b770dc716e498eb31cf1abee0d274c-10"></a><span class="n">SOCIAL_BUTTONS_CODE</span> <span class="o">=</span> <span class="s2">"""<div class="share"></div>"""</span>
- </pre><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>
- </section>
- <section id="the-easy-way">
- <h2><a class="toc-backref" href="#toc-entry-5" role="doc-backlink">The Easy Way</a></h2>
- <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"
- 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
- you have one.</p>
- <p>It will give you 3 code snippets:</p>
- <dl class="simple">
- <dt>"Insert this once in the head of your page"</dt>
- <dd><p>Put it in <code class="docutils literal">BODY_END</code></p>
- </dd>
- <dt>"Insert this wherever you want a share widget displayed"</dt>
- <dd><p>Put it in <code class="docutils literal">SOCIAL_BUTTONS_CODE</code></p>
- </dd>
- <dt>"Insert this once anywhere after the other code"</dt>
- <dd><p>Put it in <code class="docutils literal">BODY_END</code></p>
- </dd>
- </dl>
- <p>That should give you a working integration (not tested)</p>
- </section>
- </section>
|