TipBlogs ウィジェット&API

ウィジェットを使用すると貰った投げ銭とコメントをブログ上で表示することができます。

ブログに貰った全てのコメントと、記事毎のコメントを表示できます。
全てのコメントはブログトップページやサイドバー、また、記事毎のコメントは記事の最後などに投げ銭バナーと合わせて設置してみてはいかがでしょうか?
仮想通貨による投げ銭が一般的になれば、従来のコメント欄を置き換えることも可能かもしれません。わざわざお金を出してスパムを投稿する人は少ないでしょうから、スパムフィルターは不要になるかもしれません。

全てのコメントを表示する

以下のコードをブログの任意の場所に貼り付けてください。
高さを変えたい場合は、"height"の部分の数字を変更してください。

<a href="#" class="tb_blog_comment" blog_id="[ブログID]" height="300"></a>
<script src="https://tipblogs.net/widgets/blog-comment-widget.js"></script>


<a href="#" class="tb_blog_comment" blog_id="bd790150d8f2ec085c3a3e439fd1c41e" height="300"></a>
<script src="https://tipblogs.net/widgets/blog-comment-widget.js"></script>
ブログIDはあなたのブログをTipBlogsで表示したときに使用されているランダムな英数字です。

例:https://tipblogs.net/blog/view/2c48edd4b51e134bc3fcf04a369c5f3c

表示例

以下のような感じで表示されます。ブログのトップページやサイドバーに適しています。

ページ(記事)毎にコメントを表示する

以下のコードをブログ記事の任意の場所に貼り付けてください。
高さを変えたい場合は、"height"の部分の数字を変更してください。

<a href="#" class="tb_page_comment" height="200"></a><script src="https://tipblogs.net/widgets/page-comment-widget.js"></script>

表示例

以下のような感じで記事の一番最後に表示するとコメント欄的な使い方ができます。

APIを使用するとブログ上でTipBlogsからの投げ銭の情報を得ることができます

例えば以下のようにブログの記事に対して何回の投げ銭を貰ったのか、いくら貰ったのかを表示できます。

FacebookやTwitterなどのSNSボタンで「いいね!」の回数を表示するのと似ています。

貰った投げ銭の情報を示すことで、あなたのブログや記事がどれだけ応援されているかや、良い記事と認められているかを示すことができます。

ブログ全体の投げ銭情報を得る

リクエスト


https://tipblogs.net/api/tip_count_blog?id=[ブログID]
				


"https://tipblogs.net/api/tip_count_blog?id=bd790150d8f2ec085c3a3e439fd1c41e"
				
ブログIDはあなたのブログをTipBlogsで表示したときに使用されているランダムな英数字です。

例:https://tipblogs.net/blog/view/2c48edd4b51e134bc3fcf04a369c5f3c

返り値


[total_count] => 4 //全ての通貨の投げ銭回数の合計
[page_url] => https://www.example.com/ //リクエストされたページURL
[currency] => Array
    (
        [MONA] => Array
            (
                [total_count] => 0 //MONAの投げ銭回数
                [total_amount] => 0 //MONAの投げ銭合計
            )

        [ZNY] => Array
            (
                [total_count] => 1 //ZNYの投げ銭回数
                [total_amount] => 10 //ZNYの投げ銭合計
            )

        [NEM] => Array
            (
                [total_count] => 0 //NEMの投げ銭回数
                [total_amount] => 0 //NEMの投げ銭合計
            )

        [KAWAZ] => Array
            (
                [total_count] => 3 //KAWAZの投げ銭回数
                [total_amount] => 30 //KAWAZの投げ銭合計
            )
	)

*もし投げ銭を受け取ったことがあるのに値がゼロの場合は、URLの最後のスラッシュ"/"の有り無しの両方を試してみてください↓

https://www.example.com/

または

https://www.example.com


ページ(記事)ごとの投げ銭情報を得る

リクエスト


https://tipblogs.net/api/tip_count_page?url=[URL]
				


"https://tipblogs.net/api/tip_count_page?url=https://www.example.com/page/150"
				

返り値


[total_count] => 4 //このページに対する全ての通貨の投げ銭回数の合計
[page_url] => https://www.example.com/page/150 //リクエストされたページURL
[currency] => Array
    (
        [MONA] => Array
            (
                [total_count] => 0 //MONAの投げ銭回数
                [total_amount] => 0 //MONAの投げ銭合計
            )

        [ZNY] => Array
            (
                [total_count] => 1 //ZNYの投げ銭回数
                [total_amount] => 10 //ZNYの投げ銭合計
            )

        [NEM] => Array
            (
                [total_count] => 0 //NEMの投げ銭回数
                [total_amount] => 0 //NEMの投げ銭合計
            )

        [KAWAZ] => Array
            (
                [total_count] => 3 //KAWAZの投げ銭回数
                [total_amount] => 30 //KAWAZの投げ銭合計
            )
    )

ここではjQueryを使用して、それぞれのボタン上に投げ銭の回数と合計を表示してみます。

HTML


<p><span id="total_tips"></span></p>
<button id="mona"></button>
<button id="zny"></button>
<button id="nem"></button>
<button id="kawaz"></button>
				

Javascript


<script>
$(document).ready(function() {
	$.getJSON("https://tipblogs.net/api/tip_count_page?url=http://www.example.com/", function(data) {
		$('#total_tips').html('この記事に'+data.total_count+'回の投げ銭をもらいました!');
		$('#mona').html(data.currency.MONA.total_count+'回: '+data.currency.MONA.total_amount+'MONA');
		$('#zny').html(data.currency.ZNY.total_count+'回: '+data.currency.ZNY.total_amount+'ZNY');
		$('#nem').html(data.currency.NEM.total_count+'回: '+data.currency.NEM.total_amount+'NEM');
		$('#kawaz').html(data.currency.KAWAZ.total_count+'回: '+data.currency.KAWAZ.total_amount+'KAWAZ');
	});
});	
</script>
				

結果