Web Design Blog

Embedding social share buttons is easy – unless you live in Germany. Data privacy regulations forbid using the standard embed codes directly. Fortunately the jQuery plugin socialSharePrivacy makes it easy to embed social share buttons within German law. But socialSharePrivacy uses the iframe version of Facebook’s Like button. I wanted to use the HTML5 Like button version to give website visitors the chance to add individual message to the post. So I forked the jQuery plugin.

The HTML5 version of Facebook’s Like button displays a popup box after you click the button, as you can see on the image above. This allows users to add an individual text to the timeline posting which is created by the Like button. To use this version of the Like button within socialSharePrivacy you need two things: Facebook’s JavaScript SDK included on your page and an app ID.

Since the original socialSharePrivacy jQuery plugin is not available on GitHub, I used Gregory Igelmund’s fork of the extended Plugin version Socialshareprivacy-XL (by Illusions-Schmiede) as basis for my fork. Socialshareprivacy-XL adds support for LinkedIn and XING to the original plugin.

I know that much more advanced versions of the plugin can be found on the web, with support of a wide range of social media platforms. But these heavily extended plugin versions changed the syntax of some parameters to trigger certain options. However, I wanted to maintain interoperability with CMS plugins etc. which are based on the original socialSharePrivacy version. And besides that, I am not a big fan of huge button armadas underneath an article. The LinkedIn and XING options of Socialshareprivacy-XL are nice though because I use these business social networks.

Just Add an App ID and Enjoy Additional Facebook Sharing Comfort

Choosing between the two Facebook Like button variants is super-simple. For this purpose I just reactivated the old “app_ID” parameter which was skipped in verison 1.2 of the original socialSharePrivacy plugin.

As soon as you provide an app ID by using this parameter, the plugin now embeds the HTML5 version of the Like button.

$('#socialshareprivacy').socialSharePrivacy({ services : { facebook : { 'app_id' : '123456789012345' // use your facebook app ID } }
});

You can find more information on using the plugin in the included readme files.

Download or Fork

You can find the extended version of the extended socialSharePrivacy plugin on GitHub.

Download
on GitHub