Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい
- yuko > ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/9/19 16:24
- » n1215 > Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/9/29 18:14
- yuko > Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/10/3 15:46
n1215 > Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/9/29 18:14 |
---|
yuko 様
こんにちは。 各ボタンの実態は単なるHTMLのコードですよね。 大抵のボタンではシェアするページのURLはそのコードに含まれるHTMLタグ(大抵aタグ)の属性で指定できます。 方針としては、そのURLをbaserCMSのメソッドによって動的に指定すれよいということになります。 ツイートボタンを例に挙げて説明します。 下記がTwitterボタンのページから自動生成したコードです。 https://about.twitter.com/ja/resources/buttons#tweet aタグとscriptタグで構成されています。
scriptタグは置いておいて、aタグに注目していただければ、 シェアするページのURLを"data-url"という属性にて指定しているということがわかるかと思います。 つまり先ほどの自動生成ページではユーザー入力値に応じてaタグの各属性の値を動的に書き換えているだけです。 例)単一記事のページにボタンを表示する例 app/webroot/theme/{theme_name}/Blog/default/single.phpにコードを書きます。
元のHTMLコードのdata-url属性の値をbaserCMSのページURLを取得するメソッドを利用して置き換えたのみです。 実際に利用する際はTwitterボタンのページからご自身の設定でコードを生成してから該当箇所を置換してください。 他のソーシャルボタンについてもほぼ同様に、シェアするページのURLを指定する属性(もしくは属性値の一部にURLが含まれる)がありますので、 応用できるかと思います。 なお、Google+のようにHTMLタグでURLの指定の必要がなく、自動的にボタンが表示されているページを対象にする仕様のものもあります。 Twitter: @n_1215 |