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

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

デモを確認してください。

DEMO

説明
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>

JavaScriptの参考書籍

私がJavaScriptを勉強したときに使った書籍をご紹介します。