動的URLのページにSNSシェアボタンを設置したい。

htmlファイルにSNSのシェアボタン（Facebook、Twitter、LINE）をオリジナルの画像で設置しようとしています。

ただ、htmlファイルなのですが、includeで中身を呼び出している形で、
ヘッダーとフッダー以外はデータベースからその都度内容を引っ張ってきて、
内容もURLも変わってしまいます。

（コード例）

<div id=bottun_box>
	<ul id="social_box">
		
		<!--ツイッター-->
		<li>

		
	
			<script>
				document.write('<a href="http://twitter.com/share?url=' + url + '&text=' + title + '" rel="nofollow" target="_blank"><img src="images/icon-type/Twitter.png" alt="ツイッターで拡散する" /></a>');
			</script>
			-->
		</li>
	
	</ul>
</div>

<?php include_once(dirname(__FILE__).'/./include/header_five.html'); ?> <?php $url = '◯◯◯◯◯◯◯◯◯◯'.$course_NoG.'&tag='.$tag.'&category='.$category_checkG; readfile($url); ?>  <?php include_once(dirname(__FILE__).'/./include/footer.html'); ?>  </html>

様々なサイトを検索してみましたが、
動的URLのページで画像を変更して設置する方法が載っていませんでした。
（正確には同じコードを載せても、正常に動かなかった。）

どうすればよいでしょうか。

無知な私にご教授お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

今見てるページのアドレスをjsなりjQueryで拾って入れてみてはどうですか？
アドレスがどれだけ変わろうと、シェアボタンを押すときのアドレスというのが変わるわけではないでしょうからそれを当てたら良いのではなかろうかと思います。

jsFddleでのサンプル

サンプルの中では、その引っ張ってくる記事の内容がなかったので、適当にタイトルやらを入れました。
概ね動作する構造がご理解頂ければ、あとはまぁいじくれば何とかできると思います。
チェーンメソッドで書いてますが、それぞれにやっても良いと思いますし、元々入れるべき箇所があるならそれをターゲットにしてもできます。

サンプルを見てattr()でそれぞれの属性を入れている所がポイントでしょうか。
twitterへのアドレスは変わりませんから、変更されるのはその記事などのタイトルとページアドレス、ここだけなので、それはページが開いてからでも操作できるわけです。

動的に変わると言っても何秒か毎にメイン部分が変更されるわけではないでしょうし、ページが作られてからpjax等で中(メイン部分)のコンテンツを変えておられるわけでもないでしょうから、それはページを開く前は動的に処理されていると言うことですけれども、表示自体は静的なわけです。
なので、jQueryやらjavascriptにとってはむしろ好都合です。

またjavascriptでやられる場合でも、document.writeはなるべく使わない方向でやられるのが良いかと思います。document.write(もしくはwriteln) は2010年10月ぐらいから非推奨になってます。
現在では、innerHTMLやらを使えというふうに言われてますが、jQueryのような操作がjavascriptでもできるようになりましたので、遅いinnerHTMLを使うよりはES2015仕様でやられるのが良かろうかと。
つまりはelement.insertAdjacentHTMLです。

スマホやらの対応がわからないので、ひとまずinnerHTMLが楽ですが、まぁどっちにしろ便利に書けたほうが良いのでjQueryが簡単といえば簡単です。

ぶっちゃけますと、別にそんなもん数ミリ秒を競うような世界じゃなければ何を使おうと表示されてたらいいんですけどね(笑)
しかし仕様はあっという間に古くなるので、覚えるなら最新のものを覚えておくほうが良いです。

投稿2016/06/08 19:23

hidekichi

総合スコア366

KyutoYosihama

2016/06/09 03:42

回答していただきありがとうございます。また、サンプルも置いていただきありがとうございます。 Twitterの設置からやってみたのですが、アイコン画像の表示、ボタンクリック後のTwitter画面の起動、タイトルの表示まではできるのですが、URLの末尾部分が表示できません。 URLの末尾はコースNoになる（私が動的URLと言っていた部分）のですが、そこが表示されないのでいざTwitterでシェアしてもリンクに飛ばないのです。これは何が問題になるのでしょうか？サンプルを利用して設置した際には、id と class　の部分しか変更していません。

hidekichi

2016/06/09 03:50 編集

URLの末尾部分というのはクエリですか？つまり、アドレス/index?name=123であれば、?name=123の部分とかですかね？

KyutoYosihama

2016/06/09 04:14

多分そうです。正）http://◯/◯.html?category=original&No=PR6EKT 誤） http://◯/◯.html?category=original Twitterでは誤ったURLになるので、正しい方のURLにしたいです。 Twitterの共有画面の方で検証してみたところ、 name="original_referer"に正しい表記が name="url"で誤った表記が入っていました。これを修正するにはどうしたらよいのでしょうか？重ね重ね申し訳ありません。

hidekichi

2016/06/09 04:22

クエリは window.location.search で拾えるかと思います。 q = window.location.search;などとして変数に入れ、アドレスの後に+で連結すればよいのではないかと思います。

KyutoYosihama

