JavaScriptでシェアボタンを生成する

シェアボタンをカスタマイズして設置することがよくあるので、URLを生成してから埋め込むまでの処理を作成してみます。

サンプルコード

今回はTwitter,Facebook,LINEの3つのシェアボタンを試してみます。
それぞれ以下のURLにすることでシェアすることができます。

Twitter
https://twitter.com/share?text=【シェアするテキスト】&url=【シェアするURL】
Facebook
http://www.facebook.com/share.php?u=【シェアするURL】
LINE
https://line.me/R/msg/text/?【シェアするテキスト】【シェアするURL】

シェアボタンを追加する要素を作成します。

HTML

<div id="sns-area"></div>

JavaScriptでボタンを生成して埋め込みます。

JavaScript

// SNSボタンを追加するエリア
var snsArea = document.getElementById('sns-area');

// シェア時に使用する値
var shareUrl = 'https://cly7796.net/blog/'; // 現在のページURLを使用する場合 location.href;
var shareText = 'cly7796.netのトップページです。'; // 現在のページタイトルを使用する場合 document.title;

generate_share_button(snsArea, shareUrl, shareText);

// シェアボタンを生成する関数
function generate_share_button(area, url, text) {
	// シェアボタンの作成
	var twBtn = document.createElement('div');
	twBtn.className = 'twitter-btn';
	var fbBtn = document.createElement('div');
	fbBtn.className = 'facebook-btn';
	var liBtn = document.createElement('div');
	liBtn.className = 'line-btn';

	// 各シェアボタンのリンク先
	var twHref = 'https://twitter.com/share?text='+encodeURIComponent(text)+'&url='+encodeURIComponent(url);
	var fbHref = 'http://www.facebook.com/share.php?u='+encodeURIComponent(url);
	var liHref = 'https://line.me/R/msg/text/?'+encodeURIComponent(text)+' '+encodeURIComponent(url);

	// シェアボタンにリンクを追加
	var clickEv = 'onclick="popupWindow(this.href); return false;"';
	var twLink = '<a href="' + twHref + '" ' + clickEv + '>twitter</a>';
	var fbLink = '<a href="' + fbHref + '" ' + clickEv + '>facebook</a>';
	var liLink = '<a href="' + liHref + '" target="_blank">line</a>';
	twBtn.innerHTML = twLink;
	fbBtn.innerHTML = fbLink;
	liBtn.innerHTML = liLink;

	// シェアボタンを表示
	area.appendChild(twBtn);
	area.appendChild(fbBtn);
	area.appendChild(liBtn);
}

// クリック時にポップアップで表示させる関数
function popupWindow(url) {
	window.open(url, '', 'width=580,height=400,menubar=no,toolbar=no,scrollbars=yes');
}

これでシェアボタンが生成できました。
シェアボタン埋め込みのデモページ
埋め込むエリアとシェアするURL、テキストを指定すればいいようにしています。
テキストではなく画像にしたい場合、generate_share_button()内のリンク追加部分(27～29行目)を適宜変更してください。
　

【参考サイト】

• twitter/Facebook/LINEのシェアボタンのカスタマイズ方法 – Qiita