ShareButtons
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
- Place sharebuttons.phpΔ in your
pmwiki/cookbook
directory. - 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.