Skip to content

Instantly share code, notes, and snippets.

@butchi

butchi/file0.html

Last active August 25, 2017 06:49
Show Gist options
  • Save butchi/515c69d725cf52efd48e039b51a1d77f to your computer and use it in GitHub Desktop.
Save butchi/515c69d725cf52efd48e039b51a1d77f to your computer and use it in GitHub Desktop.
Download ZIP
ソーシャルボタンまとめ ref: http://qiita.com/butchi_y/items/b365dc7ac4739ac9c74d
Raw
file0.html
<a href="https://twitter.com/share" class="twitter-share-button" data-text="（ここにツイート文言を入れる。data-text属性ごと省けばページタイトルがツイート文言になる）" data-lang="ja">ツイート</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>
Raw
file1.html
<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.5&appId=（ここにアプリIDを入れること！）";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Raw
file2.html
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
Raw
file3.html
<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.5&appId=1539136399715307";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Raw
file4.html
<div class="fb-share-button" data-layout="button_count"></div>
Raw
file5.html
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
Raw
file6.txt
<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>titleはソーシャルボタンまとめ</title>
<meta name="description" content="ソーシャルボタンについてのまとめデモページです。"> <!-- contentを書き換える -->
<meta name="keywords" content="ソーシャルボタン,social button,シェアボタン,share,フェイスブック,facebook,ツイッター,twitter,ツイート,はてな,はてブ,hatena,hatena bookmark,line,ライン,送る"> <!-- contentを書き換える: 半角カンマ区切り -->
<meta name="author" content="岩淵 勇樹"> <!-- contentを書き換える -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=1">
<meta property="og:title" content="og:titleはソーシャルボタンまとめ"> <!-- contentを書き換える -->
<meta property="og:type" content="website"> <!-- contentを書き換える: article, book, profile, website のうちから -->
<meta property="og:url" content="http://butchi.github.io/social-button-matome/"> <!-- contentを書き換える: フルパスで -->
<meta property="og:image" content="http://butchi.github.io/social-button-matome/ogp.png"> <!-- contentを書き換える: フルパスで -->
<meta property="og:image:width" content="128"> <!-- contentを書き換える -->
<meta property="og:image:height" content="128"> <!-- contentを書き換える -->
<meta property="og:description" content="この記述はFacebookシェアで使われます。ソーシャルボタンについてのまとめデモページです。"> <!-- contentを書き換える -->
<meta property="og:site_name" content="サイト名はソーシャルボタンまとめ"> <!-- contentを書き換える -->
<meta property="fb:app_id" content="1025731387449767"> <!-- contentを書き換える: https://developers.facebook.com/apps/ で登録 -->
<meta property="twitter:card" content="summary_large_image"> <!-- contentを書き換える: いろいろある。このあたりを参照 https://dev.twitter.com/cards/overview -->
<meta property="twitter:title" content="Twitterタイトルはソーシャルボタンまとめ"> <!-- contentを書き換える -->
<meta property="twitter:description" content="Summary Cardのdescriptionです。ソーシャルボタンについてのまとめデモページです。"> <!-- contentを書き換える -->
<meta property="twitter:image" content="http://butchi.github.io/social-button-matome/ogp.png"> <!-- contentを書き換える -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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.5&appId=（ここにアプリIDを入れること！）";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="wrapper">
<ul class="list-share">
<li class="item facebook">
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</li>
<li class="item twitter">
<p class="label">Twitter ツイート</p>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</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>
</li>
<li class="item hatena">
<p class="label">はてなブックマーク</p>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li class="item line">
<p class="label">LINE (SPのみ)</p>
<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>
</li>
</ul>
</div>
</body>
</html>
Raw
style.css
ul {
list-style: none;
font-size: 0;
}
li {
font-size: 1em;
}
.list-share {
display: block;
}
.list-share .item {
display: inline-block;
vertical-align: top;
}
.list-share .item + .item {
margin-left: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment