ShareButtons

Summary: Social media sharing buttons without tracking or JavaScript
Version: 20220820
Prerequisites: PmWiki 2.2.58
Status: Experimental
Maintainer: Petko
License: GPLv3+
Users: +3 (view / edit)
Discussion: ShareButtons-Talk

Allow visitors to share my wiki content by e-mail and on social media platforms in an easy way, while limiting user tracking by these platforms.

Description

Social media sharing buttons without tracking or JavaScript.

The recipe provides static HTML code with icons and styles, linking to the "Share" functions of these social media platforms: Facebook, Twitter, Tumblr, Pinterest, Reddit, WhatsApp.

A user of a platform clicking on an icon will be able to easily share the current page in his/her social media profile.

Visitors that are not users of these platforms, or that are not logged in their social profile while browsing your wiki will not be tracked/profiled by the platforms.

Installation

  1. Place sharebuttons.phpΔ in your pmwiki/cookbook directory.
  2. Add to config.php this line:
    include_once("$FarmD/cookbook/sharebuttons.php");

Configuration

When a user clicks on an icon, the recipe shares with the platform the URL of the current page, and (if the platform allows it) the title of the current page.

By default the {$Title} page variable is expanded but you can configure it this way in config.php:

  $ShareButtons['DefaultShareText'] = '$Titlespaced'; # use the "spaced" title
  $ShareButtons['DefaultShareText'] = '$Description'; # use the (:description:) content
  $ShareButtons['DefaultShareText'] = '$:Summary'; # use a PageTextVariable

By default the {$PageUrl} page variable is sent to the sharing platform. You can change the shared URL by using a (custom) page variable, for example added by a recipe:

  $ShareButtons['DefaultShareUrl'] = '$ScriptUrl';  # homepage instead of current
  $ShareButtons['DefaultShareUrl'] = '$ShortUrl';   # (added by a recipe)
  $ShareButtons['DefaultShareUrl'] = '$RequestUrl'; # (see talk page)

To select the default buttons and their order:

  # Default are 'email,facebook,twitter,tumblr,pinterest,reddit,whatsapp'
  $ShareButtons['DefaultButtons'] = 'reddit,twitter,pinterest';

Other variables:

  # The HTML snippet for the links and buttons, see source
  $ShareButtons['fmt'] = '...'; 

  # The separator between the buttons, default '  '
  $ShareButtons['separator'] = '$nbsp; '; 

If you use B3 blog version 20190826 or newer, you can automatically insert the share buttons in all blog entries with this line in config.php:

  $B3['ShareMarkup'] = '(:share:)';

To change the default dimensions of the buttons, add to pub/css/local.css something like:

  .sharebuttons svg {
    /* larger space between buttons */
    margin: .2em .2em 0 0;
    /* smaller overall size */
    width: 1.5em;
    height: 1.5em;
  }

Keep in mind that on a mobile device the buttons need to be at the very least 10mm or 3/8 inch to be easy to touch by a finger, and not too close from other active elements.

Usage

In a wiki page, place (:share:) where you want the icons to appear:

(:share:)

           

You can set a custom text that will be shared, instead of the default title:

(:share title="My page":)

           

You can select buttons in a specific order, instead of the default ones:

(:share buttons="twitter,reddit,email":)

   

The shared link can point to a different page:

(:share page=ShareButtons-Talk:)

           

The shared link can point to a different URL:

(:share url="https://www.pmwiki.org/":)

           

You can have any or all arguments among title="..." buttons="..." page="...". An url="..." argument will override a page="..." argument, for example if you want to share the website root URL without the "Main/HomePage" part.

Notes

  • Some platforms (notably Facebook) ignore the title/text defined in the directive. Instead their bots download the submitted page and use the metadata from the HTML source.
  • It is possible that in the future a platform modifies their submission form, and a button stops working. If that happens, please report so we can update this recipe.
  • If your (:share:) markup is inside an included page, the "share" links will point to the current browsing page. Use (:share page={$FullName}:) to point to the included page.

To do / some day / maybe

Some day, if there is interest/funding: please request features.

Change log / Release notes

  • 20220820 Update for PHP 8.1.
  • 20200128 fix share links were incorrectly qualified, reported by SteP.
  • 20200127 Add url="..." argument.
  • 20200125 Improvements for better RSS integration (with B3): add configurable snippet, add background inside the SVG, simplify CSS, fix share links were incorrectly qualified.
  • 20190905 Add $ShareButtons['DefaultShareUrl'].
  • 20190901 Rewrote the recipe to allow custom selection and order of the buttons. Fix bug with the directive in the sidebar (reported by RandyB).
  • 20190826 First public release, ready to be tested.

See also

Cookbook /
AddThisWidget  Embed the 'AddThis' widget to enable easy sharing of webpages on facebook, delicious, twitter, and other social networking sites.
EmbedTweet  a recipe to embed live tweets from twitter.com using Twitter's oembed API facility (stable)
FacebookLinkInto  "Like" your wiki pages into Facebook.
ShareButtons  Social media sharing buttons without tracking or JavaScript (Experimental)
ShortURLs  shorten URLs using bit.ly, including a markup expression and a function for further coding
Twitter  Display twitter-messages and twitpics from any member in your page.
TwitterPost  easily post updates to your Twitter account via PHP functions (not currently working, as of Summer 2010 - twitter has switched to OAuth - recipe to hopefully be updated soon)

Contributors

Recipe written and maintained by Petko. The icon paths were generated by Petko at https://sharingbuttons.io/ but the code snippets and CSS are completely different.

Comments

See discussion at ShareButtons-Talk

User notes +3: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.