<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A Real American Hero &#187; Uncategorized</title>
	<atom:link href="http://www.erikjacobs.com/category/uncategorized/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.erikjacobs.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Wed, 02 Nov 2011 18:27:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Twitter integration and parsing links with Ruby on Rails</title>
		<link>http://www.erikjacobs.com/2009/10/29/twitter-integration-and-parsing-links-with-ruby-on-rails/</link>
		<comments>http://www.erikjacobs.com/2009/10/29/twitter-integration-and-parsing-links-with-ruby-on-rails/#comments</comments>
		<pubDate>Thu, 29 Oct 2009 22:28:04 +0000</pubDate>
		<dc:creator>Erik Jacobs</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.erikjacobs.com/?p=107</guid>
		<description><![CDATA[A while back, we had an issue with Twitter integration that messed up the homepage. I got some time today to fix things, so I figured I would write a little bit about how RidingResource has integrated Twitter into our homepage and about how parsing links works in Ruby on Rails.]]></description>
			<content:encoded><![CDATA[<p>As per usual, it&#8217;s been a while since I&#8217;ve written anything about <a title="Ruby on Rails" href="http://www.rubyonrails.org" target="_blank">Ruby on Rails</a> or <a title="Riding Resource - A Stable Place to Search" href="http://www.ridingresource.com" target="_blank">RidingResource</a>. A while back, we had an issue with <a title="Twitter" href="http://www.twitter.com" target="_blank">Twitter</a> integration that messed up the homepage. I got some time today to fix things, so I figured I would write a little bit about how RidingResource has integrated Twitter into our homepage and about how parsing links works in Ruby on Rails.</p>
<p>When we were first building RidingResource, we decided it might be cool to have the last few tweets from our RidingResource Twitter account displayed on the home page.  It took me a minute, but, like with most things you want to do with Ruby on Rails, there&#8217;s a <a title="The RubyGems packaging system" href="http://docs.rubygems.org/" target="_blank">gem</a>/plugin for that.  The one we chose happens to be <a title="Dancroak's Twitter Search Gem" href="http://github.com/dancroak/twitter-search" target="_blank">Dancroak&#8217;s Twitter Search</a>.  The neat thing about this gem is that it allows you to grab things off Twitter very easily, and then use them however you like.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> home
  <span style="color:#008000; font-style:italic;">## set up twitter client</span>
  <span style="color:#0066ff; font-weight:bold;">@client</span> = <span style="color:#6666ff; font-weight:bold;">TwitterSearch::Client</span>.<span style="color:#9900CC;">new</span> <span style="color:#996600;">'equine'</span>
&nbsp;
  <span style="color:#008000; font-style:italic;">## pull in last 3 tweets</span>
  <span style="color:#0066ff; font-weight:bold;">@tweets</span> = <span style="color:#0066ff; font-weight:bold;">@client</span>.<span style="color:#9900CC;">query</span> <span style="color:#ff3333; font-weight:bold;">:q</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'from:ridingresource'</span>, <span style="color:#ff3333; font-weight:bold;">:rpp</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006666;">3</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Well, this is all well and good, but one thing I quickly realized when we initially did this is that when we posted a link in a tweet, it is parsed fine if you look at it on Twitter&#8217;s website or through other clients, but we were basically just regurgitating the text of the tweet with no markup. When I went to reinstate the Twitter feed on the homepage today, I started looking into ways to parse URLs with <a title="The Ruby Programming Language" href="http://www.ruby-lang.org/en/" target="_blank">Ruby</a> (on Rails) that were already in strings and to display them with the proper hypertext markup. What I found were some neat snippets on <a title="Snippets - A public source code repository" href="http://snippets.dzone.com/" target="_blank">DZone</a> that did just that.</p>
<p>After some careful Googling and search-term hackery, I stumbled upon this DZone snippet that discusses how to <a title="Convert URLs to Hyperlinks" href="http://snippets.dzone.com/posts/show/7456" target="_blank">convert URLs into hyperlinks</a>. This snippet written by <a title="James Robertson" href="http://www.r0bertson.co.uk/" target="_blank">James Robertson</a> makes use of a gem, <a title="Alex Rabarts TLD" href="http://github.com/alexrabarts/tld/" target="_blank">alexrabarts-tld</a>, which does some checking to see if items are actually a real domain TLD. As James found, like with many things Ruby, you can pass the items that come out of a gsub <a title="Regular Expressions" href="http://en.wikipedia.org/wiki/Regular_expression" target="_blank">regexp</a> into a block, which enables us to replace the URL in the string with the hypertext for the URL.</p>
<p>Because we were going to use this substitution on every single tweet to check if there were any URLs,  I created a nifty little helper function to do just that.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> hyperlink_parser<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0066; font-weight:bold;">string</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#0000FF; font-weight:bold;">return</span> <span style="color:#CC0066; font-weight:bold;">string</span>.<span style="color:#CC0066; font-weight:bold;">gsub</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#40;</span>\w<span style="color:#006600; font-weight:bold;">+</span>\.<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006666;">1</span>,<span style="color:#006666;">3</span><span style="color:#006600; font-weight:bold;">&#125;</span>\w<span style="color:#006600; font-weight:bold;">+</span>\<span style="color:#006600; font-weight:bold;">/</span>\w<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#91;</span>^\s<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">|</span>x<span style="color:#006600; font-weight:bold;">|</span> is_tld?<span style="color:#006600; font-weight:bold;">&#40;</span>x<span style="color:#006600; font-weight:bold;">&#41;</span> ? <span style="color:#996600;">&quot;&lt;a href='#{x}' class='#{link_class}'&gt;#{x}&lt;/a&gt;&quot;</span> : x<span style="color:#006600; font-weight:bold;">&#125;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>One thing I noticed was that if URLs were in the text that had http:// in them, we would match the rest of the URL, hyperlink the FQDN and other parts of the link, but ignore the http://. It looked really funny to have a link that looked like http://<a title="Erik Jacobs - A Real American Hero" href="http://www.erikjacobs.com">www.erikjacobs.com</a> I realized that this was just a &#8220;problem&#8221; with the original RegExp that Jason had created, so I started to do some sleuthing.</p>
<p>The first thing I did was try to find a RegExp tester. While there are many out there, the one I ended up using was <a title="Rubular - a Ruby regular expression editor" href="http://rubular.com/" target="_blank">Rubular</a> (conveniently uses Ruby &#8211; look at that!), which displays the results of our RegExp search against the text in real time. Some careful googling of selected RegExp and URL terms resulted in yet another snippet from DZone, by Rafael Trindade. Getting closer!</p>
<p>Lastly, since this function might just possibly be used elsewhere, and since I wanted to apply a style at least to the links generated by its use here, I decided to add another argument to the helper method for the link class. The result is the following helper:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> hyperlink_parser<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0066; font-weight:bold;">string</span>, link_class=<span style="color:#996600;">&quot;&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#0000FF; font-weight:bold;">return</span> <span style="color:#CC0066; font-weight:bold;">string</span>.<span style="color:#CC0066; font-weight:bold;">gsub</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#40;</span>ftp<span style="color:#006600; font-weight:bold;">|</span>http<span style="color:#006600; font-weight:bold;">|</span>https<span style="color:#006600; font-weight:bold;">&#41;</span>:\<span style="color:#006600; font-weight:bold;">/</span>\<span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#40;</span>\w<span style="color:#006600; font-weight:bold;">+</span>:<span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006666;">0</span>,<span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">&#125;</span>\w<span style="color:#006600; font-weight:bold;">*</span>@<span style="color:#006600; font-weight:bold;">&#41;</span>?<span style="color:#006600; font-weight:bold;">&#40;</span>\S<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#40;</span>:<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">9</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>?<span style="color:#006600; font-weight:bold;">&#40;</span>\<span style="color:#006600; font-weight:bold;">/|</span>\<span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#91;</span>\w<span style="color:#008000; font-style:italic;">#!:.?+=&amp;%@!\-\/]))?/) {|x| is_tld?(x) ? &quot;&lt;a href='#{x}' class='#{link_class}'&gt;#{x}&lt;/a&gt;&quot; : x}</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>The view essentially just iterates over the tweets that came back from the search, rendering a partial:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">for</span> tweet <span style="color:#9966CC; font-weight:bold;">in</span> <span style="color:#0066ff; font-weight:bold;">@tweets</span> <span style="color:#006600; font-weight:bold;">-%&gt;</span>
  <span style="color:#006600; font-weight:bold;">&lt;%</span>= render <span style="color:#ff3333; font-weight:bold;">:partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;tweet&quot;</span>, <span style="color:#ff3333; font-weight:bold;">:object</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> tweet <span style="color:#006600; font-weight:bold;">%&gt;</span>
<span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">end</span> <span style="color:#006600; font-weight:bold;">-%&gt;</span></pre></div></div>

<p>And inside the partial we do a few things with the tweet, including linking to the original tweet on Twitter&#8217;s site, showing the date, and parsing the text for the URL and returning it:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">&lt;li&gt;&lt;p&gt;&lt;a href=&quot;http://www.twitter.com/RidingResource/status/<span style="color:#006600; font-weight:bold;">&lt;%</span>= tweet.<span style="color:#9900CC;">id</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&quot; target=&quot;_blank&quot;&gt;<span style="color:#006600; font-weight:bold;">&lt;%</span>= tweet.<span style="color:#9900CC;">created_at</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">5</span>,<span style="color:#006666;">11</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&lt;/a&gt; <span style="color:#006600; font-weight:bold;">&lt;%</span>= hyperlink_parser<span style="color:#006600; font-weight:bold;">&#40;</span>tweet.<span style="color:#9900CC;">text</span>, <span style="color:#996600;">&quot;tweet&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&lt;/p&gt;&lt;/li&gt;</pre></div></div>

<p>Hopefully some of you will find this useful in your quest to either integrate Twitter into your Ruby on Rails&#8217; projects, or to perhaps parse some things that live inside strings into markup. There is almost surely something that already does this, so I probably re-invented the wheel, but it didn&#8217;t take long and it seems to work.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.erikjacobs.com/2009/10/29/twitter-integration-and-parsing-links-with-ruby-on-rails/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

