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

| data属性 | 初期値 | 説明 | | --- | --- | --- | | data-share-service | | ソーシャルサービス名（twitter / facebook / line / feedly / pocket / hatebu | | data-share-url | location.href | シェアしたいURL | | data-share-msg | document.title | メッセージ | | data-share-account | | Twitter専用 / Replyに入れるアカウント | | data-share-follow | | Twitter専用 / ツイート後にフォローを促すアカウント |

Methods

setShareButton

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

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

| 引数 | 説明 | | ---- | ---- | | target | 対象ボタンのclassなど | | option | ウィンドウサイズ、シェア実行URLの設定 |

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

Option

| 項目 | 説明 | | ---- | ---- | | window | window.open() で使用するパラメータのオブジェクト | | services | 各サービスのシェア用テンプレート / twitter / facebook / line / feedly / pocket / hatebu |

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

| 引数 | 説明 | | ---- | ---- | | service | ソーシャルサービス識別子 | | url | シェアURL | | message | メッセージ本文 | | account | ツイートに付けるRepleyアカウント | | follow | ツイート後に表示するフォロー候補アカウント |

License

MIT