using webshare API

Find help with FlatPress plugins, report a plugin bug, request or present new plugins.
Post Reply
George
Posts: 21
Joined: Tue May 18, 2021 10:54 am
Location: Uk
Contact:

using webshare API

Post by George » Tue Jun 21, 2022 10:02 am

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

User avatar
Arvid
FlatPress Coder
Posts: 384
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: using webshare API

Post by Arvid » Sat Jul 09, 2022 11:48 am

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

George
Posts: 21
Joined: Tue May 18, 2021 10:54 am
Location: Uk
Contact:

Re: using webshare API

Post by George » Sat Jul 09, 2022 1:44 pm

Thanks Arvid , i have added to wiki

User avatar
Arvid
FlatPress Coder
Posts: 384
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: using webshare API

Post by Arvid » Thu Jul 28, 2022 1:28 pm

Awesome, thanks! :)

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

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest