2016

12

20

SNSボタンに動的に生成したURLを埋め込んでやんよ!!!

スポンサードリンク


色んなSNSでサイトやURLを共有したい場合、共有ボタンを設置して共有することができますが
URLを遷移しないフレームワークで動的生成したパラメータを追加させたURLを共有したい場合はSNSボタンの設置にも特殊な設定が必要になります。

いざやろうとした際にけっこう手間取ったのでメモっときます。

動的に生成したURLをSNSボタンで共有したい場合

URLを変更させずにコンテンツが遷移する仕様のサイトでは
SNSボタンを通常の方法で設置すると、コンテンツの内容がのような表示をしていても
共有されるURLは、今アクセスしているURL(index)または、
初めからボタンに設置している固定URLとなってしまいます。

その他にもパラメータ判定によってページの出力内容が変更になる仕様のサイトの場合、
すべてのパラメータのパターンが確定していて、パラメータに合わせて共有ボタンの切り替えを行うなどで対応は可能ですが、
もしパラメータのパターンが無限(に近い種類)な場合・・・・

どうする?って、、、のが今回の案件。

URLが変わらないフレームワーク仕様のサイト

URLは変わらないが、表示させるコンテンツ内容は変わる

URLのパラメータによってアクセス判定する仕様

URLのパラメータのパターンは数え切れない


要は上記の条件に該当しちゃうけどSNSボタンは設置したい人に届けたい・・・


URLに動的なパラメータを付け加える

まずは要件となる環境を作るために、動的にパラメータを生成させる処理の準備です。
id名randum要素をクリックするとランダムにパラメータを生成して、id名para要素に新規URLを発行する仕様とします。

HTML

<input type="button" id="randum" value="ランダムなパラメータを生成"></p>
<input type="text" size="50" id="para" value="http://example.com" />

JavaScript

	// ランダムパラーメーター作成
	$('#randum').click(function(){
		// 0~50個の文字列数と組み込む英数字をランダムに生成					
		var num = Math.floor( Math.random() * 50 );
		var str = 'abcdefghijklmnopqrstuvwxyz'
			+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
			+ '0123456789';
		str = str.split('');
		var $rand_str = '';
		for(var i = 0; i < num; i++) {
		  $rand_str += str[Math.floor(Math.random() * str.length)];
		}
		
		//生成パラメータをutf-8エンコードして新規URL発行
		var $rand_str = encodeURIComponent($rand_str);
		var $url = 'http://example.com/?para=' + $rand_str;
		$('#para').val($url);
		
		// SNSボタン
		funcShareLink($url);		
	});

	// SNSボタンURL置換   
	function funcShareLink($url) {
		
		/***********************************
		 この中に各SNSボタンの設定処理を記述
		************************************/	 
	
	}	
動的なURLを生成する場合、何かしらのイベントが発生する必要があると思われますので上記を参考に最終的にfuncShareLink関数の役割をする処理に新規で発行したURLを引数にさせてください。

各SNSボタンの設定

いよいよ本題です。
上記のURL発行処理の仕様をもとに、『ランダムなパラメータを生成』をクリックするとランダムな文字列としてパラメータを付け加えたURLを発行し、その新規URLをもとにSNSボタンを成形する機能を実装したデモページがコチラ

組み込みの際の注意点

  • ・ボタンによってはデフォルトで値が埋め込まれていないボタンは表示されませんので初期設定ではボタンとなる要素は非表示にさせてください。(※URLが発行処理されるまではボタンとして成形されません
  • ・もととなるURLには仮として「http://example.com」を設定していますので、自身のサイトURLに書き換えてください。
※通常仕様のボタン設置用のソースコードとは異なりますので、通常仕様の各ボタンの設置方法はリンクのガイドラインをもとに設置してください。

LINEの場合

LINEボタンのガイドライン:https://media.line.me/howto/ja/
※オフィシャルのボタンアイコンを利用したい場合は、ページ最下部の画像ファイルをダウンロードして自分のサーバーにアップロードする必要があります。

HTML

<!-- LINE -->
<li class="line">
<a href="http://line.me/R/msg/text/?http://example.com"><img src="アイコン画像" width="82" height="20" alt="LINEに送る"></a>
</li>

JavaScript

// LINE用
$('.line a').attr({"href": "http://line.me/R/msg/text/?" + $url});
URLの発行処理が行われた際に、新たに発行したURLを$url変数として「http://example.com」部分を書き換え、リンクを再発行します。


Twitterの場合

Twitterボタンのガイドライン:https://about.twitter.com/ja/resources/buttons

HTML

<!-- Twitter -->
<li class="twitter">
<a style="display:none;" href="https://twitter.com/share" class="twitterClone" data-url="http://example.com" data-hashtags="ハッシュタグ">Tweet</a>
<div id="tweet-area"></div>
</li>

JavaScript

// Twitter用
$('#tweet-area').empty()
var clone = $('.twitterClone').clone()
clone.removeAttr('style');
clone.attr('data-url', deckShareLink);
clone.attr('class', 'twitter-share-button'); 
$('#tweet-area').append(clone);
$.getScript('http://platform.twitter.com/widgets.js');
ボタン自体はiframeとしてTwitterサイトから表示されるので、URLの発行処理が行われた際に#tweet-area要素内に新たに発行したURLを組み込んだボタンとなるソースコードを生成させる仕様です。
ハッシュタグ無しの場合は「data-hashtags=”ハッシュタグ”」の部分は不要です


mixiの場合

チェックボタン発行フォーム:http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/publish/

HTML

<!-- mixi -->
<li class="mixi">
<a href="http://static.mixi.jp/share.pl" class="mixi-check-button" data-button="button-2" data-url="http://example.com">チェック</a>
</li>

JavaScript

// mixi用
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "http://static.mixi.jp/js/share.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
$('.mixi a').attr({"data-url": url});
URLの発行処理が行われた際に、新たに発行したURLを$url変数として「http://example.com」部分を書き換え、リンクを再発行します。


はてなブックマークの場合

はてなブックマークボタンの作成・設置について:http://b.hatena.ne.jp/guide/bbutton

HTML

<!-- はてなブックマーク -->
<li class="hatena">
<a href="http://b.hatena.ne.jp/entry/http://example.com" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</li>

JavaScript

// はてなブックマーク用
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "https://b.st-hatena.com/js/bookmark_button.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
$('.hatena a').attr({"href": "http://b.hatena.ne.jp/entry/" + url});
Twitter同様、ボタン自体はiframeとしてはてブのサイトから表示されるので、URLの発行処理が行われた際に、新たに発行したURLをリンクに書き換え、ボタン設置のソースコードを再発行させます。


pocketの場合

pocketボタンの作成・設置について:https://getpocket.com/publisher/button

HTML

<!-- pocket -->
<li class="pocket">
<a data-save-url="http://example.com" data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
</li>

JavaScript

// pocket用
(!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js"));
$('.pocket a').attr({"data-save-url": $url});
Twitter同様、ボタン自体はiframeとしてpocketのサイトから表示されるので、URLの発行処理が行われた際に、新たに発行したURLをリンクに書き換え、ボタン設置のソースコードを再発行させます。

まとめ

かなり特殊な条件化の中での案件なので当然ですが、調べた際にはほとんど参考になるものがなかったので、各ボタンの仕様を把握するのに結構苦労しました。

尚、Twitterなどで共有されるページタイトルはデフォルトのままのタイトルを引き継いでしまうので、こちらも対応する場合は別途処理が必要になります。

この他、様々なSNSボタンがあると思いますが、基本的には今回のサンプルのパターンで対応できると思われますので参考までに。

トップへ