【Javascript】各SNSのシェアボタンのURLを自動で出力
- 2017.02.22
- JavaScript
- タグ, フロントエンドエンジニア

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>