サンプル (新デザイン対応版)
「プログラムのことはよく分からない…」「とりあえず設置したいのさっ」という人のために、コピーすればそれだけで使える、当サイトでも採用している横並びデザインを紹介します。2015年11月20日より、Twitterのシェアカウント数の表示が無効になります。それに伴い、バルーン型のデザインがなくなりました。「他サービスがバルーンなのに、Twitterだけバルーンじゃないとデザインが崩れる…」という場合の対策として、サイズが合うようにオリジナルボタンを作成してみました。
サンプルデモ
真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。
Twitterのバルーンボタンは、「Tweet」の部分を「ツイート」に変更することで、日本語仕様にもできます。
サンプルコード
HTML
HTML
<h2>シェアボタンの表示</h2>
<p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p>
<!-- シェアボタン [ここからコピー] -->
<div class="social-area-syncer">
<ul class="social-button-syncer">
<!-- Twitter ([Tweet]の部分を[ツイート]にすると日本語にできます) -->
<li class="sc-tw"><a data-url="https://syncer.jp" href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-dnt="true" target="_blank"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill="#fff" fill-rule="nonzero"/></svg><span>Tweet</span></a></li>
<!-- Facebook -->
<li class="sc-fb"><div class="fb-like" data-href="https://syncer.jp" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
<!-- Google+ -->
<li><div data-href="https://syncer.jp" class="g-plusone" data-size="tall"></div></li>
<!-- はてなブックマーク -->
<li><a href="http://b.hatena.ne.jp/entry/https://syncer.jp" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a></li>
<!-- pocket -->
<li><a data-save-url="https://syncer.jp" data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a></li>
<!-- LINE [画像は公式ウェブサイトからダウンロードして下さい] -->
<li class="sc-li"><a href="http://line.me/R/msg/text/?https://syncer.jp"><img src="./linebutton_36x60.png" width="36" height="60" alt="LINEに送る" class="sc-li-img"></a></li>
</ul>
<!-- Facebook用 -->
<div id="fb-root"></div>
</div>
<!-- シェアボタン [ここまでコピー] -->CSS
CSS
/******************************
ソーシャルエリア全体を囲む要素
* 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい
******************************/
.social-area-syncer {
width: 100% ;
min-height: 190px ;
background: #F5F1E9 ; /* 背景色 */
padding: 1.5em 0 ;
}
/* デスクトップPCでは高さを拡張する */
@media screen and ( min-width:480px ) {
.social-area-syncer {
min-height: 119px ;
}
}
/******************************
[ul]要素
******************************/
/* スマホ */
ul.social-button-syncer {
width: 238px ;
margin: 24px auto ;
padding: 0 ;
border: none ;
list-style-type: none ;
}
/* デスクトップ */
@media screen and ( min-width:480px ) {
ul.social-button-syncer {
width: 410px ;
}
}
/******************************
[li]要素
******************************/
ul.social-button-syncer li {
float: left ;
text-align: center ;
height: 71px ;
margin: 0 8px ;
padding:0 ;
}
/******************************
各種ボタン
******************************/
/* [Twitter] */
.sc-tw {
width: 71px ;
}
.sc-tw svg {
width: 30px ;
height: 30px ;
}
.sc-tw a {
height: 56px ;
margin: 0 auto ;
padding-top: 6px ;
display: block ;
background: #1B95E0 ;
font-size: 12px ;
color: #fff ;
font-weight: 700 ;
text-decoration: none ;
letter-spacing: .5px ;
border-radius: 2px ;
}
.sc-tw a:hover {
color: #fff ;
background: #0c7abf ;
}
.sc-tw span:before {
white-space: pre ;
content: '\A' ;
}
/* [Facebook] */
.sc-fb {
z-index: 99 ;
width: 69px ;
}
/* [LINE] */
.sc-li {
width: 50px ;
}
.sc-li-img {
border: none ;
margin: 0 auto ;
padding:0 ;
width: 36px ;
height: 60px ;
}
/* デスクトップPCではLINEボタンを表示しない */
@media screen and ( min-width:480px ) {
.sc-li {
display: none ;
}
}JavaScript
JavaScript
/* DOMの読み込み完了後に処理 */
if(window.addEventListener) {
window.addEventListener( "load" , shareButtonReadSyncer, false );
}else{
window.attachEvent( "onload", shareButtonReadSyncer );
}
/* シェアボタンを読み込む関数 */
function shareButtonReadSyncer(){
// 遅延ロードする場合は次の行と、終わりの方にある行のコメント(//)を外す
// setTimeout(function(){
// Twitter (オリジナルボタンを使用するので、コメントアウトして無効化)
// window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
// Facebook
(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.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Google+
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "https://apis.google.com/js/platform.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
// はてなブックマーク
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "https://b.st-hatena.com/js/bookmark_button.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
// pocket
(!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js"));
//},5000); //ページを開いて5秒後(5,000ミリ秒後)にシェアボタンを読み込む
}PHP
PHP
<h2>シェアボタンの表示</h2>
<p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p>
<!-- シェアボタン [ここからコピー] -->
<?php
$share_url_syncer = "https://syncer.jp/"; //シェア対象のURLアドレスを指定する (HTML部分は変更不要)
?>
<div class="social-area-syncer">
<ul class="social-button-syncer">
<!-- Twitter [Tweet]の部分を[ツイート]に変更することで日本語仕様になります。 -->
<li class="sc-tw"><a data-url="<?php echo $share_url_syncer ; ?>" href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-dnt="true" target="_blank"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill="#fff" fill-rule="nonzero"/></svg><span>Tweet</span></a></li>
<!-- Facebook -->
<li class="sc-fb"><div class="fb-like" data-href="<?php echo $share_url_syncer ; ?>" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
<!-- Google+ -->
<li><div data-href="<?php echo $share_url_syncer ; ?>" class="g-plusone" data-size="tall"></div></li>
<!-- はてなブックマーク -->
<li><a href="http://b.hatena.ne.jp/entry/<?php echo $share_url_syncer ; ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a></li>
<!-- pocket -->
<li><a data-save-url="<?php echo $share_url_syncer ; ?>" data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a></li>
<!-- LINE [画像は公式ウェブサイトからダウンロードして下さい] -->
<li class="sc-li"><a href="http://line.me/R/msg/text/?<?php echo rawurlencode($share_url_syncer); ?>"><img src="./linebutton_36x60.png" width="36" height="60" alt="LINEに送る" class="sc-li-img"></a></li>
</ul>
<!-- Facebook用 -->
<div id="fb-root"></div>
</div>
<!-- シェアボタン [ここまでコピー] -->
// ブラウザに[$html]の内容を出力
// 運用時はHTMLのヘッダーとフッターを付けましょう。
echo $html ;
