====== Social media Sharing ======


Published by george on Friday, July 8, 2022, revised by [[https://frank-web.dedyn.io|fraenkiman]]

[[https://github.com/on2-dev/share-api-polyfill/tree/main/dist|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

==== How to integrate with Flatpress ====

First find and edit the file [[https://github.com/flatpressblog/flatpress/blob/master/fp-interface/themes/leggero/static.tpl|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.

<code html>
<input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />
</code>
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 [[https://github.com/flatpressblog/flatpress/blob/master/fp-interface/themes/leggero/entry-default.tpl|/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.
<code html>
<input type="button" value="Share this entry" class="the-share-button" onclick="shareTheLink()" />
</code>
Save the file and put it back on your server.

Edit the file [[https://github.com/flatpressblog/flatpress/blob/master/fp-interface/themes/leggero/header.tpl|fp-interface/themes/YOUR THEME/header.tpl]]

Add the following script above the line 7 ''{action hook=wp_head}''
a.
<code html>
<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>
</code>

now all your posts will have a webshareAPI button



===== Language settings and adoption of Flatpress variables =====

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 {{ res:plugins:frank:webshare-api-en-de.zip|packed}} directory structure in FP-Root.


==== The file and directory structure ====

<code>
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
</code>