using webshare API

Find help with FlatPress plugins, report a plugin bug, request or present new plugins.
Post Reply
George
Posts: 31
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
Proudly using flatpress https://www.mypoppy.uk/blog

User avatar
Arvid
FlatPress Coder
Posts: 414
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: using webshare API

Post by Arvid » Sat Jul 09, 2022 11:48 am

Hi,

thanks for sharing (hrhr) this!
If you like, freel free to make this permanent on a wiki page linked from https://wiki.flatpress.org/doc:tips :)

All the best,
Arvid
Helpful FlatPress links: Project blog ๐Ÿ“ - FlatPress wiki ๐Ÿ“– - FlatPress@Twitter ๐Ÿฆ - FlatPress@Mastodon ๐Ÿ˜
Stay up to date with our feeds: Forum RSS feed ๐Ÿ“œ - Project blog RSS feed ๐Ÿ“œ
Feel free to say Thank you: Donate โค๏ธ

๐Ÿ‡ฉ๐Ÿ‡ช Fรผr meinen Arbeitgeber in Bochum habe ich zwei Stellen zu besetzen: Junior-Systemadministrator, Ausbildung zum Fachinformatiker Systemintegration ๐Ÿ‡ฉ๐Ÿ‡ช

George
Posts: 31
Joined: Tue May 18, 2021 10:54 am
Location: Uk
Contact:

Re: using webshare API

Post by George » Sat Jul 09, 2022 1:44 pm

Thanks Arvid , i have added to wiki
Proudly using flatpress https://www.mypoppy.uk/blog

User avatar
Arvid
FlatPress Coder
Posts: 414
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: using webshare API

Post by Arvid » Thu Jul 28, 2022 1:28 pm

Awesome, thanks! :)

If anyone is curious: https://wiki.flatpress.org/doc:tips:webshareapi
Helpful FlatPress links: Project blog ๐Ÿ“ - FlatPress wiki ๐Ÿ“– - FlatPress@Twitter ๐Ÿฆ - FlatPress@Mastodon ๐Ÿ˜
Stay up to date with our feeds: Forum RSS feed ๐Ÿ“œ - Project blog RSS feed ๐Ÿ“œ
Feel free to say Thank you: Donate โค๏ธ

๐Ÿ‡ฉ๐Ÿ‡ช Fรผr meinen Arbeitgeber in Bochum habe ich zwei Stellen zu besetzen: Junior-Systemadministrator, Ausbildung zum Fachinformatiker Systemintegration ๐Ÿ‡ฉ๐Ÿ‡ช

User avatar
fraenkiman
Posts: 33
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Re: using webshare API

Post by fraenkiman » Sat Aug 13, 2022 1:42 am

George wrote: โ†‘Sat Jul 09, 2022 1:44 pm Thanks Arvid , i have added to wiki
Thank you George for the find.

You've dug up something nice there.
With a bit of manual work, the Webshare API adopts Flatpress's language settings and can be supplied with Flatpress' standard variables. I took the files from the FP master branch and adapted them. If you want to test it, you can unpack the packed directory structure in FP-Root.

I took the liberty of editing your wiki article a bit as it's not so good to put the init script under each post. It is better placed once in the head and is therefore only loaded once per page.

PS:
What's weird is that you have to "drown" the init script in {literal}{/literal} tags in order for it not to break the blog or even work at all.

Maybe someone likes to create a plugin.
Unfortunately I didn't succeed due to a lack of sufficient PHP and Java script knowledge.

Best Regards
Frank

Sorry for my bad english, google helped.
My Flatpress-Blog [German]: https://frank-web.dedyn.io

George
Posts: 31
Joined: Tue May 18, 2021 10:54 am
Location: Uk
Contact:

Re: using webshare API

Post by George » Sat Aug 13, 2022 9:15 am

hi guys, firstly i wouldn't bother with a plugin for three snippets of code pasted into the theme. it works fine out of the box :)
the {literal}{/literal} tags allow a block of data to be taken literally. This is typically used around Javascript or stylesheet blocks where {curly braces} would interfere with the template delimiter syntax. Anything within {literal}{/literal} tags is not interpreted, but displayed as-is.
So any script you want to use on a tpl file will work using them.
I managed to get this to work not just on flatpress (both versions) but also with phpbb, wordpress and dokuwiki without breaking anything :)
Proudly using flatpress https://www.mypoppy.uk/blog

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest