Everyone who has a website should have an easy way for people to follow them on social media sites sites like Facebook, Twitter, LinkedIn and Google+. Many people chose to install a WordPress plugin but it’s relatively simple to add buttons (like the ones at the top of my sidebar) to your WordPress website with HTML code. (You are engaging with your potential clients and customers on social networking sites aren’t you?)
5 Steps to Add Follow Buttons to your WordPress Sidebar
WordPress plugins are great and they can add a lot of functionality to your website. There are plugins for virtually everything you’re looking to do. One of the disadvantages of using plugins is that using too many of them can slow down the performance of your site. Here’s a fairly simple way to add social media follow buttons to your side bar without having to install a plugin. As always backup your website before you start making changes to your site. (No matter how simple you expect the changes to be it is always a good idea to backup first.)
# 1) If you don’t already have a text editor, download one. Word processing programs can do funky things with your HTML code by inserting formatting code that you can’t see but trust me, it can wreak havoc. My choice for a text editor for a PC is Notepad++. I don’t use Macs myself but I’ve heard good things about TextWrangler. (Both of these programs are free. Feel free to share your favorites in the comment section.)
# 2) Assuming that you don’t already have a set of icons to use, you can search for a set on IconFinder.com. Try searching for “social media”. There’s also an option to search for graphics that are “Allowed for commercial use (No link required)”. Download a set of graphics that are in the size that best meets your needs. (The graphics that are in my sidebar are 32px X 32px and in the png format.)
# 3) Upload your images to the media library of your WordPress site. As with every photo and image that you upload, be sure to optimize your graphics for SEO. This is an opportunity to enter keyword rich phrases in the alternate text and description fields. (For example, I entered “Follow Sherryl Perry on Facebook to discuss business strategies for developing your online presence” in the description field of my Facebook image.) Before you hit the update media button, copy (Ctrl + C) and paste (Ctrl + P) the File URL into your text editor.
# 4) This is where you’re going to write the HTML code that will be behind each button. For each button, you’ll need the URL of the page that you want your website visitor to go to and the URL of the graphic. The code behind my Twitter button is (basically) this:
<a href=”https://twitter.com/#!/KeepUpWeb” target=”_blank”>
border=”0″ alt=”" /></a>
The URL after the href is the new page that will open and the URL after the img src is the URL that you copied in step 3. Copy and modify the code for each button that you want to add to your side bar. (The only code that you’ll need to replace are the two URLs.) Select all of the lines of the code and copy it (Ctrl + C).
# 5) Now, you’re ready to add the code to your sidebar. Simply create a new text widget (under Appearance in your Admin panel). Paste (Ctrl + P) the lines of code that you created in step 4 and save your widget. Check out your new social media buttons in your browser. (If they’re not displaying properly, you may need to refresh your screen and/or clear out your cache.)
That’s it! You should be good to go. I’m a fanatic about backing up. So, I’d backup again because I wouldn’t want to risk losing all my hard work. Hopefully, along with your shiny new buttons, you’ll also get a sense of accomplishment from doing a little coding on your site. Any time you can add functionality to your site without having to add another plugin, you should be pleased with yourself.
Now, over to you. Do you have social media buttons on your site? Do you have a favorite plugin or did you use a text widget? What other sorts of things have you used text widgets for? (If you’d like to hire me to add follow buttons to your blog, please contact me using the contact form on this site.)
TIP: Steve Hippel suggested creating a draft post to generate your code. Insert your images and link them to the appropriate pages. (Don’t forget to click on the “Open link in a new window/tab” box when you’re linking the image.) This will generate the HTML code for you. Preview your post to make sure your buttons are working correctly. Then, switch to the HTML tab and copy the code. Then, you can paste it into your text widget. Thanks for the excellent suggestion Steve!