wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

SNSシェアボタンは公式の方がいいかも。

うちのサイトにとって一番重要なのはコンテンツであり、SNSシェアボタン云々じゃないです。どっか外部の借り物にしても結局重かったりします。

公式のんを導入したら重いっていう定説が存在しますが、今ではぶっちゃけ、忍者おまとめボタンより軽いです。非同期で読み込んでくれるので、肝心のコンテンツが優先的に表示されます。忍者おまとめボタンは今のところ非同期じゃないです。

素直にそのまま導入したらいいと思うんですよ。特にレガシーな静的HTMLサイトを運営している場合。

で、どうやってきれいに横並びにするか、ですが、一番いいのはCSSでinline-blockプロパティを使う方法です。

参考にした記事は以下の通りです。

やっぱり素直に公式からのコードをコピペすればいいんですよ。何も指定しなければ現在のURLを取得できるから、JavaScriptでlocation.hrefやら何やら小細工する必要もないです。Facebookのいいね!ボタンは vertical-align: baseline で、んでもって、Google+は複数設置も踏まえて3つまで幅60ピクセルにしました。

うちのサイトのCSSはこんな感じ

.fb-like { /* Facebook */
display: inline-block;
height: 20px;
overflow: hidden;
}
.fb_iframe_widget > span {
vertical-align: baseline !important;
}
#___plusone_0,#___plusone_1,#___plusone_2 {
width:65px !important;
}
.pocket-btn { /* Pocket */
display: inline-block;
height: 20px;
overflow: hidden;
}
.pocket-btn iframe { /* Pocket */
width: 90px !important;
overflow: hidden;
}
.sns{
margin:0 !important;list-style-type:none; padding:0 !important;}
/* display:inline-block;を指定 */
.sns li{
display:inline-block;
margin-top:5px;
margin-right:5px;
vertical-align:bottom;
*display: inline; <!-- IE用のハック -->
zoom: 1; <!-- IE用の hasLayout を true にするための記述 -->
}

んでもって、URLは普通にペタペタと。ツイートボタンは  data-via="wanichan" にしてます。もしこのHTMLコードを流用する場合、その値だけ変更してください。FacebookプラグインはJavaScript SDKも必要でっせ。

<ul class="sns">
<li><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" 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><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="wanichan" 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><div class="fb-like" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</li>
<li><!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ja'}
</script>
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="medium" style="width: 90px; display: inline"></div>
</li>
<li><a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!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");</script>
</li>
</ul>

そしたら、スマホから見てもきれいになります。iPod touchでスクショ撮ってみました。 

f:id:wanichan:20170423190423p:plain

複数行に渡っても、間隔が5ピクセル確保されています。まあ、後でCSSをいじれば間隔は自由に調整できますけど。

しかし、なぜか wanichan.com サイトだけFacebookのプラグインが動作しません。一時的な問題かなーって思ってます。そんなわけで wanichan.jp サイトをスクショ撮りました。

しかし、Pocketって意外と使われているんですね。Expression Web 4のトップページをみたら、2桁です。

f:id:wanichan:20170423191315p:plain

すると、90pxでは足りないから適当に増やしてます。3桁になることはないでしょう。

.pocket-btn iframe { /* Pocket */
width: 92px !important;
overflow: hidden;
}

追記

JavaScript SDKのコードが対応しなくなったみたいです。以下のコードになってたらアウトです。

window.fbAsyncInit = function() {
FB.init({
appId : '182289241790165',
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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

コードを差し替えたらOKになりましたです。 

(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.9&appId=182289241790165";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));