【ワロタボタンについて】新しい2chまとめ向けソーシャルボタン~ワロタレスをカウント!~

アクセスありがとうございます。
ワロタボタンとはウチのサイトでレス本文の右下につけている

こういったボタンのことです。(試し押しOKです!)

このボタンは2chまとめブログパーツとして開発しましたので皆さまのブログにつけて頂けます。

※2014年02月24日追記
1記事に1ボタン対応の、まとめサイトではない一般ブログ向けワロタボタンもリリースしました。
詳しくは→コチラ


詳しい解説、設置方法は下のほうにあります。
もしよろしければ、サイトの賑やかしにでも是非どうぞ!(・∀・)
※今のところPC用のみです


また、ワロタボタンと連動したウィジェットパーツも同時に配布しています。
「ワロタ記事ランキング」と「最新ワロタレス」です。
↓こんなのです。

概要

ワロタボタンについて

それぞれのレスに対して閲覧者がクリックしたワロタ回数をカウントしていきます。
ページを更新してもカウントは維持されます。
一つのボタンは1日5回まで押せて、1回押すごとに膨らんでいき5回押すと割れます。
笑ったレスをそのままツイートしてもらえるよう、割れたところにツイートボタンをつけたり

管理人様のIDでブログランキングへのリンクバナーを出したり

と、今のところ2つのバリエーションがあります。
今後この割れた中身のバリエーションは要望などがあれば増やしていきたいと思っていますので
何かアイデアがありましたら是非メールフォームまたはコメント欄よりお願いいたします(・∀・)

ワロタウィジェットについて

ワロタ記事ランキングと最新ワロタレスは名前のまんまの機能ですが
『ワロタが押された合計数が多い順ランキングTOP10』 と
『最近押されたレスの内容10件表示』 というものです。
これによってサイトの回遊率の上昇も期待できますし
最新ワロタレスはHTMLをそのまま再現するので、アフィリエイトリンクなども載ります。
将来的にはワロタボタンをつけているサイト同士での
このウィジェットを利用したアクセストレードの方法も考えています。

ワロタボタンの設置方法

さて、実際に設置して頂く方法です。
下記のフォームに必要な情報を入力して
返ってきた貼り付けコードをサイトテンプレートのヘッダーに貼りつけるだけです。

必要な情報

ワロタボタンを付けるのに必要な情報は、レスの本文を囲っている“クラス名”です。
もしくはレス全体を個別に囲っている“ID名”でも結構です。

簡単に言うと

「本文をクラスで囲っている場合」 (便宜上まとめくす型と呼ばせてもらいます)

「本文は囲ってないがレスごとにIDがついてる場合」 (便宜上エクサツール型と呼ばせてもらいます)

このどちらかのパターンです。

例えば「まとめくす」さんのツールを使っている方ならデフォルトで
“t_b”というクラスがついていると思います。
<div(or p) class="t_b">本文</div(or p)>
※注:名前欄などを囲っている”t_h”ではなく、”本文のみ”を囲っているクラスです。

例えば「エクサツール」さんのツールを使っている方などはデフォルトでは
レス全体を囲っている連番付きidがあるはずです。
<div id="resid1">レス番:名前欄~
<div style="margin: 10px 0px 60px 20px; font-weight:bold;">本文</div>
</div>
こんな感じかと思います。その場合はそのidを囲っているタグ名“div”
“resid”という風にidから連番数字などを抜いたものを入れて下さい。

他にも定義型リストdlなどでレス部分を記述しているところも見かけるのですが
本文部分ではないRSSなどにも使っておられる方が多く
レス部分とそうでない部分の見分けがつかないため
申し訳ありませんが今のところはこのまとめくす型とエクサツール型の2種類にしか対応していません。

要は “レスごとに一律でついている何か” があれば対応できる可能性がありますので
うまくいかない場合、当てはまる環境にない場合は気軽にご相談下さい。
また、付けられた方でも、つけたくない部分についてしまってる、といった場合もお知らせ下さい。
個別に対応させて頂きます。

コードを取得したいパーツを選択して下さい。

ワロタボタン(ワレタラツイートver.)の貼り付けコード作成ジェネレーター






ワロタボタン(ワレタラランキングver.)の貼り付けコード作成ジェネレーター






クラスに加えてブログランキングIDを入力してもらいます。
IDはブログランキングのマイページからリンクバナー・URLタブ にある
“リンクURL”の?の後についている数字です。
管理人のですと、”http://blog.with2.net/link.php?1467424″ こういうURLなので
1467424がIDとなります。

ワロタウィジェットの貼り付けコード作成ジェネレーター




ウィジェットの取り付け方も同じくヘッダーに貼り付けコードを貼り付けるのですが
それとは別に 管理人様のサイトのテンプレートにウィジェットを取り付けたい箇所へ

		<div class="warota_widget"></div>
		
記述してもらう必要があります。ページが読み込まれた後、ここにウィジェットが追加される仕様です。

また、除去タイトル入力欄ですが
ブログの記事ページにつくタイトルにブログ名が含まれている場合が多いと思います。
ブログ名が前の場合もありますが、例えば
“記事タイトル|ブログ名” こんなんとか
“記事タイトル – ブログ名” こんなんみたいになってたりしますね。

つまりは個別記事ページにおける
<title></title>
タグの中身のことです。
「ワロタ記事ランキング」ではtitleタグを取得して表示してますので
ブログ名を表示してしまうとこの画像のようになってしまいます。



