Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You may remember from an earlier movie, I showed you how you can add a Twitter button or badge to your web site or to your blog, which we did here for the Bliss No.5 blog. If you click on this button, then you are immediately brought to Bliss No.5's Twitter page, which is kind of cool. You know the problem is that a lot of people won't click on the button, and you want to promote what it is that you're treating about. You want to show not just a button saying that you are on Twitter, but it would be cool if you could actually show some of your tweets on your web site or on your blog.
And believe it or not, it is almost as simple as just adding a button. Let me show you how to do that. What you want to do is go to the Twitter Resources page, and this is a really good page to bookmark because you're going to be coming back here a lot. This time what we're going to do is add a widget, "Put your updates anywhere or create a live stream." So let's see all widgets. It wants to know, do you want to put a widget on your web site or on Facebook? We'll talk about Facebook later, but right now we want to add this kind of thing to our web site. So we'll click Website. You have your choice of what kind do you want to show. Do you want to show your recent Twitter updates? You can add in a search phrase and have the results of that search phrase appear.
You can add your hash tag for your conference and have that constantly appearing on your blog or web site during the conference. That would be kind of neat. You can show your favorite tweets, which is an aspect of Twitter I didn't talk about, but they covered in the Twitter Essential course. Same thing for lists. I didn't really talk about lists, but that is covered in the Twitter Essentials course. Essentially, it lets you filter down to a list of your favorite people on Twitter and what they're talking about. But typically, when people say, "I want to show my tweets on my web site," they're talking about the first one, the Profile Widget.
So click that, and then you just go through this neat little wizard, all right? It's saying this is the blissno5 user account. If you want to make a profile widget for one of your clients, you would add their name in here, and then it shows you what this would look like right now if you just went ahead and said Finish & Grab Code. But you can go through and change some of these preferences. Should it include a scrollbar so people can see earlier tweets? And you can say Yes or No. How often should it update? How many tweets should it show? Should it include avatars, meaning people's little pictures? Remember, if people use the new-style version of retweeting, then their pictures appear in front, so it might not just be your pictures that appear in front of every tweet, but also people who have been retweeted.
Do you want to show the timestamps? Maybe you don't want people to know exactly when you are tweeting. Maybe you didn't tweet since last month, and you really don't care to show the timestamps. And do you want to include hash tags or not? I talked about hash tags in a different video. I am just going to leave all this at the default for now. In Appearance, you can change the colors, right. So, it's really simple to do. What is the color of the background and the Twitter background? So, the top part is the shell background and the Twitter background is this darker brown. You can get it to match your web site if you want.
Actually our Bliss No.5 web site does have this brown theme kind of going on, so I am going to leave that there. But I don't like this green color, so I think I'll change the color of the links from green to--I don't know. Let's try yellow. It looks a little better. I am not quite sure--it is a little too green. Let's get it further down. There we go. I like that one. Done. And then shell text and tweet text, so the shell text is the text in here, and the tweet text is the color of the actual tweets, so that's fine to leave them both white.
Then under Dimensions you can have it match your space allotted as much as possible. Or if you're not quite sure how this works, you can choose auto width, which is what I am going to do right now. And then you can say Finish & Grab the Code. So when you're done, it brings up this window. Select all the code in here and copy it. If you're really handy with the web site, you could paste this into Dreamweaver or something and tweak it further if you wanted to. But because we're using a very spiffy WordPress blog, we can just paste it into a box. So here is our web site, right, and I've already logged into the dashboard.
I'm going to go to the Design section and find my widgets, which let me just add code to the left or right sidebar. Remember, the very first one has the code for the Follows Us on Twitter. The second one is empty, and I am just going to click right inside here. The first one is for Headline; we don't care about that. Click inside here and choose Paste, Change, and Save Changes. Okay, our changes were saved. Let's actually visit the site and see what it looks like. Ta-da! That looks pretty good.
So simple to add your Twitter feed. And as I update my Twitter feed in my Twitter client, or on twitter.com, this web page will be updated as well, so it's a really neat way to have constantly updated information on your blog or on a static web site. Easy to do.
Get unlimited access to all courses for just $25/month.Become a member
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.
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.