[Showcase] Social share feature


#1

Are you looking for a social share feature for your pwa or mobile app?

Today I’m happy to release my brand new webcomponent build with Stenciljs :tada::smiley:

Showcase at https://web-social-share.firebaseapp.com
Repo https://github.com/peterpeterparker/web-social-share

giphy


How to socialshare in browser
#2

Looks great. We’re working on the other half of this problem - rendering previews for social content bots. It seems the only way is to fake the meta data or card, then redirect depending on the agent to the PWA deep link.


#3

you mean rendering previews of the pwa itself?

if so, I guess the way is to use server side rendering, I think it’s implemented in the Ionic PWA toolkit


#4

Yes.

I got the stencil component to run in an Ionic 3 app, but the control renders as an empty block about 4 x the size of a typical button.

No errors. Build finds the JS. Followed your set up verbatim. Lazy loading app.


#5

honestly I’m really sorry but I don’t understand your problem. first you were speaking about rendering preview for bots and now you are speaking about button size, it’s really hard to follow


#6

Sorry, I’m talking about your social share Stenciljs component.


#7

No worries, so I understand that the action sheet is displayed but no buttons are shown, right? (feel free to display a screenshot)

If so, have you provided the style classes to your share objects?

Also you could try to set displayNames to true in order to display the names

const share = {
  displayNames: true,
  config: [{
      facebook: {
        iconStyleclass: 'here-your-class-wich-display-the-icon',
        socialShareUrl: 'https://fluster.io'
      }
    },{
      twitter: {
        socialShareUrl: 'https://fluster.io'
      }
    }
  }]
};

You could have a look at the example https://github.com/peterpeterparker/web-social-share/blob/master/src/index.html there I use Fontawesome 5 as src for the icons