見づらいですね。
なので、ブログ名の部分と繋ぎ文字を消去するために要らない部分を指定してもらいます。
このブログだったら”|【つっ!.COM】 2chまとめにΣ(`・ω・ ´ )” です。
” – “(ハイフン)でつないでるブログなら入力は” – ブログ名”といった感じです。
「titleタグにブログ名は入ってない、記事タイトルのみだ」という方は空白で結構です。


(※現在ワロタボタンは、”ワレタラツイートver.” か “ワレタラランキングver.” の2種類のみです)
(※どちらか1つしかつけれません)
(※ワロタウィジェットはワロタボタンをつけていないと機能しません)
(※ワロタウィジェットは最低でも10記事以上に1ワロタずつ付かなければうまく表示されません)

ワロタボタンの取り付けにはjQueryとjQueryUIが必要となります。
貼り付けコードにCDNのコードをつけていますが、既にサイトで使っている方は取り除いて下さい。
よく分からない方はそのまま貼り付けて下さい。

レス本文とボタンが被ってしまう!という方や、本文とボタンの間が空きすぎ!という方へ
*CSSを上書きして下さい*
現在、.wtbwrapというクラスで位置を管理しており、margin:-10px 20px -10px auto;という設定です。
この-10pxという数字をいじることで、上下に調整できます。
ご自身のCSSスタイルシートへ
.wtbwrap {
	margin:5px 20px 0px auto !important;
}
などと追加して頂くと追加したCSSが適用されます。

おまけ

まだ実験段階ですのでおまけ的要素として。
ワロタボタンが押されたらツイートするBOTを作ってみました。

ワロタボタンが押されたらこんな感じに自動でTweetしてくれます。
まだ140文字制限がいまいち分かってないので、本文にURLが交じっていてテキスト部分が長い場合など
たまに呟かないこともありますが…
まぁおまけなので、精度はぼちぼち高めていきたいと思ってます。

↑最適化しました!(2014/03/08)

フォロワーはまだ少ないです。
当たり前ですが、『ワロタボタンを押される=ツイート数が増える』ことになるので
おまけとは言えツイートの数字が増えるのは見た目に嬉しいかなーと思ってます。
このBOTが大きく育てばパーツをつけている方にツイッターからのアクセスがいきやすくなるので
是非フォローよろしくお願いします(・∀・)

自己サイトPRについて

現在、合計3カ所【つっ!.COM】 2chまとめにΣ(`・ω・ ´ )へのリンクを入れさせて頂いております。
ワロタボタンの一番最後のボタン下、ランキングTOP(PRと表記)、ワロタウィジェットの外枠左下です。
無料での提供となりますゆえ何卒ご理解の程をお願いいたします。

今後の展開

こうした方がいいんじゃない?こんな機能欲しい!など
どしどしアイデアどしどし募集しております。
今のところ、ワロタ以外にも「ワロエナイ」ボタンとか良いんじゃない?といった声もありましたので
あまり記事を読むのに邪魔にならない範囲でボタンのバリエーションについても考えていくつもりです。

あと、スマホにも付けたいんですが画面が小さい分あまりスペースがなく
邪魔にならないデザインが思いつかないのでまだ手つかず。。

今後色々と機能をつけてアクセスアップに繋がるようにしていきたいので
是非ともよろしくお願いいたします(`・∀・´)ノ
管理人@てばさき

免責事項

当サイト及びリンク先のサイトを利用したことにより発生したいかなる損害、損失及びトラブルに関して
当方では一切の責任と義務を負いかねますので予めご了承下さい。
パーツの取り付けはあくまで自己責任でお願いいたします。
(取り付けや利用方法に関する質問や、要望などは気軽にメールまたはコメント下さい。)
パーツの仕様は予告なく変更されることがございますので予めご了承下さい。

【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

つっ!コメ 8 件

  • ななしやねん!さんより 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    面白い

  • ななしやねん!さんより 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    (・∀・)イイネ!!

  • ななしやねん!さんより 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    2chまとめサイト用だけじゃなくて、一般のブログ用に記事全体に対して評価できるようなボタンがあればすごく嬉しいです。

  • てばさき@管理人より 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    ※3 ななしやねん!さん
    貴重なご意見ありがとうございます!

    よくある記事最後にソーシャルボタンが並んであったり、サイド追尾しているソーシャルボタングループに一緒にこのワロタボタンも並べる、みたいな感じでしょうか。

    面白そうですね!考えてみます!
    また出来たらアナウンスしたいと思います!

  • てばさき@管理人より 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    ※3 ななしやねん!さん

    一般ブログ向けワロタボタン取り急ぎですが出来ました。

    http://tuccom.com/warota_article

    もし宜しければご覧下さい~。

  • てばさき@管理人より 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    このページのみコメントが出来ない状態になっていたので改善しました。
    メールでユーザーの方からお知らせ頂いたのですが存在しないアドレスだったのでコメント欄にてお詫びとお礼申し上げます。
    ご迷惑おかけして申し訳ありません。
    お知らせありがとうございました。

  • wより 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    wwwwww

  • Prestamoscongarantiahipotecaria.Credito-Urgentes.Esより 【ワロタボタンについて】 新しい2chまとめ向けソーシャルボタン ~ワロタレスをカウント!~ へのコメント

    Tú eliges los plazos desde 6 meses a 4 años.

レッツ!つっ!コメ

名前
メールアドレス
URL

全角数字にも対応しました。
対応アンカ: > , >> , >> , >
(例): >>5, >>5, >5, >5など。
※文の途中にあるアンカには反応しません、文頭のみです(´・ω・`)
好きなとこへツッコもう!
もちろん普通のコメントもお待ちしておまんす!

つっ!コメ本文

※NGワードは伏せ字にさせて頂きます。悪しからず(´・ω・`)

▲Pagetop