Posted at

SNSのウィジェットコードをまとめる

More than 5 years have passed since last update.

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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

こんなコードを5個とか貼付ける事になってかなり邪魔。

コードを読むと

<script id="facebook-jssdk" src="//connect.facebook.net/ja_JP/all.js#xfbml=1" async></script>

こんなHTMLを作ってるだけだったりするので、直接これをに書けば良いのではないかと。

これも大量に張ると可読性が悪そうなので、 require.js でまとめる。

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>

<script>
require([
'//www.google-analytics.com/analytics.js', // Analytics
'//platform.twitter.com/widgets.js', // Twitter
'//connect.facebook.net/ja_JP/all.js', // Facebook
'//apis.google.com/js/plusone.js' // G+
]);
</script>