Skip to content

Instantly share code, notes, and snippets.

@butchi

butchi/index.html

Last active November 8, 2016 03:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save butchi/8475bbdd3a1a0c2e6c9f923392d028ff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save butchi/8475bbdd3a1a0c2e6c9f923392d028ff to your computer and use it in GitHub Desktop.
Download ZIP
JSだけでソーシャルボタン設置 ref: http://qiita.com/butchi_y/items/f2253ddd504d30686f62
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS share button</title>
<meta property="og:title" content="XHTML like">
<meta property="og:type" content="website">
<meta property="og:url" content="http://example.com/">
<meta property="og:image" content="http://example.com/ogp.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<ul class="list-share">
<li class="item facebook"></li>
<li class="item twitter"></li>
<li class="item line"></li>
<li class="item gplus"></li>
</ul>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Raw
like-button.js
(function likeButton() {
var likeElm = document.createElement('div');
likeElm.innerHTML = '<div class="fb-like" data-action="like" data-href="http://example.com/" data-layout="button_count" data-share="false" data-size="small"></div>';
window.addEventListener('load', function() {
document.querySelector('.facebook').appendChild(likeElm);
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXX',
xfbml : true,
version : 'v2.8'
});
};
(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.8&appId=XXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
})();
Raw
line-button.js
(function lineButton() {
var scriptElm = document.createElement('script');
scriptElm.src = '//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js';
document.body.appendChild(scriptElm);
window.addEventListener('load', function() {
var lineElm = document.createElement('div');
lineElm.innerHTML = '<div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja" ></div>';
document.querySelector('.line').appendChild(lineElm);
LineIt.loadButton();
});
})();
Raw
plusone-button.js
(function plusoneButton() {
var scriptElm = document.createElement('script');
scriptElm.src = 'https://apis.google.com/js/platform.js';
scriptElm.innerHTML = "{lang: 'ja', parsetags: 'explicit'}";
document.body.appendChild(scriptElm);
window.addEventListener('load', function() {
var gplusElm = document.createElement('div');
gplusElm.innerHTML = '<div class="g-plusone" data-size="medium"></div>';
document.querySelector('.gplus').appendChild(gplusElm);
gapi.plusone.go();
});
})();
Raw
tweet-button.js
(function tweetButton() {
window.addEventListener('load', function() {
var tweetElm = document.createElement('div');
tweetElm.innerHTML = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com" data-text="JS share button" data-lang="ja">ツイート</a>';
document.querySelector('.twitter').appendChild(tweetElm);
!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');
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment