質問: htmlファイルにSNSのシェアボタン(Facebook、Twitter、LINE)をオリジナルの画像で設置しようとしています。 ただ、htmlファイルなのですが、includeで中身を呼び出している形で、 ヘッダーとフッダー以外はデータベースからその都度内容を引っ張ってきて、 内容もURLも変わってしまいます。 (コード例) --> 様々なサイトを検索してみましたが、 動的URLのページで画像を変更して設置する方法が載っていませんでした。 (正確には同じコードを載せても、正常に動かなかった。) どうすればよいでしょうか。 無知な私にご教授お願いいたします。
回答: 今見てるページのアドレスを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が簡単といえば簡単です。 ぶっちゃけますと、別にそんなもん数ミリ秒を競うような世界じゃなければ何を使おうと表示されてたらいいんですけどね(笑) しかし仕様はあっという間に古くなるので、覚えるなら最新のものを覚えておくほうが良いです。