シェアボタンの追加

　シェアボタンとは「Facebook」「Twitter」「Google+」「LinkedIn」などのシェアボタンのことを指し、ウェブサイトに設置しておくことで、閲覧者が「面白いコンテンツだ」と思うとき、一クリックで自分のFacebookなどにすぐシェア（自分のTimelineに掲載）するためのものです。

　普段、面白い内容をFacebookなどに書きたいなら、ウェブサイトのURLをコピーして、Facebookのポストにペーストしますね。サイトにシェアボタンがあればそんな面倒なことをしなくてもすみます。

なので、コンテンツウェブサイトにシェアボタンを設置しましょう。

Sharethis.comからボタン取得

ShareThisボタンのイメージ：

メリット：様々なSNSのボタンの組み合わせは可能。アレンジが正しくきれいです。
デメリット：Facebook、TwitterのシェアURLは「http://shar.es/c3XXX」のように変えられてしまうことがあります。

ShareThisボタンのの追加方法：

　Sharethis.comにアクセスし、サイトの種類（ウェブサイト、Wordpressなど）・ボタンの形・シェアボタンの種類などを選択し、最後に「登録画面」になりますが、ポップアップの最初にある「Just Give Me The Code」をクリックするとコードが取れます。二種類があります：

シェアボタンのコード：以下のようなものです。

<span class='st_sharethis_large' displayText='ShareThis'></span>

<span class='st_facebook_large' displayText='Facebook'></span>

<span class='st_twitter_large' displayText='Tweet'></span>

<span class='st_linkedin_large' displayText='LinkedIn'></span>

<span class='st_email_large' displayText='Email'></span>

スクリプト：</head>タグ直前に貼ります。以下のようなものです。

<script type="text/javascript">var switchTo5x=true;</script>

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script type="text/javascript">stLight.options({publisher: "ur-d207247d-f4a3-e98e-1da2-57aaba9d6ddf"});</script>

直接シェアボタンの取得

Facebook、Google+、Twitter、LinkedInなどはシェアボタンのコードを提供しておりますので、それを使ってシェアボタンを作ります。ただ、それぞれサイズが違ってなかなかきれいなレイアウトにならない可能性があります。ここにはきれいにレイアウトする方法を説明します。

参考：

FacebookのLikeボタン：https://developers.facebook.com/docs/reference/plugins/like/

シェアボタンの行をきれいにレイアウトするコツ：

それぞれのシェアボタンのコードを並ぶとレイアウトがずれてしまう可能性が高いです。それでテーブルにしてレイアウトを整えるとよいです。キーワードはテーブルでレイアウト。
位置ずれの校正は「width」、「padding-top」「padding-bottom」を使って校正。

イメージ：

コードの例：

<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/en_US/all.js#xfbml=1&appId=115476608547153";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<table>

<tbody>

<tr>

<td style="padding-bottom: 2px;" width="105">

      <fb:like href="http://it.saigonphoenix.com/" send="false" layout="button_count" width="100" show_faces="false"></fb:like>

</td>

      <td style="padding-top: 0px;"><a href="http://twitter.com/share" class="twitter-share-button" data-text="VIETNAM IT OUTSOURCING" data-count="horizontal">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>

<td>

      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="medium"></g:plusone></td>

<td>

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

<script type="IN/Share" data-counter="false"></script></td>

</tr>

</tbody>

</table>

上記の中、Facebookのスクリプトは以下です。

<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/en_US/all.js#xfbml=1&appId=115476608547153";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

このスクリプトさえあれば、後に「<fb:like href="http://it.saigonphoenix.com/" send="false" layout="button_count" width="100" show_faces="false"></fb:like>」のコードを追加するだけでLikeボタンになります。

カウントの表示・非表示など

たとえば、

LinkedInのカウント表示は data-counter="right" 、非表示はdata-counter="false"
Facebook、Google+などもパラメータで表示・非表示を設定する（true / false）

どのページをシェアする？

URL指定のシェアボタンはそのURL（たとえば上記のFacebookのLikeボタンにはURLを指定している）が、指定がない場合はシェアボタンの置くページがシェアされます。

Comments