質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 2,692

KyutoYosihama

score 30

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

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

(コード例)

<body>

<div id="container">

<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'); ?><!--includeがPHP5以上から絶対パスが使用できない為、代用のコード-->

<?php
$url = '◯◯◯◯◯◯◯◯◯◯'.$course_NoG.'&tag='.$tag.'&category='.$category_checkG;
readfile($url);
?>

<!--#footer-->
<?php include_once(dirname(FILE).'/./include/footer.html'); ?><!--includeがPHP5以上から絶対パスが使用できない為、代用のコード-->

<!-- end #footer -->

</html>

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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/09 17:13

    <a href="http://twitter.com/share?url=http://◯/tour_detail_test.html?category=original&amp;No=PR6EKT&amp;text=◯" rel="nofollow" target="_blank" title="◯">

    chromeの検証でみたところ、ボタン自体にはちゃんとURLが入っています。
    それがTwitterの共有プレビュー画面になると、
    タイトルがきて、http://◯/◯.html?category=original
    ってなっちゃうんですよね(汗)

    キャンセル

  • 2016/06/09 22:47

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    これはjQueryを読み込んでいる部分なので、僕の意図とする質問の内容ではありません。
    ajaxはいわゆるページの再読み込みが発生せず、一部だけページを書き換えるようなやつです。ヘッダとフッタは再読み込みせず、記事部分だけ読み込んで表示するというようなものですね。

    この場合は、ページの内容が変わりますが、アドレスを書き換える仕組みを作らないと、ずっとアドレスは固定なんですよ。新しいページが部分的に挿入書き換えされたわけですから、元のアドレスが残ってしまうと言うわけです。

    こういうのでない場合は、基本的に何かしらクエリがアドレスに必ず表示されていると思います。もしかするとアドレスだけ書き換えられていて、それに対応するような仕組みになっているのかも知れませんが。

    <a href="http://twitter.com/share?url=http://◯/tour_detail_test.html?category=original&amp;No=PR6EKT&amp;text=◯" rel="nofollow" target="_blank" title="◯">

    こういう表記になるのが正しいとすると、encodeURIComponentを試す必要があるかも知れません。
    サンプルで言う所の$(".test")の前に、console.log(twitter);と入れて一度テストしてみて下さい。

    これは、F12キーなどからデベロッパーツールを開いて、そこのコンソールタブで、twitterと言う変数にどのような値が入っているかを調べるためのものです。
    これはブラウザの実際の画面には出力されなく、コンソール上でだけ表示されます。

    もしここで正しいアドレスが表示されているとなった場合は、
    https://jsfiddle.net/Lfev5spa/1/
    こちらのように、アドレスの組み立てを変更してお試し下さい。urlエンコードをしてみました。

    キャンセル

  • 2016/06/10 11:57

    試してみたところ、
    query = encodeURIComponent(thisAddress),
    twitter = twAddress + query + "&text=" + postTitle;
    に直したらURLもタイトルも綺麗に表示され、Twitterからもアクセスできるようになりました!
    本当に有難うございました!

    同じ要領でFacebook、LINEを追加していきます!
    またつまづいたら質問するかもしれませんが、
    その時は宜しくお願いします!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる