<p class="thumb"><img src="http://web-marketing.zako.org/images/2009/03/quoteurl.png" alt="Twitterの会話を引用してサイト上で共有できる「QuoteURL」" title="Twitterの会話を引用してサイト上で共有できる「QuoteURL」" width="514" height="204" class="alignnone size-full wp-image-2633" /></p><p>ちょいと埋め込みタグが長くなるところが玉に瑕だけれども、Twitterでの気になる会話を手軽に共有できるというこのサービス。</p><p>仮想的に会話を成り立たせて共有してしまうなんていうことも出来てしまいそうなところもおもしろそうです。</p><!--more--><h3 class="header-label">Twitterの会話を引用してサイト上で共有できる「QuoteURL」</h3><p>「<a class="website-link" href="http://www.quoteurl.com/" onclick="window.open('http://www.quoteurl.com/'); return false;">QuoteURL</a>」は、Twitterの発言ステータスURLをまとめて、会話をHTMLで埋め込めるサービス。引用タグも自動で入ります。</p><h4 class="header-label">「QuoteURL」の特徴</h4><ul><li>ステータスURLまたはID（10桁程度の数字）を登録して、埋め込みタグを生成</li><li>発言４個の登録まではログイン不要</li><li>Googleアカウントでログインすると10個まで登録OK</li></ul><h4 class="header-label">会話埋め込みサンプル</h4><blockquote class="quoteurl-block" style="margin:0;padding:0;"> <ol class="quoteurl-quote" style="background-color:#fff;color:#000;padding:.4em;border:1px solid #888;-moz-border-radius: .5em;border-radius: .5em;width:90%;max-width:700px;margin:auto;"> <li class="hentry status u-google_trends" style="clear:both;list-style:none;padding-top:.7em;padding-bottom:.7em;border-top:1px dashed #ccc;position:relative;background-color:#fff;"> <div class="thumb vcard author" style="float:left;margin-right:1em;margin-left:.5em;"> <a class="url" href="http://twitter.com/google_trends"></a> </div> <div class="status-body" style="margin-right:30px;padding-right:1em;"> <a class="author" style="font-weight:bold;" title="google_trends" href="http://twitter.com/google_trends">google_trends</a> <span class="entry-content" style="font-style:normal"><a href="http://tinyurl.com/593y47" rel="nofollow">http://tinyurl.com/593y47</a> 恋人からの手紙, 女試し, アルジャーノンに花束を, デリバティブ, 砂町銀座, ＷＢＣ, 野球, 昌平高校, 神田司, 川島海荷</span> <span class="meta entry-meta" style="color:#888;font-family:georgia;font-size:0.8em;font-style:italic;"> <a rel="bookmark" class="entry-date" style="color:#888;text-decoration:none;" href="http://twitter.com/google_trends/status/1347678120" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';"> <span title="2009-03-18 11:00:01" class="published">18 Mar 2009</span> </a> <span>from web</span> </span> </div> <div class="actions" style="position:relative;clear:both;"></div> </li> <li class="hentry status u-qhatena" style="clear:both;list-style:none;padding-top:.7em;padding-bottom:.7em;border-top:1px dashed #ccc;position:relative;background-color:#fff;"> <div class="thumb vcard author" style="float:left;margin-right:1em;margin-left:.5em;"> <a class="url" href="http://twitter.com/qhatena"><img width="48" height="48" style="border:none;" src="http://s3.amazonaws.com/twitter_production/profile_images/53909889/qhatena_logo_normal.png" class="photo fn" alt="人力検索はてな (非公式版)"/></a> </div> <div class="status-body" style="margin-right:30px;padding-right:1em;"> <a class="author" style="font-weight:bold;" title="人力検索はてな (非公式版)" href="http://twitter.com/qhatena">qhatena</a> <span class="entry-content" style="font-style:normal">ウェブ制作するときに、リンク先や画像、データのパスを設定すると思うのですが、「絶対パス」と「相対パス」の使い分けの説明が難しく、自分は理解しているのですが人にうまく伝えられません。他ににたような質問があり、いろいろ拝見しまし.. <a href="http://tinyurl.com/c3owzy" rel="nofollow">http://tinyurl.com/c3owzy</a></span> <span class="meta entry-meta" style="color:#888;font-family:georgia;font-size:0.8em;font-style:italic;"> <a rel="bookmark" class="entry-date" style="color:#888;text-decoration:none;" href="http://twitter.com/qhatena/status/1347767062" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';"> <span title="2009-03-18 11:32:15" class="published">18 Mar 2009</span> </a> <span>from <a href="http://twitterfeed.com">twitterfeed</a></span> </span> </div> <div class="actions" style="position:relative;clear:both;"></div> </li> </ol> </blockquote><small class="quoteurl-cite" style="float:right;"> -- <a href="http://www.quoteurl.com/o20hx">this quote</a> was brought to you by <a href="http://www.quoteurl.com">quoteurl</a></small> <br class="quoteurl-end" style="clear:both;"ck" /><p>↑タグは結構長くなりますが、見た目はそれなりに綺麗にまとまります。</p><h4 class="header-label">会話埋め込み手順</h4><ol class="steps"><li><h4>URLかIDで登録</h4><p><a href="http://lh3.ggpht.com/_fRSz8mJZTZY/ScDudfYxncI/AAAAAAAAUjs/dAlwmTwQEnk/s800/quoteurl-1.jpg"><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/ScDudfYxncI/AAAAAAAAUjs/dAlwmTwQEnk/s400/quoteurl-1.jpg" alt="" /></a><br />↑一例ですが、サイドバーに表示したTwitterのタイムラインからID、またはステータスURLをコピーして<a class="website-link" href="http://www.quoteurl.com/" onclick="window.open('http://www.quoteurl.com/'); return false;">QuoteURL</a>へ貼り付けます。</p></li><li><h4>会話を保存</h4><p><a href="http://lh3.ggpht.com/_fRSz8mJZTZY/ScDudy3P-8I/AAAAAAAAUj0/IgS6ekrljhw/s800/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090318%20214940.jpg"><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/ScDudy3P-8I/AAAAAAAAUj0/IgS6ekrljhw/s400/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090318%20214940.jpg" alt="" /></a><br />↑複数の発言を登録して「Save」ボタンを押します。</p></li><li><h4>埋め込みタグの取得</h4><p><a href="http://lh4.ggpht.com/_fRSz8mJZTZY/ScDueNmfytI/AAAAAAAAUj8/GhugQtwb9I0/s800/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090318%20215018.jpg"><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/ScDueNmfytI/AAAAAAAAUj8/GhugQtwb9I0/s400/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090318%20215018.jpg" alt="" /></a><br />↑リンクと埋め込みタグが生成されます。</p></li></ol><p>早速試してみたい方は<a class="website-link" href="http://www.quoteurl.com/" onclick="window.open('http://www.quoteurl.com/'); return false;">QuoteURL</a>へどうぞ。</p><p>Twitter上での会話にも、参考になる意見や情報はたくさんありますよね。</p><p>その中で、共有したい会話を手軽に引用することが出来るのは、いろいろとおもしろいことには繋がりそう。「引用がほとんど」というのはいろいろ問題なので注意してください。</p>