Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい

トップ > baserCMS全般 > ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい

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タグで構成されています。 `<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://basercms.net" data-via="basercms">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>` scriptタグは置いておいて、aタグに注目していただければ、シェアするページのURLを"data-url"という属性にて指定しているということがわかるかと思います。つまり先ほどの自動生成ページではユーザー入力値に応じてaタグの各属性の値を動的に書き換えているだけです。例）単一記事のページにボタンを表示する例 app/webroot/theme/{theme_name}/Blog/default/single.phpにコードを書きます。 `<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php $this->BcBaser->url(null, true); ?>" data-via="basercms">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>` 元のHTMLコードのdata-url属性の値をbaserCMSのページURLを取得するメソッドを利用して置き換えたのみです。実際に利用する際はTwitterボタンのページからご自身の設定でコードを生成してから該当箇所を置換してください。他のソーシャルボタンについてもほぼ同様に、シェアするページのURLを指定する属性（もしくは属性値の一部にURLが含まれる）がありますので、応用できるかと思います。なお、Google＋のようにHTMLタグでURLの指定の必要がなく、自動的にボタンが表示されているページを対象にする仕様のものもあります。 Twitter:　@n_1215

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タグで構成されています。


<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://basercms.net" data-via="basercms">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

scriptタグは置いておいて、aタグに注目していただければ、
シェアするページのURLを"data-url"という属性にて指定しているということがわかるかと思います。
つまり先ほどの自動生成ページではユーザー入力値に応じてaタグの各属性の値を動的に書き換えているだけです。

例）単一記事のページにボタンを表示する例
app/webroot/theme/{theme_name}/Blog/default/single.phpにコードを書きます。


<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php $this->BcBaser->url(null, true); ?>" data-via="basercms">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

元のHTMLコードのdata-url属性の値をbaserCMSのページURLを取得するメソッドを利用して置き換えたのみです。
実際に利用する際はTwitterボタンのページからご自身の設定でコードを生成してから該当箇所を置換してください。

他のソーシャルボタンについてもほぼ同様に、シェアするページのURLを指定する属性（もしくは属性値の一部にURLが含まれる）がありますので、
応用できるかと思います。
なお、Google＋のようにHTMLタグでURLの指定の必要がなく、自動的にボタンが表示されているページを対象にする仕様のものもあります。

Twitter:　@n_1215

フラット表示

前のトピック | 次のトピック

Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい

キーワード検索