2016/06/09 05:15

$(function() { var thisAddress = window.location.href; var postTitle = $(".tourtitledetail").text(); var q = window.location.search; var twitter = "http://twitter.com/share?url=" + thisAddress + q + "&text=" + postTitle; このような形で入力したのですが、クエリが入らないです。入力の仕方がおかしいのでしょうか？

hidekichi

2016/06/09 05:35 編集

codepenで元のスクリプトを試してみましたが、クエリは拾ってますね。qを付け加えると、重複することになります。ちなみに、正）http://◯/◯.html?category=original&No=PR6EKT この正しいと思われるアドレスは、アドレス欄以外に出力することはできませんか？例えば記事の終わりの方とか。何ならhtmlにあるだけでcssで非表示にしても良いです。そしたらそっちから拾う方が確実で間違いないと思うので。あるいはheadタグのメタ部分に記述があるとか、何かそういうhtml上に実態のある要素というか何かしら。

KyutoYosihama

2016/06/09 05:59

headの部分に <title> <?php $url_title = 'http://◯/tour_title_ff.php?No='.$course_NoG; readfile($url_title); ?></title> の記述があったのですが、これは使用できますでしょうか？ tour_title_ff.phpの部分はデータベースから内容を引っ張ってきて、中身を表示するファイルになります。また、別の方のページで <a href="#" onclick="d=document,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(window.getSelection)?window.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/intent/tweet?text='+e(t+d.title)+'&original_referer'+e(location.href)+'&url='+e(location.href);if(!window.open(f,'','width=500,height=250'))location.href=f;void(0);return false"><img src="images/icon-type/Twitter.png" alt="ツイッターで拡散する" /></a> を入れると、URLがちゃんと表示されたのですが、今回教えていただいた方法とどう違ってくるのでしょうか？

hidekichi

2016/06/09 06:45

シェアのアドレスとは違いますが、タイトルを何かしらの部分に入れるのにurlエンコードして入れてるようですが、内容はlocation.hrefを入れているので動作的には同じかと思うんですけどね。 original_refererは、おそらくwindow.openで新しいウィンドウを開く前のアドレスを入れているんだと思います。タイトルの部分のPHPが出力されて、正しいアドレスになっているのであれば使えます。おそらく、 $("title").text(); で拾えると思います。 javascriptだと、document.titleですかね。 jq、jsいずれかで、このタイトルの部分をアドレスの変数に入れたらどうでしょうか？

KyutoYosihama

2016/06/09 07:28

やってみたのですが、あくまでもコースのタイトル文を出力しただけでした。また、アドレスはアドレス欄以外に出力されている部分はありませんでした。 var thisAddress = window.location.href; この部分の記述に何を足せば、&No=PR6EKTが追加されるのでしょうか？ちなみにvar thisAddress = window.location.href + window.location.search; にしてもクエリは取得できませんでした。

hidekichi

2016/06/09 07:42

逆に正しいアドレスをいずれかに入れることはできない状況ですか？組み立てた正しいアドレス、つまりその該当ページに飛べるものをどこかに出力するだけなんですけれども。あるいは、記事タイトルのリンク等が、その正しいアドレスになっているとか。 ajaxとか利用されてますか？あるいは、表示されているアドレスに&No=PR6EKTは出てますか？あるいは、No=PR6EKT自体もどこにも記載はないんですかね？結局、htmlのどこかにあれば拾えるわけです。アドレス欄に出ていれば良いんですけれども、ajaxなどで後から書き換えたものは、表示がそうなっているだけだったりします。その場合はクエリは拾えないと思います。 ajaxの場合popstateあたりで書き換えたらイケると思うんですが、phpなら普通にいずれかに書き出せると思うんですけれども。

KyutoYosihama

2016/06/09 08:05

ajaxだと <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> で使用しています。そのページのURL事体には http://◯/◯.html?category=original&No=PR6EKT とでています。 htmlの他の部分に&No=PR6EKTの表記はないです。ちなみにHPが置かれているサーバーとデータベースが置かれてあるサーバーが別々にある（開発者がそうしたみたいです）場合はできないということもありえるのでしょうか？

KyutoYosihama

2016/06/09 08:13

<a href="http://twitter.com/share?url=http://◯/tour_detail_test.html?category=original&No=PR6EKT&text=◯" rel="nofollow" target="_blank" title="◯"> chromeの検証でみたところ、ボタン自体にはちゃんとURLが入っています。それがTwitterの共有プレビュー画面になると、タイトルがきて、http://◯/◯.html?category=original ってなっちゃうんですよね（汗）

hidekichi

2016/06/09 13:47

KyutoYosihama

2016/06/10 02:57

試してみたところ、 query = encodeURIComponent(thisAddress), twitter = twAddress + query + "&text=" + postTitle; に直したらURLもタイトルも綺麗に表示され、Twitterからもアクセスできるようになりました！本当に有難うございました！同じ要領でFacebook、LINEを追加していきます！またつまづいたら質問するかもしれませんが、その時は宜しくお願いします！

行動規範の内容に同意します