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