SNSボタン設置方法

Twitter・Facebook・Google+・はてなブックマークSNSボタン

Twitter・Facebook・Google+・はてブの設置方法

サイト作成では必須になってきたSNSボタン設置についてまとめます。

今回は

この4種類です。

SNSボタン

そして、形を統一したいので今回はボックスタイプを作ります。
サイトのトップページに入れる時を想定しています。

全部公式サイトで作り方がのっていますが
少しコツがあるので順番に。+

公式サイトリンク

 

Twitterボタン

Twitter
https://twitter.com/about/resources/buttons#tweet

Twitter SNSボタン設置
まずリンク先へ行き設定をします。
ユーザーの所に自分のアカウント名が入っているか確認。

URLを共有の部分は、そのままでもサイトURLを入れてもかまいませんが、CMSに組み込んだりする時はURLを入れたほうがあとで触りやすいです。
わからなければそのままでいいです。

一番右下に出ているコードをコピーします。

【ポイント】
公式から提供されているのが長細い形しかないので
ボックスタイプにする時は
1行目のlang=”ja”の後に、data-count=”vertical”を付け加えます。

data-lang=”ja”>ツイート
data-lang=”ja” data-count=”vertical”>ツイート

こんな感じになります。


<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://unpco.com/" data-via="hazakumi" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これを自分のサイトの貼りたい所に貼ればOK。

続いていきましょう!

 

Facebookボタン

Facebook
https://developers.facebook.com/docs/reference/plugins/like/
ハイ、英語でびびらない!

公式の日本語ガイドもありますが
http://www.facebook-japan.com/iine.html
なんとなくわかりますよね。
URLを入れて、Layout Styleを変えて、Get Codeでソースを取得。
貼り付けるんです。

【ポイント】
ここでのポイントは2つ

Layout Styleを box_countにします。
右にプレビューが出ているのでわかりやすい。

Get Codeの時に、IFRAMEを選んで入れる。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Funpco.com%2F&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>

 

Google+ボタン

Google+
http://www.google.com/intl/ja/webmasters/+1/button/
Google関連サービスはやはり必要と思うのでつけておきましょうか。+1 ボタン

これは
大きさは一番右の大にすると吹き出しが上に出る形が用意されています。

+1 情報 をバルーンタイプにして、言葉は日本語、

トップページに入れるので詳細オプションにURLを入れました。


<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="tall" data-href="http://unpco.com/"></div>

<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

はてなブックマークボタン

はてなブックマークボタンの作成
http://b.hatena.ne.jp/guide/bbutton

バルーンがあるバーティカルボタンにする。
はてなブックマークボタン
日本のサービスだけあって一番わかりやすく書いてます。

<a href="http://b.hatena.ne.jp/entry/http://unpco.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="タイトルだよ" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

で、まとめ!

それぞれを横並びにしたかったので
divでくくって幅を決めてfloatさせました。


<div class="sns_test"><!-- twitter -->

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://unpco.com/" data-via="hazakumi" data-lang="ja" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>

<div class="sns_test"><!-- facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Funpco.com%2F&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=450&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>
</div>

<div class="sns_test"><!-- google+ -->
<g:plusone size="tall" href="http://unpco.com/"></g:plusone>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

<div class="sns_test"><!-- はてなブックマーク -->
<a href="http://b.hatena.ne.jp/entry/http://unpco.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="unpco" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>

CSSはお好きに。
たぶんそれぞれ大きさが違うから調整がいるかと。

.sns_test {
	float: left;
	width: 80px;
}

 

1 comment