Alternative Social Buttons

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 us­ing the SO­CIAL_BUT­TON­S_­CODE op­tion in your con­f.py. In some cas­es, just ­do­ing that will be enough but in oth­er­s, it won’t. This doc­u­ment tries to de­scribe all the bit­s in­volved in mak­ing this work cor­rect­ly.

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 so­cial shar­ing code re­quires JS ex­e­cu­tion that de­pends on JQuery be­ing avail­able (ex­am­ple: So­cial­SharePri­va­cy). It’s good prac­tice (and of­ten, the on­ly 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 oth­er hand, it’s pos­si­ble that it re­quires you to load some CSS files. The right place for that is in the doc­u­men­t’s <HEAD> so they should be added in EX­TRA_­HEAD­_­DA­TA

Part 4: assets
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

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 cre­ate your own theme in­her­it­ing from the one you are us­ing and add the CSS and JS files from ShareNice in­to your bun­dles con­fig­u­ra­tion so they are com­bined and mini­fied.

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­ y­our 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, down­load the cur­rent ver­sion and un­zip it. You will have a So­­cial­SharePri­­va­­cy-­­mas­ter fold­er 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 sev­er­al files in a build fold­er. We need to bring them in­to the site:

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

Ed­it your con­f.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 y­ou 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)