@sygnas/jp-social-share

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