Page 1 of 1

using webshare API

Posted: Tue Jun 21, 2022 10:02 am
by George
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 demo is on https://www.mypoppy.uk/blog/

first find and edit the file /fp-interface/themes/YOUR THEME/static.tpl and find this line
{/static}
paste the following code below it then save the file back to your server

Code: Select all

<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>
  <!-- <script src="../dist/share-min.js"></script> -->
  <script>{literal}
      function shareTheLink () {
          navigator.share({
          title: 'view this post',
          text: 'I thought you might like this.',
          url: location.href,
          

          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>
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
find the line
<p class="postmetadata">{if ($categories)} Published by {$author} in {$categories|@filed}|{/if} <a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number}</a> </p>
and paste the following code below it

Code: Select all

    
<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>
  <!-- <script src="../dist/share-min.js"></script> -->
  <script>{literal}
      function shareTheLink () {
          navigator.share({
          title: 'view this post',
          text: 'I thought you might like this.',
          url: location.href,
          

          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>
save the file and put it back on your server
now all your posts will have a webshareAPI button

Re: using webshare API

Posted: Sat Jul 09, 2022 11:48 am
by Arvid
Hi,

thanks for sharing (hrhr) this!
If you like, freel free to make this permanent on a wiki page linked from https://wiki.flatpress.org/doc:tips :)

All the best,
Arvid

Re: using webshare API

Posted: Sat Jul 09, 2022 1:44 pm
by George
Thanks Arvid , i have added to wiki

Re: using webshare API

Posted: Thu Jul 28, 2022 1:28 pm
by Arvid
Awesome, thanks! :)

If anyone is curious: https://wiki.flatpress.org/doc:tips:webshareapi

Re: using webshare API

Posted: Sat Aug 13, 2022 1:42 am
by fraenkiman
George wrote: Sat Jul 09, 2022 1:44 pm Thanks Arvid , i have added to wiki
Thank you George for the find.

You've dug up something nice there.
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 master branch and adapted them. If you want to test it, you can unpack the packed directory structure in FP-Root.

I took the liberty of editing your wiki article a bit as it's not so good to put the init script under each post. It is better placed once in the head and is therefore only loaded once per page.

PS:
What's weird is that you have to "drown" the init script in {literal}{/literal} tags in order for it not to break the blog or even work at all.

Maybe someone likes to create a plugin.
Unfortunately I didn't succeed due to a lack of sufficient PHP and Java script knowledge.

Best Regards
Frank

Sorry for my bad english, google helped.

Re: using webshare API

Posted: Sat Aug 13, 2022 9:15 am
by George
hi guys, firstly i wouldn't bother with a plugin for three snippets of code pasted into the theme. it works fine out of the box :)
the {literal}{/literal} tags allow a block of data to be taken literally. This is typically used around Javascript or stylesheet blocks where {curly braces} would interfere with the template delimiter syntax. Anything within {literal}{/literal} tags is not interpreted, but displayed as-is.
So any script you want to use on a tpl file will work using them.
I managed to get this to work not just on flatpress (both versions) but also with phpbb, wordpress and dokuwiki without breaking anything :)