Alternative Social Buttons

Using Alternative Social Buttons with Nikola

Version

7.7.12

The Default

By De­fault, the themes pro­vid­ed with Niko­la will add to your pages a “s­lide in” wid­get at the bot­tom right of the page, pro­vid­ed by Ad­dthis. This is the HTML code for that:

<!-- Social buttons -->
<div id="addthisbox" class="addthis_toolbox addthis_peekaboo_style
    addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul><li><a class="addthis_button_facebook"></a>
<li><a class="addthis_button_google_plusone_share"></a>
<li><a class="addthis_button_linkedin"></a>
<li><a class="addthis_button_twitter"></a>
</ul>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f7088a56bb93798"></script>
<!-- End of social buttons -->
"""

You can change that using the SOCIAL_BUTTONS_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.

Part 1: SOCIAL_BUTTONS_CODE

Social sharing services like addthis and others will provide you a HTML snippet. If it is self-contained, then just setting SOCIAL_BUTTONS_CODE may be enough. Try :-)

Part 2: The theme

The SOCIAL_BUTTONS_CODE HTML fragment will be embedded somewhere 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 base.html template to make it look good.

Part 3: BODY_END and EXTRA_HEAD_DATA

Some social sharing code requires JS execution that depends on JQuery being available (example: SocialSharePrivacy). It’s good practice (and often, the only way that will work) to put those at the end of <BODY>, and one easy way to do that is to put them in BODY_END

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 <HEAD> so they should be added in EXTRA_HEAD_DATA

Part 4: assets

For shar­ing code that does­n’t re­ly on a so­cial shar­ing ser­vice, you may need to add CSS, Im­age, or JS files to your site

ShareNice

Sharenice is “writ­ten in or­der to pro­vide so­cial shar­ing fea­tures to web de­vel­op­ers and web­site ad­min­is­tra­tors who wish to main­tain and pro­tect their user­s’ pri­va­cy” which sounds cool to me.

Let’s go step by step in­to in­te­grat­ing the host­ed ver­sion of ShareNice in­to a Niko­la site.

For test­ing pur­pos­es, let’s do it on a de­mo site:

$ 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/

To see what’s go­ing on, let’s start Niko­la in “au­to mod­e”. This should build the site and open a web brows­er show­ing the de­fault con­fig­u­ra­tion, with the Ad­dThis wid­get:

$ nikola auto -b

First, let’s add the HTML snip­pet that will show the shar­ing op­tion­s. In your con­f.py, set this, which is the HTML code sug­gest­ed by ShareNice:

SOCIAL_BUTTONS_CODE = """<div id="shareNice" data-share-label="Share"
    data-color-scheme="black" data-icon-size="32" data-panel-bottom="plain"
    data-services="plus.google.com,facebook.com,digg.com,email,delicious.com,twitter.com"
    style="float:right"></div>"""

BODY_END = """<script src="http://graingert.co.uk/shareNice/code.js"></script>"""

And you should now see a shar­ing box at the bot­tom right of the page.

Main prob­lem re­main­ing is that it does­n’t re­al­ly look good and in­te­grat­ed in the page lay­out. I sug­gest chang­ing the code to this which looks nicer, but still has some place­ment is­sues:

SOCIAL_BUTTONS_CODE = """<div id="shareNice" data-share-label="Share"
    data-color-scheme="black" data-icon-size="32" data-panel-bottom="plain"
    data-services="plus.google.com,facebook.com,email,twitter.com"
    style="position: absolute; left: 20px; top: 60px;"></div>"""

If any­one comes up with a bet­ter idea of styling/­place­men­t, just let me know ;-)

One bad bit of this so far is that you are now us­ing a script from an­oth­er site, and that does­n’t let Niko­la per­form as many op­ti­miza­tions to your page as it could. So, if you re­al­ly want to go the ex­tra mile to save a few KB and round trip­s, you could in­stall your own copy from the github re­po and use that in­stead of the copy at sharenice.org.

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 bundles configuration so they are combined and minified.

SocialSharePrivacy

The Hard Way

So­cial­SharePri­va­cy is “a jQuery plug­in that lets you add so­cial share but­tons to your web­site that don’t al­low the so­cial sites to track your user­s.” Nice!

Let’s go step-by-step in­to in­te­grat­ing So­cial­SharePri­va­cy in­to a Niko­la site. To im­prove pri­va­cy, they rec­om­mend you not use the host­ed ser­vice so we’ll do it the hard way, by get­ting and dis­tribut­ing ev­ery­thing in our own site.

http­s://github.­com/­panz­i/­So­cial­SharePri­va­cy

For test­ing pur­pos­es, let’s do it on a de­mo site:

$ 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/

To see what’s go­ing on, let’s start Niko­la in “au­to mod­e”. This should build the site and open a web brows­er show­ing the de­fault con­fig­u­ra­tion, with the Ad­dThis wid­get:

$ nikola auto -b

Now, download the current version and unzip it. You will have a So­cial­SharePri­va­cy-­mas­ter folder with lots of stuff in it.

First, we need to build it (this re­quires a work­ing and mod­ern ugli­fyjs, this may not be easy):

$ cd SocialSharePrivacy-master
$ sh build.sh -m gplus,twitter,facebook,mail -s "/assets/css/socialshareprivacy.css" -a off

You will now have several files in a build folder. We need to bring them into the site:

$ cp -Rv SocialSharePrivacy-master/build/* files/
$ cp -R SocialSharePrivacy-master/images/ files/assets/

Edit your conf.py:

BODY_END = """
<script src="/javascripts/jquery.socialshareprivacy.min.js"></script>
<script>
$(document).ready(function () {
    $('.share').socialSharePrivacy();
});
</script>
"""

SOCIAL_BUTTONS_CODE = """<div class="share"></div>"""

In my ex­pe­ri­ence this pro­duces a bro­ken, du­pli­cate, semi-­work­ing thing. YM­MV and if you make it work cor­rect­ly, let me know how :-)

The Easy Way

Go to http://­panz­i.github.io/­So­cial­SharePri­va­cy/ and use the pro­vid­ed form to get the code. Make sure you check “I al­ready use JQuery” if you are us­ing one of the themes that re­quire it, like site or de­fault, se­lect the ser­vices you wan­t, and use your dis­qus name if you have one.

It will give you 3 code snip­pet­s:

Insert this once in the head of your page”

Put it in BODY_END

Insert this wherever you want a share widget displayed”

Put it in SOCIAL_BUTTONS_CODE

Insert this once anywhere after the other code”

Put it in BODY_END

That should give you a work­ing in­te­gra­tion (not test­ed)