Sns_share NPM | npm.io

SNS_Share

Twiitter facebook LINEのシェアURLを自動で埋め込みます。
エンコード処理の削減で、視認性・メンテナンス性を向上させます。

※update※
LINEのシェアURL変更に合わせ
facebookとLINEからtextを削除いたしました。文言はog:descriptionから自動取得されます。

Share Text Generator

https://w-kentaro.github.io/SNS_Share/convert/

Get Start

download link => https://github.com/W-Kentaro/SNS_Share/archive/master.zip

npm

npm page => https://www.npmjs.com/package/sns_share

//npm install
npm i sns_share

// import
import 'sns_share';

Script Tags

<script src="../dist/sns_share.min.js"></script>

DEMOS

sample page => https://github.com/W-Kentaro/SNS_Share/sample/

Overview

SNSシェア文を自動エンコードして挿入します

 <a href="" target="_blank" data-share="twitter">Twitterシェアテキスト</a>
 <a href="" target="_blank" data-share="facebook">facebookシェアテキスト</a>
 <a href="" target="_blank" data-share="line">LINEシェアテキスト</a>

Template

基本テンプレート

var ShareText = new sns_share({
  url: 'URLを入れてください。',
  text: 'シェア文を入れてください。',
  hash: 'ハッシュタグ',
});

HTMLとJSに分けて管理

// HTMLに記述
<script>
  var share ={
      url: 'URL',
      text: 'シェア文を入れてください。',
      hash: 'ハッシュタグ',
    }
</script>

var ShareText = new sns_share(share);

最小テンプレート

var ShareText = new sns_share();

data-shareに入れたSNSに対応するhrefを吐き出します

Properties

  var share = {
    init: true,
    url: 'URL',
    text:'share text',
    hash: 'hash', 
    twitter: {
      url : 'URL',
      via: 'sample',
      related: 'sample' 
    },
    facebook: {
      elem: 'element',
    },
    line: {
      elem: 'element',
    }
  };

COMMON

プロパティ	デフォルト	説明
init	true	trueで自動的に挿入 falseの場合init()時に挿入
url	og:url	シェアに埋め込まれるURL 指定がない場合はog:urlを使用
text	og:description	シェア文言、指定がない場合og:descriptionを使用
hash	false	ハッシュタグ現在はTwitterのみ使用 twitter.hashに上書きされる

Twitter

プロパティ	デフォルト	説明
twitter		'disable'でtwitterシェア文は生成されない
elem	data-share="twitter"	挿入箇所 class/id/data属性で指定
url	common url	シェアに埋め込まれるURL 指定がない場合はcommon urlを使用 nullでURL空に(TEXTが空の場合はエラー)
via	false	アカウント指定指定がない場合は表示しない
related	false	おすすめユーザー表示指定がない場合は表示しない