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	おすすめユーザー表示 指定がない場合は表示しない

Facebook

プロパティ	デフォルト	説明
facebook		'disable'でfacebookシェア文は生成されない
elem	[data-share="facebook"]	挿入箇所 class/id/data属性で指定

LINE

プロパティ	デフォルト	説明
line		'disable'でLINEシェア文は生成されない
elem	[data-share="line"]	挿入箇所 class/id/data属性で指定

---

Parameters

パラメータ	説明
ShareText.URL.twitter	TwitterのシェアURL
ShareText.URL.facebook	facebookのシェアURL
ShareText.URL.line	LINEのシェアURL

---

Methods

• init()

ShareText.init();

宣言時にhrefに書き込み

• update()

Sharetext.update({data});

DEMO

シェアの内容をdataの中身で上書き、
init()しないとurlの変更はされません。

---