Installation

Install the extension via Extension Manager as usual.

The provided Javascript requires jQuery to be loaded. You have to take care of this on your own. The example below shows that too.

Configuration

You can configure the extension in the Extension Manager. It allows to set most of the options for the backend module as documented here: https://github.com/heiseonline/shariff-backend-php

JavaScript and CSS integration

The extension also ships the Frontend Javascript and default styles of Shariff. You can simple add one of the four available static templates:

Shariff: Include Shariff and jQuery
Shariff: Include Shariff, font-awesome and jQuery
Shariff: Include Shariff without jQuery
Shariff: Include Shariff, font-awesome without jQuery

jQuery is included by using the local jQuery version shipped with the TYPO3 CMS Core.

Note

In case you want to integrate the Javascript and CSS in your asset workflow (e.g. gulp or grunt) you don't need to include any static template or TypoScript

If you want, you can also simply integrate them manually in your own page template:

page = PAGE

page.javascriptLibs.jQuery = 1
page.javascriptLibs.jQuery.version = latest
page.javascriptLibs.jQuery.source = local

page.includeJSFooter.shariff = EXT:rx_shariff/Resources/Public/Css/shariff.min.js
page.includeCSS.shariff = EXT:rx_shariff/Resources/Public/Css/shariff.min.css
# or you may use the following for include font-awesome too
# page.includeCSS.shariff = EXT:rx_shariff/Resources/Public/Css/shariff.complete.css

Important

The Javascript has to be included in your frontend page in either way, otherwise the usages described below will not work.

Frontend usage

The extension provides multiple ways to use Shariff in frontend.

Pure TypoScript

For TypoScript usage, the extension provides a default typolink setup to generate the necessary backend-url. The setup can be used like this:

lib.shariffBackendUrl < plugin.rx_shariff.data-backend-url

Fluid viewhelper

Additionally the extension provides a Fluid viewhelper to easily integrate Shariff into your HTML template.

<div xmlns:rx="http://typo3.org/ns/Reelworx/RxShariff/ViewHelper">
	<rx:shariff data="{url: 'http://example.com/'}" services="whatsapp,facebook" enableBackend="true" />
</div>

Optionally you can define all data attributes available for Shariff.

Example usages can be found here: http://heiseonline.github.io/shariff/

Frontend plugin

Simply add a new content element to a page and select the "Shariff Social Icons" plugin. Adjust the configuration as needed.

Nice to know

News integration

You can also easily use this extension within your News extension template. Simply paste the viewhelper into your Detail.html template, include one of the static templates and you are ready to go.