【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文を使用しているので無限ループに要注意

1. javascript側
2. HTML側

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>

未経験からでもエンジニアにはなれる！

中堅の年代になり、最近よくどうやってエンジニアになったんですか？と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい！

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能！これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp（コードキャンプ）

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです！

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル（プログラム言語）が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千～数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け！】Web開発入門完全攻略　充実の18時間コース