This is an old revision of the document!
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 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="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>
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
{if ($categories)} Published by {$author} in {$categories|@filed}|{/if} {$comments|tag:comments_number}
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="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>
save the file and put it back on your server now all your posts will have a webshareAPI button if you prefer to host your own js file you can download it from https://www.mypoppy.uk/webshare/share-min.zip just make sure your edit the above code so it points to your js file, test this on my website https://www.mypoppy.uk/blog just look for the webshare button below each post or page.If you are using a tablet or phone you may need to click on the more button when it opens