1.1.1 • Published 8 years ago

syg-jp-social-share v1.1.1

Weekly downloads
3
License
MIT
Repository
github
Last release
8 years ago

syg-jp-social-share

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

Description

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

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

対応サービス

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

自分でサービスを追加することも可能です。

Usage

DEMO

Install

npm install syg-jp-social-share

html

<ul>
    <li><a href="#" class="js-social-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></li>

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

Script

import social_share from 'syg-jp-social-share';

social_share('.js-social-share');

Data attributes

data属性初期値説明
data-share-serviceソーシャルサービス名(twitter / facebook / line / feedly / pocket / hatebu / google)
data-share-urllocation.hrefシェアしたいURL
data-share-msgdocument.titleメッセージ
data-share-accountTwitter専用 / Replyに入れるアカウント
data-share-followTwitter専用 / ツイート後にフォローを促すアカウント

Options

const options = {
    window: {
        width: 500,
        height: 450
    },
    facebook: 'http://www.facebook.com/share.php?u={{URL}}'
}
social_share('.js-social-share', options);
項目説明
windowwindow.open() で使用するパラメータのオブジェクト
twitterTwitter シェア用テンプレート
facebookFacebook シェア用テンプレート
lineLINE シェア用テンプレート
feedlyFeedly シェア用テンプレート
pocketpocket シェア用テンプレート
hatebuはてなブックマークシェア用テンプレート
googleGoogle+ シェア用テンプレート

Default

const defaults = {
    // window.open() のオプション
    window: {
        width: 550,
        height: 450,
        personalbar: 0,
        toolbar: 0,
        scrollbars: 1,
        resizable: 1
    },
    // シェア用URLのテンプレート
    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}}',
    google: 'https://plus.google.com/share?url={{URL}}'
};

Customize

登録されていないサービスを追加することも可能です。

const options = {
    // 追加したいサービス
    // {サービス名} : '{テンプレート文字列}'
    foobar: 'http://foo.bar/share.php?url={{URL}}&msg={{MESSAGE}}'
}
social_share('.js-social-share', options);

Parameter

項目説明
{{URL}}data-share-url 属性を反映
{{MESSAGE}}data-share-message 属性を反映
{{ACCOUNT}}data-share-account 属性を反映
{{FOLLOW}}data-share-follow 属性を反映

License

MIT