【Riot.js】SNS（FB, Twitter, LINE）のシェアボタンの設置をtagファイル内でちょっと良い感じに完結させたい

これもだいぶ今更感がありますが、一工夫したので簡単に共有したいと思います。
**面倒な方は最後だけ見ればOKです。**

##1. とりあえずタグファイルを作る

適当な名前でタグファイルを作る
サンプルではtype属性（プリプロセッサ）は "es6" を指定します。

```html:social.tag
<social>
  <script type="es6">
  </script>
</social>
```

##2. SNSのシェアボタンを追加する

**！面倒な方は読み飛ばしていただいて問題ありません。**

各サービスが用意してくれている方法でシェアボタンを追加する。
※この時点ではエラーになります。

#### step1. Facebook

[いいね！ボタン構成ツール](https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP#configurator)

コード取得時に「JavaScript SDKはbodyタグの直後に挿入してください」と記載がありますが、
tagファイル内で処理を完結させたいので気にせず行きます。

```html:social.tag
<social>
  <!-- Facebook -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <div class="fb-like" data-href="" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
  <script type="es6">
  </script>
</social>
```

#### step2. Twitter

[ボタン構成ツール](https://about.twitter.com/ja/resources/buttons)

```html:social.tag
<social>
  <!-- Facebook -->
　<!-- 略 -->
  <!-- Twitter -->
  <a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  <script type="es6">
  </script>
</social>
```

#### step3. LINE

[LINEで送るボタン](https://media.line.me/ja/how_to_install#lineitbutton)

```html:social.tag
<social>
  <!-- Facebook -->
　<!-- 略 -->
  <!-- Twitter -->
　<!-- 略 -->
  <!-- LINE -->
  <div class="line-it-button" data-lang="ja" data-type="share-e" data-url="https://media.line.me/ja/how_to_install" style="display: none;"></div>
  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
  <script type="es6">
  </script>
</social>
```

##3. コンパイルエラーを修正しつつ、ソースコードを整理する

Facebookの実装が見やすいので、これをベースに整理する。

#### step1. Facebookのscriptタグを移動しつつ、es2015っぽく書き直す

```html:social.tag
<social>
  <!-- Facebook -->
  <div id="fb-root"></div>
  <div class="fb-like" data-href="" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
  <!-- Twitter -->
  <!-- 略 -->
  <!-- LINE -->
  <!-- 略 -->
  <script type="es6">
    ((d, s, id) => {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) return
      const js = d.createElement(s)
      js.id = id
      js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10"
      fjs.parentNode.insertBefore(js, fjs)
    })(document, 'script', 'facebook-jssdk')
  </script>
</social>
```

#### step2. Twitterのscriptタグを改行してみる

```html
<script>
  !function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
      js=d.createElement(s);
      js.id=id;
      js.src=p+'://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js,fjs);
    }
  }(document, 'script', 'twitter-wjs');
</script>
```

#### step3. JavaScriptの処理をまとめる

処理の内容は同じなのでFacebookとTwitterの処理をまとめる。

```html:social.tag
<social>
  <!-- Facebook -->
  <div id="fb-root"></div>
  <div class="fb-like" data-href="" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
  <!-- Twitter -->
  <a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a> 
  <!-- LINE -->
  <!-- 略 -->
  <script type="es6">
    const url = window.location.href
    const p = /^http:/.test(url) ? 'http' : 'https'
    const insertItem = (obj, d = document, s = 'script') => {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(obj.id)) { return }
      const js = d.createElement(s)
      js.id = obj.id
      js.src = obj.src
      fjs.parentNode.insertBefore(js, fjs)
    }
    const items = [
      {
        // Facebook
        id: 'facebook-jssdk',
        src: `${p}://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10`
      },
      {
        // Twitter
        id: 'twitter-wjs',
        src: `${p}://platform.twitter.com/widgets.js`
      }
    ]
    items.forEach((v) => {
      insertItem(v)
    })
  </script>
</social>
```

#### step4. LINEを追加する

LINEは

```html
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
```

を使用しているが、tagファイル内では\<script src=""> は使えないためコンパイルエラーになる。
ただ、Facebook, TwitterはJavaScriptで

```html
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js"></script>
<script id="facebook-jssdk" src="http://connect.facebook.net/ja_JP/sdk.js#xfbml=1&amp;version=v2.10"></script>
```

を追加しているだけなので、LINEもやりたいことは変わらない。
なので、先ほどの処理にLINEものっける。

```html:social.tag
<social>
  <!-- Facebook -->
  <div id="fb-root"></div>
  <div class="fb-like" data-href="" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
  <!-- Twitter -->
  <a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a> 
  <!-- LINE -->
  <div class="line-it-button" data-lang="ja" data-type="share-e" data-url="https://media.line.me/ja/how_to_install" style="display: none;"></div>
  <script type="es6">
    // 略
    const insertItem = (obj, d = document, s = 'script') => {
      // 略
      js.async = true <- async, defer追加
      js.defer = true
      // 略
    }
    const items = [
      {
        // Facebook
        id: 'facebook-jssdk',
        src: `${p}://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10`
      },
      {
        // Twitter
        id: 'twitter-wjs',
        src: `${p}://platform.twitter.com/widgets.js`
      },
      {
        // LINE
        id: 'line-ljs',
        src: 'https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js'
      }
    ]
    items.forEach((v) => {
      insertItem(v)
    })
  </script>
</social>
```

##4. 最終形

```html:social.tag
<social>
  <ul class="collaboration">
    <li class="collaboration-item">
      <div class="fb-like" data-href="{ url }" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
    </li>
    <li class="collaboration-item">
      <a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a>
    </li>
    <li class="collaboration-item">
      <div class="line-it-button" data-lang="ja" data-type="share-e" data-url="{ url }" style="display: none;"></div>
    </li>
  </ul>
  <div id="fb-root"></div>
  <script type="es6">
    const url = window.location.href
    const p = /^http:/.test(url) ? 'http' : 'https'
    const insertItem = (obj, d = document, s = 'script') => {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(obj.id)) { return }
      const js = d.createElement(s)
      js.id = obj.id
      js.src = obj.src
      js.async = true
      js.defer = true
      fjs.parentNode.insertBefore(js, fjs)
    }
    const items = [
      {
        // Facebook
        id: 'facebook-jssdk',
        src: `${p}://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10`
      },
      {
        // Twitter
        id: 'twitter-wjs',
        src: `${p}://platform.twitter.com/widgets.js`
      },
      {
        // LINE
        id: 'line-ljs',
        src: 'https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js'
      }
    ]
    items.forEach((v) => {
      insertItem(v)
    })
  </script>
</social>
```