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 this works using android and apple phone and most tablets, Ubunto and windows desktops ,Also works using firefox, chrome,edge and opera browsers.

first so your are not relying on someone else hosting the required js file, create a folder in the root of your website called webshare. next download this file

extract the file and put it in your newly created webshare folder This will enable your to use the script on other blogs/cms etc on your site. i am using this on phpbb and wordpress as well as flatpress

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

<input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />
<script {literal}src="/webshare/share-min.js">">{/literal}</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

and paste the following code below it

    
<input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />
<script {literal}src="/webshare/share-min.js">">{/literal}</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

just make sure your edit the above src code section so it points to your js file,


share this page using Web Share API
share

 Add a comment

This blog is proudly powered by FlatPress.

top