- Read Tutorial
- Watch Guide Video
As I mentioned at the end of the previous guide right now I like what we have but it's still not quite what I'm really looking for. One because it doesn't look very nice, it's very hard to read but also I don't like the fact that a user who may come to the site will have to copy and paste the link and put it in the browser is definitely not what I'm looking for.
Let me switch to the code. One small change I made in between the previous guide and I change the client.search to rails just so we could get a few more results. I think when I actually deploy this I'll probably change it back to Ruby on Rails to make it even more specific. But I have found that Rails just #Rails gets more posts and so I think they'll make us have some more dynamic content while we're testing. So on this page this is our tech news template. Right now we're just calling tweet which is fine it shows the content but what we really want is to call tweet and to have our tweet parsed. Now if your first thought is that that is what a helper is there for you would be 100% right. So what we are going to do is we're going to create a parser that can take this tweet and it can convert it into something that we can actually use. So I'm going to switch to chrome and let's find something that has a link.
This first one would be perfect. We don't have to worry about the emoji's those show up automatically which is kind of cool. That these show up without us having to do anything. But I'm going to now come into app, helpers and let's open up the pages_helper and one thing that you may notice up until this point we've been adding all of our helper methods to the application helper that is only because these helpers are specifically focused on different view elements that need to be able to be accessed from the entire site. The pages helper can be more specific.
So here I'm going to create a method and this is going to be called twitter_parser and it's going to take in a tweet as an argument. And I'm also just for the sake of testing I'm going to set the tweet equal to one of the tweets just so that we can have something to work with as we're building out our script. Now that we have that the next thing that we need is we need to decide is, how can we accomplish this feature? So in thinking this through, say that you're working on a client project and they say OK we want to have tweets pulled from Twitter and we want to make it so the tweet links are clickable. That if you don't know where to start, the first thing that I would do is look at the content that's coming in. So look at the input value and then say OK what could I do with this in order to make this clickable?
Well, if I had a string like this and I knew I was going to be working with strings exactly like this, because that's what we are doing, I would say let's say that I just was going to hardcode this in with HTML. If I was going to do that all I'd have to do is create an tag followed by an href and then inside of this href I would put the link and then I would grab it and end that tag and do it just like this.
And if this gets rendered then this is now going to be a clickable link. That would be the first thing that I would do.
Now, what process can we put into place that will allow us to do this? Well, first we need to be able to have something that can recognize this value. For example we don't want to turn you where it says "UFO The Writer" I don't want to turn that into a link. I only want to turn this specific link. So the best way when you need to find something in a string like this the best way to do it is by using regular expressions. So I would search the web for some type of regular expression that can match a URL. Now there is a very specific little trick to this that you may not think about and the only reason I do is because I've run into this problem in the past where especially with parsing Twitter data a lot of people in their tweets are they and their URL's by putting a dot like the end of a sentence.
But you might find out something a little bit tricky. If you simply pull in some regular expression that matches a URL it is not going to think that the DOT is separate. And so you're going to end up with a bunch of bad links just like this even if they're coming from real links that should be considered real. So that is something to kind of keep in mind.
So we first and I'm going to actually keep this in here to make sure that this works. So I have a regular expression that I have used through the years. I am just going to copy it in and then you can use it in your source code. Do not feel like you have to type this all in. This is a crazy long regular expression even by the standards of regular expressions this is a long one.
regex = %r{
\b
(
(?: [a-z][\w-]+:
(?: /{1,3} | [a-z0-9%] ) |
www\d{0,3}[.] |
[a-z0-9.\-]+[.][a-z]{2,4}/
)
(?:
[^\s()<>]+ | \(([^\s()<>]+|(\([^\s()<>]+\)))*\)
)+
(?:
\(([^\s()<>]+|(\([^\s()<>]+\)))*\) |
[^\s`!()\[\]{};:'".,<>?«»“”‘’]
)
)
}ix
And so what this is going to do is it has created a regular expression right here and this is going to go and find every little thing that would match the pattern for a URL. But one very nice thing is it is going to exclude any ending period. So this is going to look for periods and commas at the end and say OK we're going to ignore you and we're simply going to use this as a URL. So it's kind of important but don't worry about it in terms of having to write your own feel free to use the show notes. Grab this regular expression and use it on your own side. So now that we have that we have a way of being able to match these up. Now let's talk about what we need to do next.
Well, we have this string, we need to be able to perform a substitution. We need to find every pattern in the URL that has the regular expression matcher which means that every time we see something that matches a URL and then we have to convert it into something like this. So essentially we have to decorate it and say we want to put the URL inside of these special little slots in order to generate the tag.
Well thankfully there is a very cool little method that allows us to do this in Ruby and it's called the gsub method which stands for Global substitution. It can take in a regular expression as an argument. So we don't have to hard code and say every URL that's exactly the t.co/NdSA. I mean that wouldn't be very good or powerful regular expression matcher. This can just take in the pattern and then gsub it has a few options you could just have the entire string replaced with something here that wouldn't be very practical thankfully. Gsub can take a block.
What that means is that we can open up a block here, and every time that it finds this method. I should say every time it finds this pattern we can substitute whatever goes in this block for that pattern. So, in other words, we can take a string that looks like this and turn it into something that looks like this and just slide this in.
So how do we do that? Well, all we have to do is create a string, make sure you use double quotations because we are going to use string interpellation here and I'm going to actually just copy the tag slide it right inside. But instead of having these values I'm going to have some dynamic ones so using string interpolation I can say URL, I also want this to open up in a new tab so I'm going to say Target equals single quotes blank.
Then let's grab the URL because we still want it to show up and to be printed exactly like before. So what this is going to do if everything works right is it's going to take this string. It's going to find all of the URL's in it. And then it's going to substitute it for these.
Let's actually come into the terminal clear it out, and let's open up a Rails console session because this is going to give us a good practice run for if this is going to work or not. So first let's take our tweet and create that variable. So we have a tweet with this value. Next, let's take this crazy long regular expression. Come here. Paste it in. And now we have that regular expression you can type regex just so you can see that that works. And now let's try out our script. Now one thing I'm going to do just to make it easier to see. I'm going to take this block syntax and anytime that you have a block like this you can convert it into a single line of code.
Now I'm not going to do this for the regular code because I like having methods and blocks that are nice and concise and they don't go too far but for the rails console I can do this and do it on one line just to make it a little easier to read. Paste this in and it looks like that worked.
Copy this just so we can confirm it replace it. And we have a new string and you can see that it slid that URL right here right inside of it. One little thing I think that we need to surround this with single quotes just so it is HTML compliant. Everything else though looks perfect. Notice also how it took the dot in it and removed it and it is no longer in the string. So that is good. And let's come to the console and let's start up the server. Now we also need to get rid of our tweet, we are overwriting the tweet value right here we don't need to do that. Our tweets are going to be dynamic. And now with our Twitter parser, we can come in the front here abd just call Twitter parser send in a tweet. And this should work. So let's see. Looks like the servers started up and now if I hit refresh. It is going to go. Contact Twitter and let's see if this worked ok.
Looks like we are not quite there and it's because, if you take a look at what we're doing this worked in the sense that it generated a link but I would definitely recommend pausing the video right now and thinking what exactly did I do wrong to make this print out the entire thing? Then come back and see because I know exactly what I did. You come to the pages helper at the very end of this tweet call. I just need to say to html_safe and this is the same if this were all on one line.
You can call DOT method you know any type of method. Even right at the end of this end call and this is going to work the same as if you had some type of block that was in curly braces and you called html_safe on it like that. This is perfectly valid syntax. So coming back let's hit refresh one more time.
See if this fixes it. And now let's take a look, and look at that! It looks like it's working. And we're even getting cool Ruby links all coming in.
So you can click on this one to make sure you have another one. And we do.
This is looking fantastic it's even printing out emojis and doing all of that kind of cool stuff for us so this is perfectly functional. Still very ugly. So in the next guide that's what we'll cover we'll start to style this.
say git status to see everything we changed. We updated the social tool. Let me see where we update that. Just taking a look at that, oh yeah it is when I changed it to Rails. And in fact, let me change this to Ruby on Rails because I didn't commit that change. OK so now if I do git status it even removed that. So we don't even have that change which is what I wanted to get. And before I push it up that is one little note you may notice how I type git status a lot and it's because of reasons like that. I like to do a quick review of all the changes that are made because there are times where I'll make some very small test changes just for the sake of making it easier to test locally and get status is a reminder that oh hey I actually wanted to go change that. That was only temporary. Just like what I did right there. So that is just something to keep in mind.
OK git commit. This is going to be Built Twitter parser for tweet links. Git push origin lib.
Now all of this is up there and in the next guide we'll walk through how we can style all of these properly.