シェアボタンとは「Facebook」「Twitter」「Google+」「LinkedIn」などのシェアボタンのことを指し、ウェブサイトに設置しておくことで、閲覧者が「面白いコンテンツだ」と思うとき、一クリックで自分のFacebookなどにすぐシェア(自分のTimelineに掲載)するためのものです。
普段、面白い内容をFacebookなどに書きたいなら、ウェブサイトのURLをコピーして、Facebookのポストにペーストしますね。サイトにシェアボタンがあればそんな面倒なことをしなくてもすみます。
なので、コンテンツウェブサイトにシェアボタンを設置しましょう。
Sharethis.comからボタン取得ShareThisボタンのイメージ:
![]()
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>
<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などはシェアボタンのコードを提供しておりますので、それを使ってシェアボタンを作ります。ただ、それぞれサイズが違ってなかなかきれいなレイアウトにならない可能性があります。ここにはきれいにレイアウトする方法を説明します。 参考:
シェアボタンの行をきれいにレイアウトするコツ:
イメージ: ![]() コードの例: <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ボタンになります。 カウントの表示・非表示などたとえば、
どのページをシェアする?URL指定のシェアボタンはそのURL(たとえば上記のFacebookのLikeボタンにはURLを指定している)が、指定がない場合はシェアボタンの置くページがシェアされます。 |
WEBSITE SEO >