Edited at

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

More than 1 year has passed since last update.

これもだいぶ今更感がありますが、一工夫したので簡単に共有したいと思います。

面倒な方は最後だけ見れば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>