Share Text Embedded

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

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

Get Start

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

npm

npm page => https://www.npmjs.com/package/sharetext-embedded

//npm install
npm i sharetext-embedded

// import
import {ShareTextEmbedded} from 'sharetext-embedded';

Script Tags

<script src="../dist/sharetext-embedded.min.js"></script>

DEMOS

sample page => https://w-kentaro.github.io/ShareTextEmbedded/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 ShareTextEmbedded({
  url: 'URLを入れてください。',
  text: 'シェア文を入れてください。',
  hash: 'ハッシュタグ',
});

HTMLとJSに分けて管理

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

var ShareText = new ShareTextEmbedded(share);

最小テンプレート

var ShareText = new ShareTextEmbedded();

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

Properties

  var share = {
    init: true,
    url: 'URL',
    text:'share text',
    hash: 'hash', // 複数の場合はカンマで区切る
    twitter: {
      elem: 'element',
      url : 'URL',
      text: 'share text',
      hash: 'hash', // 複数の場合はカンマで区切る
      via: 'sample',
      related: 'sample' 
    },
    facebook: {
      elem: 'element',
      url : 'URL',
    },
    line: {
      elem: 'element',
      url : 'URL',
    }
  };

COMMON

Twitter

Facebook

LINE

Parameters

Methods

• init()

ShareText.init();

宣言時にhrefに書き込み

• update()

Sharetext.update({data});

DEMO

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