@sygnas/jp-social-share v2.2.0

syg-jp-social-share

日本向けのソーシャルシェアボタンのリンクを作成。

Description

日本の主要なソーシャルサービスのシェアボタンを作成。画像など装飾は一切ないので、自分のオリジナルボタンを作りたい方向け。

※主要かどうかは作者の主観です。

Release

• 2021.11.27
  • ブラウザ版削除
• 2021.11.23
  • TypeScriptで作り直し
  • class形式にしたので呼び出し方法が変更になった
  • 任意のサービスの追加機能は無くした
  • Google+を除外
• 2019.10.17
  • API、openShareWindow()を追加

対応サービス

• Twitter
• Facebook
• LINE
• Feedly
• Pocket
• はてなブックマーク

Usage

DEMO

Install

npm install --save @sygnas/jp-social-share

html

<a href="#" class="js-social-share"
    data-share-service="twitter"
    data-share-account="sygnas"
    data-share-follow="sygnas"
    data-share-url="http://google.com/"
    data-share-msg="Hello world."
>
  Twitter
</a>

<!-- data-share-url、data-share-msg が設定されていない場合
そのページのURL、タイトルが使われる -->
<a href="#" class="js-social-share"
    data-share-service="facebook">
  Facebook
</a>

<button class="js-test">スクリプトから開く</button>

Script：静的なボタンから

import socialShare from '@sygnas/jp-social-share';

// HTML上に設置しているリンクから開くパターン
socialShare.setShareButton('.js-social-share');

Script：動的に開く1

Vueなどで動的に生成されるボタンから使いたいときは下記のようにする。

<template>
...
<a href="#" @click.prevent="share"
            data-share-service="twitter"
            data-share-account="sygnas"
            data-share-follow="anime_shingeki"
            data-share-url="http://google.com/"
            data-share-msg="Hello world."
            >Twitter</a>
...
</template>

<script>
import socialShare from '@sygnas/jp-social-share';

export default {
  methods: {
    share(e) {
      socialShare.openShareWindowWithElement(e.target);
    }
  },
}

Script：動的に開く2

ボタンなど用意せずに動的に開きたいパターン。

<button class="js-test">シェアする</button>

import socialShare from '@sygnas/jp-social-share';

const btn = document.querySelector('.js-test');

btn.addEventListener('click', (ev) => {
  socialShare.openShareWindow(socialShare.SERVICES.TWITTER, 'https://google.com', 'メッセージ');
});

Data attributes

Methods

setShareButton

ボタンクリックでシェアウィンドウを開くよう設定。

static setShareButton(target: string, option: TOption = {}): void

const options = {
    window: {
        width: 500,
        height: 450
    },
    service: {
      facebook: 'http://www.facebook.com/share.php?u={{URL}}',
    },
}
socialShare.setShareButton('.js-social-share', options);

Option

Default

const defaults = {
  window: {
    width: 550,
    height: 450,
    personalbar: 0,
    toolbar: 0,
    scrollbars: 1,
    resizable: 1,
  },
  // シェア用URLのテンプレート
  services: {
    twitter:
      'http://twitter.com/share?url={{URL}}&text={{MESSAGE}}&via={{ACCOUNT}}&related={{FOLLOW}}',
    facebook: 'http://www.facebook.com/share.php?u={{URL}}',
    line: 'line://msg/text/{{MESSAGE}} {{URL}}',
    feedly: 'http://feedly.com/i/subscription/feed/{{URL}}',
    pocket: 'http://getpocket.com/edit?url={{URL}}',
    hatebu: '//b.hatena.ne.jp/add?mode=confirm&url={{URL}}&title={{MESSAGE}}',
  },
};

openShareWindowWithElement

エレメントから情報を取得してシェアウィンドウを開く。

static openShareWindowWithElement(elm: HTMLElement): void

openShareWindow

パラメータを指定してシェアウィンドウを開く。

static openShareWindow(
  service: TService,
  url: string = '',
  message: string = '',
  account: string = '',
  follow: string = ''
): void

License

MIT