using webshare API

Find help with FlatPress plugins, report a plugin bug, request or present new plugins.
Post Reply
George
Posts: 18
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

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest