【Javascript】各SNSのシェアボタンのURLを自動で出力

locationオブジェクト使用して、各SNSのシェアボタンをjavascriptで出力する方法をご紹介します。

1.URLを取得しエンコードする

いまアクセスしているURLを取得。

2.ページのタイトルを取得

いまアクセスしているタイトルを取得。

3.URLを取得しエンコードする

変数に入れたURLをエンコード。

4.ID名を取得

クラス名sns_linkがもっているIDを取得。

5.IDを判定してリンク先を出力する

IDを取得して同じID名が一致したらURLを出力。
※switch文を使用しているので無限ループに要注意

javascript側

$(function(){
 
var href =location.href; //1.URLを取得しエンコードする
var getTitle = $('title').html(); //2.ページのタイトルを取得
 
//3.URLを取得しエンコードする
var snsUrl = encodeURIComponent(href);
var snsTitle = encodeURIComponent(getTitle);
 
$('.sns_link').each(function(){
 
  var sns_obj = $(this).attr('id');　//4.ID名を取得
  var snsCase = sns_obj;
 
  //5.IDを判定してリンク先を出力する
  switch (snsCase){
 
    case 'sns_line':
    $(this).attr('href','http://line.me/R/msg/text/?'+ snsTitle +'%20'+ snsUrl);
    break;
 
    case 'sns_fb':
    $(this).attr('href','http://www.facebook.com/sharer.php?u='+ snsUrl);
    break;
 
    case 'sns_tw':
    $(this).attr('href','http://twitter.com/share?text='+ snsTitle + '&url='+ snsUrl);
    break;
 
    case 'sns_plus':
    $(this).attr('href','https://plus.google.com/share?url='+ snsUrl);
    break;
  }
 
  });
});

HTML側

<ul class="sns">
  <li class="sns_list">
    <a id="sns_plus" class="sns_link" href="" target="_blank">google+</a>
  </li>
  <li class="sns_list">
    <a id="sns_tw" class="sns_link" href="" target="_blank">twitter</a>
  </li>
  <li class="sns_list">
    <a id="sns_fb" class="sns_link" href="" target="_blank">facebook</a>
  </li>
  <li class="sns_list">
    <a id="sns_line" class="sns_link" href="" target="_blank">line</a>
  </li>
</ul>