social media share using Web Share API.

Post Reply
george
Site Admin
Posts: 26
Joined: Mon Jun 27, 2022 4:37 pm

social media share using Web Share API.

Post by george »



webshare API is another good way of sharing webpage / links from your website, using bbcode you can choose which posts you want to share
i have made a bbcode example here and if you try it from your mobile phone you will find that you can share to any of your installed apps very easily
create new bbcode
Ive tested on styles that need Prosilver to run and also a couple of styles not relient on prosilver all work
this works using android and apple phone and most tablets, Ubunto and windows desktops ,Also works using firefox, chrome,edge and opera browsers

BBCode usage

Code: Select all

[GH-shareme2]{TEXT}[/GH-shareme2]
HTML replacement

Code: Select all

<input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />

   <script src="https://unpkg.com/share-api-polyfill/dist/share-min.js"></script>
  <!-- <script src="../dist/share-min.js"></script> -->
  <script>
      function shareTheLink () {
          navigator.share({
          title: '{TOPIC_TITLE}',
          text: 'I thought you might like this.',
          url: location.href,
          

          fbId: '136223956547034',
          hashtags: ['javascript', 'shareAPI', 'Polyfill']
        },
        {
          // 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));
    }
  </script>
save your new bbcode and from ACP Purge the cache, your new code is ready to use




If you want to share all your posts automaticly try this
open your style /template/viewtopic_body.html and find this,

<!-- END postrow -->
and then add this

Code: Select all

<div align=left>
Share from your mobile
<input type="button" value="Share this page" class="the-share-button" onclick="shareTheLink()" />

   <script src="https://unpkg.com/share-api-polyfill/dist/share-min.js"></script>
  <!-- <script src="../dist/share-min.js"></script> -->
  <script>
      function shareTheLink () {
      navigator.share({
          title: '{TOPIC_TITLE}',
          text: 'I thought you might like this.',
          url: location.href,
          

          fbId: '136223956547034',
          hashtags: ['javascript', 'shareAPI', 'Polyfill']
        },
        {
          // 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));
    }
  </script>
</div>
save the file back yo your website
from your ACP Purge the cache
and your new share button will appear below every post
Ive tested on styles that need Prosilver to run and also a couple of syles not relient on prosilver all work you just edit the viewtopic_body.html of your style.
this works using android and apple phone and most tablets, Ubunto and windows desktops ,Also works using firefox, chrome,edge and opera browsers.
if you prefer to host your own js script your can download it here https://www.mypoppy.uk/webshare/share-min.zip but remember to edit the src= part of the code accordingly
Share this page
Twitter Whatsapp Telegram Pinterest Linkedin Tumblr Reddit Email

share this page using Web Share API. (try this if you are using a mobile phone or tablet)
share
Post Reply