Social media Sharing

Published by george on Friday, July 8, 2022, revised by fraenkiman

Webshare API is another good way of sharing webpage / links from your website, if you try it from your mobile phone you will find that you can share to any of your installed apps very easily this works using android and apple phone and most tablets, Ubunto and windows desktops ,Also works using firefox, chrome,edge and opera browsers

First find and edit the file fp-interface/themes/YOUR THEME/static.tpl and find this line 12 {$content|tag:the_content}

Paste the following code below it then save the file back to your server.

<input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />

Your new webshare API button will now show on each of your static pages.

To add webshare API to all your posts your must edit the file /fp-interface/themes/YOUR THEME/entry-default.tpl.

Paste the following code above the last </div> (Line 40) and then save the file back to your server.

<input type="button" value="Share this entry" class="the-share-button" onclick="shareTheLink()" />

Save the file and put it back on your server.

Edit the file fp-interface/themes/YOUR THEME/header.tpl

Add the following script above the line 7 {action hook=wp_head} a.

<script src="{$smarty.const.BLOG_BASEURL}webshare/share-min.js"></script>
	<script>{literal}
		function shareTheLink () {
			navigator.share({
				title: '{/literal}{$flatpress.title}, {$flatpress.subtitle}{literal}',
				text: 'I thought you might like this.',
				url: location.href,
			// extra, optional options
				fbId: '', // Facebook App Id to enable sharing with Messenger (https://webkul.com/blog/how-to-generate-facebook-app-id/)
				hashtags: ['{/literal}{$flatpress.title}', '{$flatpress.subtitle}', '{$flatpress.author}{literal}'] // Pass hashtags to use when sharing to Twitter or Facebook
			},{
			// change this configurations to hide specific unnecessary functions
			// Since your mobile device likely has native support for the Share API, it will be ignored and only applied to desktops.
				copy: true,
				email: true,
				print: true,
				sms: true,
				messenger: true,
				facebook: true,
				whatsapp: true,
				twitter: true,
				linkedin: true,
				telegram: true,
				skype: true, // Turns off Skype SDK and 3rd party libraries
				language: '{/literal}{$fp_config.locale.lang}{literal}' // specify the default language by fp
			})
			.then( _ => console.log('Yay, you shared it! :)'))
			.catch( error => console.log('Oh noh! You couldn\'t share it! :\'(\n', error));
		}{/literal}
</script>

now all your posts will have a webshareAPI button

if you prefer to host your own js file you can download it from https://www.mypoppy.uk/webshare/share-min.zip just make sure your edit the above code so it points to your js file, test this on my website https://www.mypoppy.uk/blog just look for the webshare button below each post or page.If you are using a tablet or phone you may need to click on the more button when it opens

With a bit of manual work, the Webshare API adopts Flatpress's language settings and can be supplied with Flatpress' standard variables. I took the files from the FP-1.3dev master branch and adapted them. If you want to test it, you can unpack the packed directory structure in FP-Root.

www-root
	│
	├── fp-interface
	│       ├── lang
	│  	│     ├── en-us
	│  	│     │	   └──────── lang.default.php			// Part of the standard distro
	│  	│     ├── de-de
	│  	│     :	   └──────── lang.default.php			// Part of the standard distro
	│  	│							
	│  	├── sharedtpls
	│  	│	├──────────── webshare_api.tpl
	│  	│	├──────────── static_webshare_button.tpl
	│  	│	└──────────── entry_webshare_button.tpl
	│       └── themes
	│    	     └──leggero
	│    		├──────── entry-default.tpl			// Part of the standard distro
	│    		└──────── static.tpl				// Part of the standard distro
	└── fp-plugins
	    └── webshare
	   	 	├── res
	   	 	│	├──────── share.js			// Webshare-API
	     	        │	└──────── share.css			// CSS for Share-Button
			├──────────── Get-Facebook-App-ID.zip		   
			└──────────── doc_webshare.txt			// this File