using webshare API
Posted: 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 serverYour 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 itsave the file and put it back on your server
now all your posts will have a webshareAPI button
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>
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>
now all your posts will have a webshareAPI button