Differences

This shows you the differences between two versions of the page.

--- doc:tips:webshareapi [2022/07/09 16:29] – georgehall
+++ doc:tips:webshareapi [2024/12/13 00:45] (current) – [Demo and Download by George] Is outdated/ Domain down fraenkiman
@@ Line 1: / Line 1: @@
-Social media Sharing
+====== Social media Sharing ======
-Published by george on Friday, July 8, 2022
-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
+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
-first find and edit the file fp-interface/themes/YOUR THEME/static.tpl and find this line
-{/static}
+==== How to integrate with Flatpress ====
-paste the following code below it then save the file back to your server
+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}''
-<code>
+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()" />
-<script {literal}src="https://unpkg.com/share-api-polyfill/dist/share-min.js">">{/literal}</script>
+</code>
-  <!-- <script src="../dist/share-min.js"></script> -->
+Your new webshare API button will now show on each of your static pages.
-  <script>{literal}
-      function shareTheLink () {
-          navigator.share({
-          title: 'view this post',
-          text: 'I thought you might like this.',
-          url: location.href,
-          fbId: '',
+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]].
-          hashtags: ['javascript', 'shareAPI']
-        },
-        {
-          // change this configurations to hide specific unnecessary icons
-          copy: true,
-          email: true,
-          print: true,
-          sms: true,
-          messenger: true,
-          facebook: true,
-          whatsapp: true,
-          twitter: true,
-          linkedin: true,
-          telegram: true,
-          skype: true,
-          language: 'en-gb'
-        })
-        .then( _ => console.log('Yay, you shared it :)'))
-        .catch( error => console.log('Oh noh! You couldn't share it! :'(n', error));
-    }{/literal}
-  </script>
-</div></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 /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.
-find the line
+<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.
-{if ($categories)} Published by {$author} in {$categories|@filed}|{/if} {$comments|tag:comments_number}
+Edit the file [[https://github.com/flatpressblog/flatpress/blob/master/fp-interface/themes/leggero/header.tpl|fp-interface/themes/YOUR THEME/header.tpl]]
- paste the following code below it then save the file back to your server
+Add the following script above the line 7 ''{action hook=wp_head}''
-<code><input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />
+a.
-<script {literal}src="https://unpkg.com/share-api-polyfill/dist/share-min.js">">{/literal}</script>
+<code html>
-  <!-- <script src="../dist/share-min.js"></script> -->
+<script src="{$smarty.const.BLOG_BASEURL}webshare/share-min.js"></script>
-  <script>{literal}
+	<script>{literal}
-      function shareTheLink () {
+		function shareTheLink () {
-          navigator.share({
+			navigator.share({
-          title: 'view this post',
+				title: '{/literal}{$flatpress.title}, {$flatpress.subtitle}{literal}',
-          text: 'I thought you might like this.',
+				text: 'I thought you might like this.',
-          url: location.href,
+				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>
-          fbId: '',
-          hashtags: ['javascript', 'shareAPI']
-        },
-        {
-          // change this configurations to hide specific unnecessary icons
-          copy: true,
-          email: true,
-          print: true,
-          sms: true,
-          messenger: true,
-          facebook: true,
-          whatsapp: true,
-          twitter: true,
-          linkedin: true,
-          telegram: true,
-          skype: true,
-          language: 'en-gb'
-        })
-        .then( _ => console.log('Yay, you shared it :)'))
-        .catch( error => console.log('Oh noh! You couldn't share it! :'(n', error));
-    }{/literal}
-  </script>
-</div></code>save the file and put it back on your server
 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|External Link]] 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
+===== 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>