LoginSignup
1
0

More than 5 years have passed since last update.

@negibouze

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

Last updated at Posted at 2017-07-31

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

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

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

social.tag
<social>
  <script type="es6">
  </script>
</social>

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

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

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

step1. Facebook

いいね！ボタン構成ツール

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

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

ボタン構成ツール

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で送るボタン

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っぽく書き直す

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タグを改行してみる

<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の処理をまとめる。

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は

<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で

<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ものっける。

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. 最終形

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>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0