Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.
Hello! This is Ray Villalobos and welcome to View Source. In this episode I'm going to show you how to place custom Twitter feeds on any web site. So stop flooding the Twitterverse, because it's time to View Source. Twitter is an amazing network that lets people communicate with each other in 140 words or less, although it's often misunderstood, and people do tweet about seemingly meaningless things. One way I like to use Twitter is to generate feeds of information about a specific topic. There's a lot of ways that you can include Twitter on your sites, including several WordPress plug-ins and hacks, but my favorite way is to use Twitter's own widgets.
So you can find Twitter Widgets at this URL, and you can see that you can create different types of widgets based on profiles, different searches, favorites that you start within your own Twitter feed, or list widgets. You can create a profile widget if you want to create a widget following a specific person. So you simply put the name of the person, or the name of the Twitter person that you want to create a widget for, and then you have a lot of options about the appearance, so which colors, which backgrounds. And the dimensions that you want to use here; I prefer to use auto width right here to just make the width of the element be whatever width I want, and you could include other things here like the scrollbar or other behaviors.
So once you're done customizing, and that is a pretty ugly customization, let me see if I could do a little better, then you can click on Finish & Grab Code, and it will spit out a bunch of code that you can place on your web site. So let's go back and show you a couple of the other options, because some of these are pretty cool. You could do a search for a specific topic, so if you want to find out about, say Star Trek and how that topic is trending. We'll click on Test settings, and you could see that immediately you'll get a widget that auto-updates with the latest news about the topic that you want to follow.
So in addition to that, you can create a widget only of items that you favored it. So you could have a list on your web site of your favorite tweets, or things that are important to you. So that's a good way of moderating what information appears on the list that you have on your site. The last one is also really interesting. You can create a widget where the information comes from a list that you have created. In your Twitter page you can create different lists with groups of people, and those groups will be aggregated into the custom list widget that you place in here.
So you can either use your own lists or find other lists from other people. So you could very easily, say on an entertainment web site, just add a bunch of celebrities that you are following and have a Twitter feed only of the celebrities, or have Twitter feeds about a specific movie or specific group of actors or anything you want. You can create your own list or you can follow lists that already exist. So let me go back and create just a regular profile widget. We will go back into My Website here, click on Profile Widget. I'm going to follow myself and under Appearance, this looks fine.
I'm going to be customizing it outside of Twitter. Anyways, make sure that I click on auto width for dimensions. I think that's pretty important, and then I am going to say Finish & Grab Code. So once I get the code, I'm going to copy that, and now I'm going to go into my web page, and here I've already pasted that widget and there's a few things that I've changed that are really, really important. For example, as you saw I picked already the automatic width. I am going to open up a preview so we can see how this works. Here's the feed of the content that I have typed in recently, and you could see that there is a couple things that I've done here that Twitter doesn't do.
If I pasted the normal version of the widget that I just grabbed, you'll notice that by default we have this ugly background color. Now one of the things that I could do is set the background to be none, which is not available as one of the pop-ups on the widget creator, but it's something that you could do to give yourself a nice clear background. Same thing, we can create a background for the theme itself of nothing. That way it's clear. You can also create a background for your tweets, different colors for your links as well.
This is a little bit more customizable when you play around with the elements in your code right here. See if you wanted to change to a different user then all you would have to do is type in the username here, and this code automatically updates itself. Now one of the things that I don't like, and that I have done here, is I don't really like to see that Twitter header at the top or the bottom of the screen. So I can easily take those out by just adding a couple of styles into a stylesheet that I have created here asking the footer and the header not to display. Now how would I know what the class for these things are? If I pull this index.html file in a copy of something like Safari or Chrome, I can see this come up, and one of the things that I can do in these browsers is take a look at the code.
So you could see here's the part where the header sits, so I know that I can hide that if I just target that class right there, and I can open that up and even target specific things within there to hide or show different elements. So if I open up the footer, same thing. I can see there's a div right there, there is a span, there is a link, so I can hide any of these items or control how they look by just adding style that target these classes. In the same way, I can open up this section which contains my main timeline, and style any elements within my main timeline.
So see you next week, and remember that if you love to save the whales, but are terrified of the Fail Whale, then don't forget to View Source.
There are currently no FAQs about View Source.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.