Updated on | #shariff, #modx, #ludwigshariff | 9 User comments | 1 Shares

LudwigShariff - Shariff social media buttons for Modx

Social buttons from Facebook, Google+ or Twitter became very popular. However, these buttons send private information to these social networks even if the user doesn't click them, but even if they are just present on a webpage. These social networks are able to track which websites users are visiting and are able to build fairly complete browser histories of their users. Hence, your visitors have no control about their identifiable information, which could be sexual orientation, political and religious views, race, substance use, intelligence or personality.

What is LudwigShariff?

This MODX Extra LudwigShariff is based on Shariff (/ˈʃɛɹɪf/), that prevents your visitors from profiling when they are visiting your website. Shariff is initiated by German Computer Technology Magazine (c't) and replaces the usual Share buttons of social networks and protects your visitors from prying eyes.

LudwigShariff consists of two parts:

  • The Shariff JavaScript client library that is using JQuery as well as CSS that is using Font Awesome
  • A MODX backend component, which is able to cache the social network requests

MODX fetches the number of likes, tweets and plus-ones. Share buttons and share counts work without a connection between your visitors' browsers and social networks (unless they decide to share, of course).

And if you like this Extra, please don't forget to share this page ;).

Demo and Documentation

If you have no experience with the installation of an ModX Add-on Package via the Package Management, it would be the best for you to follow the Package Installation Guide.

Options

System Settings

After a successful installation of LudwigShariff you are able to setup the following settings in System -> System Settings -> Namespace "ludwigshariff" -> Area "general":

KeyValueDescription
ludwigshariff.activated1Activate the Extra (Yes or No)
ludwigshariff.cache_expires3600Cache Service Requests for X seconds (Number)
ludwigshariff.external_domainsWhitelist of domains e.g. heise.de,modx.com (String, comma separated)
ludwigshariff.servicestwitter,facebook,googleplus,linkedin,pinterest,xing,whatsappWhitelist of social service providers (String, comma separated)
ludwigshariff.version1.0Latest version of this Extra

Default Snippet Options

In order to integrate LudwigShariff into your MODX installation, a snippet called [[shariff]] is developed. It allows to use the following parameters:

ParameterDefault ValueDescription
&addcss1Load CSS automatically using MODX API
&addjs1Load JS automatically using MODX API
&needJquery1If you are using already JQuery, set this option to 0 (needs: &addjs=1)
&needASF1If you are using already Font Awesome, set this option to 0 (needs: &addcss=1)
&classshariffStandard CSS Class for Shariff
&infoUrlhttp://ct.de/-2467514Link to heise online
&orientationhorizontalVertical or horizontal orientation
&cssidSet an CSS ID for individual styling
&srvtwitter,facebook,googleplusPossible Services: twitter,facebook,googleplus,linkedin,pinterest,xing,whatsapp,mail,info
&themecolorPossible theme sets: color, white, grey
&lang?Language; The MODX CultureKey is used by default; You can only select de or en.
&backend1Use the social service backend to get clicks?
&email0The url target used for the mail service button
&tracknullA string that will be appended to the share url
&twittervianullScreen name of the user to attribute the Tweet to
&extUrlSet an external url and ignore the current page url. The domain must be defined in the ludwigshariff.external_domains whitelist. e.g. https://modx.com

Syntax: [[shariff]]

Backend

If you don't want to show the click counts, it is possible to deactive this by using the backend option.

ParameterValue
&backend0

Syntax: [[shariff? &backend=`0`]]

Services

By using the service option srv, you can choose the social networks that you want to use.

ParameterValue
&srvwhatsapp,facebook

Syntax: [[shariff? &srv=`whatsapp,facebook`]]

Theme and Language

It is also possible to use a grey and a white theme. Next to this, you can show an information button, which can be set by using infoUrl. Furthermore, you can set a language by using the option lang. At the moment, only english and german is available.

ParameterValue
&infoUrlhttp://google.com
&themegrey
&langde

Syntax: [[shariff? &theme=`grey` &lang=`de` &infoUrl=`http://google.com`]]

ParameterValue
&infoUrlhttp://google.com
&themewhite

Syntax: [[shariff? &theme=`white` &infoUrl=`http://google.com`]]

External URL

You can also share another website by using the extUrl option. In order to prevent unauthorized access from visitors, you have to set the domain on a whitelist, that can be found in the System Settings under ludwigshariff.external_domains. In this example, modx.com is set to the whitelist and so I'm able to provide a share option for this website.

ParameterValue
&extUrlhttp://modx.com
&themewhite

Syntax: [[shariff? &theme=`white` &extUrl=`http://modx.com`]]

Orientation

You have the choice between vertical or horizontal orientation. This can be done by using the option orientation.

ParameterValue
&orientationvertical

Syntax: [[shariff? &orientation=`vertical` &infoUrl=`http://example.com`]]

CSS individual style

By using Cascading Style Sheets and the option cssid, you are able to change the style. Here you can find a small example, where the id is named to shariffbox.

ParameterValue
&orientationvertical
&cssidshariffbox

Insert this css code into your page:

  1. #shariffbox {width: 50px;}
  2. #shariffbox .share_count, #shariffbox .share_text { display: none; visibility: hidden; }
  3. #shariffbox ul li {list-style-type: none;display: table-cell;height: 50px;margin: 0px;vertical-align: middle;text-align: center;}
  4. #shariffbox ul li a {height:100%}
  5. #shariffbox ul li .fa { width: 50px; line-height: 50px; font-size: 3em;}

The result is looking like this:

More Details

Load JS manually

MODX has a feature called modX.regClientScript, that register JavaScript files before the closing BODY tag. I implemented this feature in this Extra by using &addjs=`1`. If you don't want or you can't use this feature, you can also do this manually. Insert the following Script into the head tag:

<script src="/assets/components/ludwigshariff/js/shariff.min.js"></script>

If you don't use JQuery, please insert instead the following script into your head tag and set &needJquery=`1`:

<script src="/assets/components/ludwigshariff/js/shariff.complete.js"></script>

ParameterValue
&addjs0
&needJquery1 or 0

Syntax: [[shariff? &addjs=`0` &needJquery=`0`]]

Load CSS manually

MODX has a feature called modX.regClientCSS, that register CSS files before the closing HEAD tag. I implemented this feature in this Extra by using &addcss=`1`. If you don't want or you can't use this feature, you can also do this manually. Insert the following link into the head tag:

<link rel=stylesheet href="/assets/components/ludwigshariff/css/shariff.min.css" type="text/css"/>

If you don't use Font-Awesome, please insert instead the following script into your head tag and set &needASF=`1`:

<link rel=stylesheet href="/assets/components/ludwigshariff/css/shariff.complete.css" type="text/css"/>

ParameterValue
&addcss0
&needASF1 or 0

Syntax: [[shariff? &addcss=`0` &needAFS=`0`]]

ShariffInfo Snippet

The ShariffInfo snippet shows the latest share counts in schema.org/UserInteraction format. If you have an better idea about a suited Microformat, please don't hesitate to post it here. You can use this snippet by inserting [[shariffinfo]] in your template. This snippet is only available in LudwigShariff version > 1.0.0. The following input parameters can be used:

ParameterDefault ValueDescription
&tplshariffinfoUse the shariffinfo chunk

The chunk ShariffInfo looks like this:

  1. <data itemprop="interactionCount" value="UserCheckins:[ [+total] ]">[ [+total] ] Shares</data>
  2. <meta itemprop="interactionCount" content="UserTweets:[ [+twitter] ]"/>
  3. <meta itemprop="interactionCount" content="UserLikes:[ [+facebook] ]"/>
  4. <meta itemprop="interactionCount" content="UserPlusOnes:[ [+googleplus] ]"/>

Please delete the whitespaces between the two [ [ and ] ]. Next to total, all output parameters (services) are defined in System Settings under ludwigshariff.services.

Source Code

All LudwigShariff source code can be seen on my GitHub folder and the original Shariff from Heise can be seen on Heise's GitHub folder.

Build from GitHub

At first you have to clone the code from GitHub:

  1. cd /tmp
  2. git clone --recursive https://github.com/MoonMaker/modx.git
  3. cd modx/Shariff/_build/

Change your modx path in build.config.php:

  1. nano /tmp/modx/Shariff/_build/build.config.php
  1. define('MODX_BASE_PATH', '/var/www/modx/');

The last step is to build the transport package and to change the package owner:

  1. php -f /tmp/modx/Shariff/_build/build.transport.php
  2. chown -R www-data:www-data /var/www/modx/core/packages/ludwigshariff*

The Add-on package will be generated in /var/www/modx/core/packages. You can use the ModX Package Manager to install it.

Well, what do you think?

??????? ????????? said
Hello. Set your script. Customize style. But why is not working the counter: (
Site jinini.com
Thomas Ludwig said
Hi, I think this is an old bug. On github you can find the latest version. I have to publicate it on modx.com.
??????? ????????? said
I can not be updated because: (I would be very grateful to you if you upgrade an excellent addition to the modx.com
Thomas Selter said
Hi there! I ave got the same problem as ??????? ?????????, but even though I think I've installed the latest version via the package-managent (v1.13.0) the counter is not showing...can you please tell what to do?
Thomas Ludwig said
Hi Thomas,
hmm I'm using this version on this website, too. Can you give me more information what is not working?

Cheers
Thomas Selter said
Hello and thanks for your reply. As mentioned the counter doesn't show up. I added the package in modx and the snippet in my source code. So the Facebook-share button is showing up. Then I shared the site by clicking on the button, but the counter is still not showing anything. I'd also like to know if the counter only shows "shares" or is it possible to show the amount of "likes" as well?
Thomas Selter said
Hi again! I installed this Extra through the package-management in another project, and I still have the same problem, thatt the "counter" doesn't get displayed.

I'm using it like this:
Pavel Kravchuk said
Hi!
I have an issue with this component. It does not show counters only on homepage. I see following error in the modx log:
modrest.class.php : 280) PHP warning: curl_setopt_array(): Array keys must be CURLOPT constants or equivalent integer values

Other internal pages work fine. Could you help me to resolve this issue. Thank you.

I'm using latest version of component (v1.13.0)
modx 2.4.0, Curl version 7.36, php 5.6
hgw7m said
Ist this Extra still supported in MODX 2.4, 2.5? Great work, Thx!
Comments powered by LudwigDisqus for ModX