In part one of this series, I gave you the steps for an easy solution to add social media buttons to your WordPress blog. I also encouraged you to be active on one or two social media sites and then to invite your blog readers to these sites in order for your blog to succeed.
Add Social Media Buttons to Your WordPress Blog
The easy method explained in part one, is to use WordPress.com’s widget, Social Media Icons. This post’s second method will allow you to add more sites than WordPress supplies through their social widget, which only features Facebook, Twitter, Instagram, Pinterest, LinkedIn, GitHub, YouTube, and Vimeo. If you have more than one account for one of these sites or you want to direct your followers to different sites, then part two is for you.
After I explain how to create social media buttons with HTML (computer language for the Internet), you’ll want to decide if you’ll do all your social media buttons this way or use the Social Media Icons widget together with this Text widget solution, so stick with me after this tutorial.
The You-Can-Do-This Answer for Your WordPress Blog
Find and upload social media images to your Media library
I used standard icons and saved them at 256 x 256 pixels. (You don’t want large images for these icons.)Â This is the actual size of my Twitter icon.
Since you’re doing DIY icons without the social widget, this could be your chance to do something creative with your own artwork or other creative buttons. Be sure to check for copyrights. See the Note at the bottom of this post for great free options.
What the HTML code looks like
You don’t need to know much HTML coding to get by, so, don’t be intimidated. This is what the following HTML language is saying:
- The href attribute specifies the link to your Twitter profile (https://twitter.com/your_profile_name).
- The src attribute identifies the location of your Twitter icon image in your WordPress library (https://your_blog.files.wordpress.com/your_twitter_icon.jpg) whose width is 35 pixels.
Unfortunately, I can’t give you a cut-and-paste solution in the next steps because WordPress would see this language in my post and try to interpret it, so, sorry, you’ll just have to type carefully everything you see. IMPORTANT: There’s a space before src and before width. (My apologies, but to make this HTML example readable for you, these spaces are not obvious.)
Make your images into clickable social media icons
Look at how my text widget looks in the footer of this post if you need help visualizing this method. I’ll explain what to substitute. Here’s the steps to put your HTML code into your Text widget:
- Go to Appearance/Customize/Widgets.
- Choose the sidebar or footer location where you want your social media icons.
- (You also have the option of putting the icons in your After Post.)
- Click the “Add a Widget” button on the bottom.
- Choose the “Text” widget.
- I put “Follow” for the title of the Text widget. Leave it blank if you wish.
- Type exactly what you see above for the Twitter example in the content window.
- Paste your Twitter profile URL between the quotation marks for the href attribute.
- Paste your Twitter icon image URL between the quotation marks for the src attribute.
- You’ll find this URL by opening the image in your WordPress Media Library.
- I resized the icon to 35 pixels to fit the footer. Try other sizes if you wish. The original 256 pixels will be too wide for your blog, probably.
- If you’ll be doing more than one social media icon, check “Automatically add paragraphs”.
- Repeat steps 6Â to 9Â for additional social media links.
- Hitting “enter” after each additional HTML code (to start a new line)Â makes it easier for you to read, but is not necessary.
Important exceptions
The HTML is basically the same for all social media with these exceptions:
- I used width=”80″ for my YouTube icon because it’s rectangular.
- rel=”publisher” is needed for Google Plus. This has to do with Google Authorship, which I don’t know enough about … yet. If you have some trouble with Google Plus, you’ll have to try searching for some answers. I’ll appreciate any comments you have about this. Here’s your Google Plus HTML code:
How Do the Social Media Buttons Look on Your Blog?
Decide if you’ll do all your social media buttons with the Text widget option or use the Social Media Icons widget together with your Text widget option. You don’t have to put these two widgets next to each other, but you could possibly do that. Do they fit together visually? Or do they look odd together? You could put them in different locations or use the visibility feature to have only one showing up at a time. The other option would be to put all your social media icons in the Text widget. That’s what I did, but WordPress didn’t have the Social Media Icons widget available when I created my clickable icons.
NOTE: The iPhone icons are available free at Land-of-Web. If you’d like to make an eye-catching website, you could consider these free social media icons, from vintage-look to leather to vans to sports and more at Find Your Perfect Match: Collection of Free Thematic Social Icons Sets.
eQuipping for eMinistry 
