[Showcase] Social share feature

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

1 Like

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.

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

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.

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

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

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