Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

009 Adding custom Twitter searches and feeds to your sites

From: View Source

Video: 009 Adding custom Twitter searches and feeds to your sites

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.

009 Adding custom Twitter searches and feeds to your sites

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.

If I View Source, unfortunately, we are only going to see the JavaScript. We're not going to see the content that has been generated dynamically by JavaScript. So that's not a good way to look at the code. What we need to do is close that. You want to make sure that you have this Developer Tool on your browser. It's available in Google Chrome or Safari. In Safari, we want to go to the Preferences menu and click on Advanced. Make sure I have this Show Develop menu in menu bar, and it will add that as an option on your menu bar.

If I don't have that on, then it doesn't show. If I click right there, it's going to show that. So now I am going to close that and from the Develop menu I am going to say Select Web Inspector. So in the Web Inspector I can see dynamically generated content. So not just the JavaScript that's being used to generate this content, but the actual content itself. So here you could see that the entire element that gets loaded from Twitter has a class of Twitter Widget, and I can target any of these things to further customize my CSS. So I can open that up and keep opening these up.

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.

Here's my specific tweets and I can see that even the tweets themselves have classes for different parts. So everything is highly customizable if you know how to get this information. You can't do it just by viewing source; you have to open up one of the Developer panels so that you can find out which classes and which IDs you can target with CSS. Once you understand that, then you can paste that anywhere on your site and have the best Twitter feed that is based either on a specific person, a search result, or a list that you create or that has been created by somebody else, and I've never seen any WordPress plug-in or any other widget, or any kind of JavaScript or PHP code that does a better job than Twitter's own widgets.

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.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15872 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.