Alternative Social Buttons

Version: 7.7.12

The Default

By De­fault, the themes pro­vi­ded with Ni­ko­la will add to your pages a “s­lide in” wid­get at the bot­tom right of the pa­ge, pro­vi­ded by Add­this. 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 SO­CIAL_­BUT­TONS_­CODE op­tion in your conf.­py. In some ca­ses, just ­doing that will be en­ough but in others, it won’t. This do­cu­ment tries to des­cribe all the bits in­vol­ved in ma­king 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 sha­ring code re­quires JS exe­cu­tion that de­pends on JQue­ry being avai­la­ble (exam­ple: So­cial­Sha­re­Pri­va­cy). It’s good ­prac­tice (and of­ten, the on­ly way that will work) to put those at the end of <BO­DY>, and one ea­sy way to do that is to put them in BO­DY_END

On the other hand, it’s pos­sible that it re­quires you to load some CSS files. The right place for that is in the do­cu­ment’s <HEAD> so they should be ad­ded 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

Sha­re­nice is “writ­ten in or­der to pro­vide so­cial sha­ring fea­tures to ­web de­ve­lo­pers and web­site ad­mi­nis­tra­tors who wish to main­tain and pro­tect their users’ pri­va­cy” w­hich sounds co­ol to me.

Let’s go step by step in­to in­te­gra­ting the hos­ted ver­sion of Sha­re­Nice in­to a Ni­ko­la site.

For tes­ting pur­po­ses, let’s do it on a de­mo si­te:

$ 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 going on, let’s start Ni­ko­la in “au­to mo­de”. This should build the ­site and open a web brow­ser sho­wing the de­fault confi­gu­ra­tion, with the Add­This wid­get:

$ nikola auto -b

First, let’s add the HTML snip­pet that will show the sha­ring op­tions. In your conf.­py, set this, whi­ch is the HTML code sug­ges­ted by Sha­re­Ni­ce:

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 sha­ring box at the bot­tom right of the page.

Main pro­blem re­mai­ning is that it doesn’t real­ly look good and in­te­gra­ted in the page layout. I sug­gest chan­ging the code to this which looks ni­cer, but still has some pla­ce­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 anyone comes up with a bet­ter idea of sty­ling/­pla­ce­ment, just let me know ;-)

One bad bit of this so far is that you are now using a script from ano­ther si­te, and that ­doesn’t let Ni­ko­la per­form as ma­ny op­ti­mi­za­tions to your page as it could. ­So, if you real­ly want to go the ex­tra mile to save a few KB and round trips, you could ins­tall your own co­py from the gi­thub re­po and use that ins­tead of the co­py at sha­re­nice.org.

Then, you can create your own theme in­he­ri­ting from the one you are using and add the CSS and JS files from Sha­re­Nice in­to your bundles confi­gu­ra­tion so they are com­bi­ned and ­mi­ni­fied.

SocialSharePrivacy

The Hard Way

So­cial­Sha­re­Pri­va­cy is “a jQue­ry plu­gin that ­lets you add so­cial share but­tons to your web­site that don’t al­low the so­cial sites to tra­ck your users.” Ni­ce!

Let’s go step-­by-­step in­to in­te­gra­ting So­cial­Sha­re­Pri­va­cy in­to a Ni­ko­la site. To im­pro­ve ­pri­va­cy, they re­com­mend you not use the hos­ted ser­vice so we’ll do it the hard way, by ­get­ting and dis­tri­bu­ting eve­ry­thing in our own site.

https://­gi­thub.­com/­pan­zi/­So­cial­Sha­re­Pri­va­cy

For tes­ting pur­po­ses, let’s do it on a de­mo si­te:

$ 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 going on, let’s start Ni­ko­la in “au­to mo­de”. This should build the ­site and open a web brow­ser sho­wing the de­fault confi­gu­ra­tion, with the Add­This wid­get:

$ nikola auto -b

Now, down­load the cur­rent ver­sion and un­zip it. You will have a So­­cial­­Sha­­re­­Pri­­va­­cy-­­mas­­ter fol­der with lots of stuff in it.

First, we need to build it (this re­quires a wor­king and mo­dern ugli­fy­js, this may not be ea­sy):

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

You will now have se­ve­ral files in a build fol­der. We need to bring them in­to the si­te:

$ 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­rience this pro­duces a bro­ken, du­pli­ca­te, se­mi-­wor­king thing. YMMV and if you make it work cor­rect­ly, let me know how :-)

The Easy Way

Go to http://­pan­zi.­gi­thub.io/­So­cial­Sha­re­Pri­va­cy/ and use the pro­vi­ded form to get the code. Make sure you check “I al­rea­dy use JQue­ry” if you are using one of the themes that re­quire it, like site or de­fault, se­lect the ser­vices you want, and use your dis­qus name if you have one.

It will give you 3 code snip­pets:

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 wor­king in­te­gra­tion (not tes­ted)