---
title: "Installation"
manual: "Shariff-Plus – Social Media Buttons With Privacy"
version: "main"
permalink: "https://docs.typo3.org/permalink/reelworx/rx-shariff:installation@main"
source: "Installation/Index.rst"
rendered: "2026-11-11T16:39:12+00:00"
---

# Installation {#installation}

Install the extension via the Extension Manager as usual.

## Configuration {#configuration}

Some settings of the extension have to be configured centrally in the Extension Manager.
Those are most of the options for the backend module as documented here: [https://github.com/heiseonline/shariff-backend-php](https://github.com/heiseonline/shariff-backend-php)

> [!NOTE]
> Technical note: The backend module is implemented as eID script. Therefore it is not possible to define these settings in
> your TypoScript template, as fetching this configuration would mostly kill the benefits of eID scripts.
> Multi-Domain sites, which require different settings per domain are therefore not supported currently.

### JavaScript and CSS integration {#javascript-and-css-integration}

The extension ships the Frontend Javascript and default styles of Shariff.
You have to add one of the available site sets (TYPO3 13 and newer) or static templates:

| Static template | Site set |
| --- | --- |
| Shariff: Plugin settings only | `reelworx/rx-shariff` |
| Shariff: Plugin settings, FE styles without Font-Awesome | `reelworx/rx-shariff-without-font-awesome` |
| Shariff: Plugin settings, FE styles incl. Font-Awesome | `reelworx/rx-shariff-with-font-awesome` |

Add the site set to the dependencies of your site configuration or site package set:

```yaml
dependencies:
  - typo3/fluid-styled-content
  - reelworx/rx-shariff-with-font-awesome
```

> [!NOTE]
> If the site also has a TypoScript record with "Clear setup" enabled, the TypoScript of site sets is discarded.
> Use either the site set or the static template.

The JavaScript is an ES module and must be included with `type="module"`. jQuery is not needed.

> [!TIP]
> **Hint**
>
> Include the first template if you want to integrate the Javascript and CSS in your asset workflow (e.g. gulp or grunt) directly.

> [!IMPORTANT]
> Upgrading from version 16 or earlier: the static templates have been renamed in version 17.0.0.
> Re-select the static template in your TypoScript records, otherwise no JavaScript and CSS are included
> and the buttons are not shown. `@import` statements and site sets referencing
> `EXT:rx_shariff/Configuration/TypoScript/fullJsWFA`, `fullJsNoFA`, `minJsWFA` or `minJsNoFA`
> must be changed to `WithFontAwesome` or `WithoutFontAwesome`.

## Frontend usage {#frontend-usage}

The extension provides multiple ways to use Shariff in Frontend.

[https://github.com/richard67/shariff-plus?tab=readme-ov-file#options-data-attributes](https://github.com/richard67/shariff-plus?tab=readme-ov-file#options-data-attributes)

### Content Element plugin {#content-element-plugin}

This is the easiest way to use Shariff.

Simply add a new content element to a page and select the "Shariff Social Icons" plugin.
All configuration options can be adjusted as needed.

This is especially useful for editors, who should be able to put the Shariff buttons on arbitrary places on the site.

### Fluid view helper {#fluid-view-helper}

For developers a convenient view helper is available to integrate Shariff into your extension's HTML template.

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

**Optionally you can define all data attributes available for Shariff.**

For your comfort the language for Shariff is automatically determined from your current page language.

More example usages can be found here: [https://www.richard-fath.de/shariff-plus-demo/index.html](https://www.richard-fath.de/shariff-plus-demo/index.html)

> [!TIP]
> **Hint**
>
> Did you know that the tx_news extension automatically uses Shariff if present in the system? Nice, isn't it?

### Pure TypoScript {#pure-typoscript}

The plugin can also be rendered via TypoScript the usual way. All settings are available in TypoScript as well.

```typoscript
page.20 < tt_content.list.20.rxshariff_shariff
```

The various settings are listed below.

If you need maximum flexibility in your integration, there is also a way to retrieve the backend module (eID script) URL via TypoScript.

```typoscript
data-backend-url = TEXT
data-backend-url.stdWrap.typolink {
  parameter = #
  additionalParams = &eID=shariff
  returnLast = url
}
```

### Pure Fluid {#pure-fluid}

Since TYPO3 10 LTS (or by using the [assets collector extension](https://extensions.typo3.org/extension/assetcollector/)) shariff can also be included using Fluid solely.

```html
<html xmlns:rx="http://typo3.org/ns/Reelworx/RxShariff/ViewHelper">
    <f:asset.css identifier="shariff-css" href="EXT:rx_shariff/Resources/Public/Css/shariff.min.min.css" />
    <f:asset.script identifier="shariff-js" src="EXT:rx_shariff/Resources/Public/JavaScript/shariff.complete.min.js" type="module" />
    <rx:shariff services="facebook,twitter" />
</html>
```

## Nice to know {#nice-to-know}

### Finding the logs {#finding-the-logs}

The extension uses the TYPO3 logging facility to log warnings when fetching counts from the various social media platforms.
If you encounter problems, take a look into the logs, usually located in the `var/log/` folder.

### Predefining plugin options {#predefining-plugin-options}

It may be your requirement to have some of the options the plugin is providing predefined and hidden from the user.
This is easily doable by changing the default value for those options with TypoScript.

The default settings provided by the extension are:

```typoscript
tt_content.list.20.rxshariff_shariff {
   settings {
      enableBackend = 1
      data {
         lang = auto
         mail-body =
         mail-subject =
         mail-url = mailto:
         media-url = null
         orientation = horizontal
         referrer-track = null
         services =
         theme = standard
         twitter-via = null
      }
   }
}
```

Override those settings for your needs and hide the fields in the plugin configuration accordingly.
Use default `TCEFORM` page TSconfig settings to achieve this. Take a look into the Page TSconfig Reference.

Examples:

```typoscript
TCEFORM.tt_content.pi_flexform.rxshariff_shariff.sDEF.settings\.enableBackend.disabled = 1
TCEFORM.tt_content.pi_flexform.rxshariff_shariff.services.disabled = 1
```