Click HERE to listen to the original podcast.
Everyone, welcome to So Totally Business Savvy, Prosulum.com, and my name is Dean Soto. This one is going to be a little bit different. If you can tell, this is a video podcast and what we’re going to be doing is we’re going to actually do a little bit of WordPress. A friend of mine needed something done on his WordPress website and so I thought I’d take you through it.
Now, you’re probably asking me why are we doing WordPress? Why are we doing any type of Web design? Aren’t you a business site? Aren’t you all about business and technology consulting and so on? Well, my friends, yes, that is absolutely true, but I am a huge advocate of WordPress because one, it’s free; two, it is extremely powerful; and three, it’s free or rather, it’s really inexpensive. The actual WordPress is free you have to pay for hosting and your domain name and so on, but even that is extremely inexpensive and it is a powerful tool to get your name out there, to market yourself, and to really just get them out into the community in a way that you can’t otherwise.
So, yes! This is about business and this going to be really kind of like a snippet of an audio/video product I’m putting out in the near future that will take you step by step from the very beginning of building a WordPress website, a full-fledged business, personal, or personal-branding website, or professional website and so on, all the way from beginning to end without knowing any code whatsoever. Of course, if you really needed anything to be changed, you don’t even need to know any code for that and how to outsource things on your site so you can make it look better as well. But we’re going to do all of this without code.
So Ted, my PR guru friend, needs a social networking icon area right over here. And yeah, that’s going to be…You know, it seems like to be kind of hard to put in there, you know, “Oh, I might need to know how to do a little bit of CSS or HTML or whatever.” Absolutely not, you don’t need any of that in order to do this. So I’m going to go through this real quickly on how you can add just a nice little area with social networking icons.
So, in your WordPress backend, if you don’t know WordPress, this is just good little tutorial one on how powerful it is, really. So, you are going to need to add some new media, some new files. I’ve already gotten all of these. This was from Sixrevisions site and it’s a free icon set, bottle set, pretty neat, very neat. And the designer who designed this is really, really good. But that’s where you can get it if you want them for free.
So I already got them from Ted. He really liked them and here they are. All you would do is you would click on one, you “CTRL A” and then “Open,” and that will upload all of those to your site. Now I have already uploaded them so I’m not going to upload them again but you would see them consistently populating in your media library.
Now, if you’re a Web designer you’re probably going to say, “Why are you doing this? That’s really bad, blah, blah, blah,” that’s for people who are Web designers. Basically, when you’re uploading this, it takes it to a URL that’s not necessarily the prettiest but it doesn’t matter. So we’re going to do it anyway. There’s no real con to doing it other than it’s not what a Web designer might want to do.
But okay, so now that we have all our media uploaded, we are going to actually add a new post because we don’t want to do any HTML at all. We don’t need it. What we’re going to do is we’re going to click on this little square right here; it’s called “Add an Image.” And when we click on that, all we’re going to do is we’re going to go to right here, it says “Media Library.” Now we have all of our stuff already uploaded just the way that we had set up before. And if you click on the “Show” button, you are going to see…I’ve already modified this, changed the title to Ted’s Twitter Bottle Cap, and alternate text to Ted’s Twitter Bottle Cap. You can change that to anything you want. The purpose of the alternate text is, if the image doesn’t show up for some strange reason, it will actually read Ted’s Twitter Bottle Cap so people will know what it is.
Another reason is it’s very good for search engine optimization. If you want Google to be able to find this image, you might want to make it very descriptive with maybe some keywords. So in Google images, when people are searching for something, they might land on your site. Alright, so you’ll notice down here where it says “Link URL,” that’s where the actual URL for this bottle cap but we don’t want that. We want to change this into another URL; so this is his Twitter account so let’s change it to his Twitter account www.twitter.com/tednguyen… I think it’s just tednguyen. Yup, okay. Here, it’s just tednguyen, not tednguyenusa. So, twitter.com/tednguyen.
Now, so when someone actually clicks on this, it will go there, that’s where it’s going to head to. Now, let’s go ahead and do that and we’re going to “Insert into Post.” Now you’ll notice I wanted to have the non-HTML thing up there, but you notice that on the HTML tab, it actually did all the coding for us; and if we go back to this visual tab, it very clearly shows our bottle cap. Now, what I want to do is I want to make that nice and small because it’s going to go in a very small and cramped area. And if you go back to the HTML, you’ll notice that the sizes changed. And so here, the width is 80 and the height is 80. Very cool!
So our size changed; what we’re going to do is really actually take that right there, take all that code. We don’t need to know the code or how to make it. That’s what the whole goal of this is. This is on the side bar over here, this is what’s called a “widgetized” area and anyone who knows WordPress knows what a widgetized area is, but basically, each of this are widgets that you can drop or drag and move all around, and you can find those over here in “Appearance” and then “Widgets.”
So we’re going to do the widgets over there and it’s going to be over here. Let me take this out because this is something I did before. If you go over here to his primary widget area, primary side bar, that’s the big side bar, then you have two small sidebars right underneath that. We’re going to just take a text file here, our text widget and we’ll call it ”Get Social with Me!” We’re just going to pop that little thing in there then we’re going to “Save”.
So, now when we go back to the site and refresh, we should see something above here with that little bottle cap. There you go, “Get Social with Me!” Here’s the little bottle cap right there. Let me see, if I take this all out, this “Get Social with Me!”… Sometimes if you don’t have any text there, it won’t actually put anything there but let’s see…But I’m sure he would want to have that anyway. Oh, so yeah, you can; whether if you want to have the little header up there or if you don’t, you can change that as well; so if you don’t want to put any text here, that’s one way to go. So very cool, “Get Social with Me!” we just put that back in there.
Now, you’re probably asking, “What if I want to put multiple in there?” Let me save this real quick. We’ll go back to our post. I’m just going to go back to this one right here that I made. You just do it again. You can either do it again or you can just add them all in there at the same time. Now you want to keep them at 80 and 80 so they’re the same size. I mean, you just go in there, go to your “Media Library” tab up here and start picking the ones that you want. I’m not going to fill out all the stuff, I’m just going to “Insert into Post” then I’ll do another one, “Insert into Post.” Once I get there, let’s see…Youtube.
So I forgot what his Youtube thing is, but he can figure that out because I’m kind of making this for him anyway; he can do it himself and learn. Yes, I’m talking to you Ted. Okay, woops! Nice. So, this is where you’d probably want to do this. Knowing a little bit of code, I mean, width and height right there, just change it to 80 on both of them—there’s 200 right there—let’s change it to 80…80…80 because we know the other one was 80×80 and so you want to keep them as uniform as possible. So, 80×80, 80×80; and we’ll take this and we’ll go back to our widgets over here. So the same, you got to discard all your stuff and then you can put anyway you want afterward, but we’re just going to “Paste” it right there, “Save.”
Now the links on here, remember we have changed the links to Twitter, the Twitter one to twitter.com/tednguyen, though…that…You know, these ones are actually just going to go to the pictures themselves because that’s what the default is. This one, you’ll see, will go to tednguyenusa or Ted Nguyen’s Twitter, things that we’ll refresh real quick and boom! He has his Twitter thing right there, he has his Technorati and he has his Youtube.
So if we click on the Youtube thing, it’s just going to take us to the bottle cap. If we go back and we go to Twitter because we changed the URL in the actual media folder when we inserted it, here, it goes to his Twitter. Very cool, ha! Very easy; didn’t really need to know any code or whatsoever aside from changing the width and height which I mean, that’s not even really knowing any code, that’s just changing the numbers you can really easily see where that’s at.
So like I said, you just have your width and your height there. If we want it to just kind of a review, so if you are in your post, so review real quick. If you’re in your post and you want to insert, you can actually, even here, if you wanted to change the links there, you can just change the link down there, you can highlight over and click once and then this little “Edit Image” thing go there, “Link URL” and change that to your Youtube or whatever your icon tends to be.
All right! Very easy, very cool; and yeah, so if you want to give that a try, you don’t even need to know any HTML whatsoever.
All right, this is Dean Soto with So Totally Business Savvy and the Prosulum.com business and technology consulting firm. If you have any questions, you can actually call me on my voicemail line. It’s 714-643-5301 and you will be on the podcast or you can shoot me an email at dean@youcanworkless.com, all right? Hope you found this valuable. Let me know if you have any questions. Have a good rest of your week. See you guys!
Easily Add Social Networking Icons to Your Wordpress Blog
August 2, 2011 at 5:55 pm[...] Transcript of episode: Click here to read [...]