yuko > ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/9/19 16:24
nano iconsのブログ部分の最下位にフェイスブック、ツイッター、ハテブのボタンを付けたいです。サイト全体に「いいね」を付けるのではなくて記事一つ一つに「いいね」が出来るようにしたいのですがその場合、一つ一つurlを登録してボタンを作らなといけないのでしょうか？以前アメブロでブログをしていた際はフェイスブックの「いいね」ボタンを押すとその記事に「いいね」がついたので同じようにしたいのですがやり方がわかりません。よろしくお願いします。また、こちらの質問も未解決ですのでよろしければ教えてください。 http://forum.basercms.net/modules/newbb/viewtopic.php?topic_id=1716&forum=5 よろしくお願いします。 ■ BaserCMSのバージョン：3.0.7 ■ レンタルサーバー名：lolipop ■ スマートURLの利用： OFF ■ 設置フォルダ：　[よく分かりません・・・] ■ 利用しているデータベース：　[よく分かりませ

yuko > ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/9/19 16:24

nano iconsのブログ部分の最下位に
フェイスブック、ツイッター、ハテブのボタンを付けたいです。

サイト全体に「いいね」を付けるのではなくて
記事一つ一つに「いいね」が出来るようにしたいのですが
その場合、一つ一つurlを登録してボタンを作らなといけないのでしょうか？

以前アメブロでブログをしていた際は
フェイスブックの「いいね」ボタンを押すと
その記事に「いいね」がついたので
同じようにしたいのですが
やり方がわかりません。

よろしくお願いします。

また、
こちらの質問も未解決ですので
よろしければ教えてください。
http://forum.basercms.net/modules/newbb/viewtopic.php?topic_id=1716&forum=5

よろしくお願いします。

■ BaserCMSのバージョン：3.0.7
■ レンタルサーバー名：lolipop
■ スマートURLの利用： OFF
■ 設置フォルダ：　[よく分かりません・・・]
■ 利用しているデータベース：　[よく分かりませ

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

yuko > Re: ブログ記事一つ一つにフェイスブック、ツイッター、ハテブボタンを付けたい @ 2014/10/3 15:46
ありがとうございました！やってみます！ ■ BaserCMSのバージョン：3.0.7 ■ レンタルサーバー名：lolipop ■ スマートURLの利用： OFF ■ 設置フォルダ：　[よく分かりません・・・] ■ 利用しているデータベース：　[よく分かりませ

スレッド表示 | 新しいものから

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

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

キーワード検索