A Web Component to share urls and content on social networks
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: z-index for Safari Oct 24, 2018
.editorconfig chore(): Add editorconfig Sep 29, 2017
.gitignore feat: ignore firebase tmp dir Oct 19, 2018
CHANGELOG.md release: v2.1.4 Oct 24, 2018
LICENSE licence: update author Oct 19, 2018
package-lock.json release: v2.1.4 Oct 24, 2018
package.json release: v2.1.4 Oct 24, 2018
readme.md doc: update text regarding Ionic v3 Nov 12, 2018
stencil.config.ts lib(#2): update Stencil Oct 19, 2018
tsconfig.json feat(#3): target ES2017 Oct 19, 2018

readme.md

Web Social Share

Web Social Share is a web component to share urls and content on social networks

The component will present a dialog which will contains the different sharing options you selected

GitHub npm

Goals

The idea behind this web component was to add a "social share" feature to the progressive web app (pwa) version of my project Fluster.

Furthermore, I thought that using and building an action sheet to do so would be user friendly.

Installation

$ npm install web-social-share

Ionic v3 support deprecated

As of version 2.0.0, the component can't be bundled in Ionic v3 projects anymore, at least as far as I know. If you wish to use it such a project, stick to version 1.1.0 of the component.

$ npm install web-social-share@1.1.0

Installation in a Ionic v4 project

First of all notice that I wasn't able to integrate the library as described in the Stencil documentation

But, I was able to integrate the library in an Ionic v4 app as described below

After having installed the library, proceed then with following steps:

  1. In the module where you would like to use the component, import and add CUSTOM_ELEMENTS_SCHEMA to your list of schemas

     @NgModule({
         declarations: [
             MyPage
         ],
         imports: [
             CommonModule,
             FormsModule,
             IonicModule,
             RouterModule.forChild(routes)
         ],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     export class MyPageModule {
     }
    
  2. In index.html import the component. As far as I understood, web component built with Stencil inherit Lazy Loading, therefore, no worries about effect on your boot time

      <script async src="websocialshare.js"></script>
    
  3. Finally add the following to your assets configuration in your angular.json files in oder to include the component in your bundle

    "assets": [
        {
          "glob": "websocialshare.js",
          "input": "node_modules/web-social-share/dist",
          "output": "./"
        },
        {
          "glob": "websocialshare/*",
          "input": "node_modules/web-social-share/dist",
          "output": "./"
        }
    ]
    

Installation in a Ionic v3 project

After having installed the version 1.1.0 of the library, proceed with following steps:

  1. In the module where you would like to use the component, import and add CUSTOM_ELEMENTS_SCHEMA to your list of schemas

     @NgModule({
         declarations: [
             MyPage
         ],
         imports: [
             IonicPageModule.forChild(MyPage)
         ],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     export class MyPageModule {
     }
    
  2. In app.modules (the main module of your app), import the component. As far as I understood, web component built with Stencil inherit Lazy Loading, therefore, no worries about effect on your boot time

      import 'web-social-share';
    
  3. The web component installed under node_modules not gonna be automatically included in the vendor.js bundle. Therefore it need a tricks to be copied. To do so, create a local custom copy.config.js (which gonna be processed as another config of ionic-app-scripts) and add the following block

    module.exports = {
      copyWebSocialShare: {
        src: ['{{ROOT}}/node_modules/web-social-share/dist/websocialshare**/*'],
        dest: '{{BUILD}}'
      }
    } 
    

Don't forget to also update your package.json in order to use your local modified copy.config.js file

    "config": {
        "ionic_copy": "./scripts/copy.config.js"
      }

Getting Started

The Web Social Share Component could be use like following:

<web-social-share [show]="true" [share]="options" (closed)="close()"></web-social-share>

Both show and share are mandatory.

show

Trigger the display or closing of the action sheet presenting the social-share options you have selected

show is a boolean parameter

share

These are your share options. For details about them you could have a look to the interface WebSocialShareInput located under folder src/types/web-social-share/

share is a parameter of type WebSocialShareInput

Example

For example, if you would like to allow your users to share a website thru Facebook and Twitter, you could define basic options like following:

const share = {
    config: [{
          facebook: {
            socialShareUrl: 'https://fluster.io'
          }
        },{
          twitter: {
            socialShareUrl: 'https://fluster.io'
          }
    }]
};

If you would like to display the action default name, you could extend your configuration like the following:

const share = {
    displayNames: true,
    config: [{
          facebook: {
            socialShareUrl: 'https://fluster.io'
          }
        },{
          twitter: {
            socialShareUrl: 'https://fluster.io'
          }
    }]
};

Vanilla JS

For an example of Vanilla JS use, you could have a look to the index.html demo located in this repo under folder src

Theming

This Web Component is roughly styled, it is up to you to theme it with your custom CSS. I thought it was better to do it like this in order to have a lightweight web component which doesn't force user to follow one style guideline.

However, you could provide an icon style class for each sharing option which gonna be displayed above the social-network name.

Example

Let's say I'm using Font Awesome 5 and I would like to provide an icon for the social share options I describe above. This could be achieved easily like the following:

const share = [{
      facebook: {
        iconStyleclass: 'fab fa-facebook',
        socialShareUrl: 'https://fluster.io'
      }
    },{
      twitter: {
        iconStyleclass: 'fab fa-twitter',
        socialShareUrl: 'https://fluster.io'
      }
    }
}];

Of course, if you provide icon style class, it's up to you to load images or libraries like Font Awesome in your app.

Showcase

A showcase is available at https://websocialshare.com

The above showcase is the www folder of this project deployed in Firebase. If you clone the repository you could run it locally using npm start

Credits

I didn't wanted to reinvent the wheel when it comes to the sharing actions themselves. Therefore I forked the features of angular-socialshare. Kudos to 45kb 👍

License

MIT © David Dal Busco