Adding Social Media Buttons to your WordPress Site

Introduction

While I was away with my wife for the past week, I thought I would finally give “setting up my website” a shot. I’ve owned the url “benjaminMgross” [dot] com for a while, but never really had the desire to begin learning the web dev side of things (I’ve been an “industrial strength model builder in Python” kinda gal), so it’s been collecting dust for several years.

Getting WordPress up and running was its own slug-fest, for which a more lengthy blog-post will be coming), but here’s a quickie on how to get the Social Media Buttons you see here in the image below:

The Play-by-Play

Here’s how I did it:

1. Get the Icon Functionality: Add the Font Awesome Icons Plug-In to your WordPress Site (from a complete Noob to web dev, if you don’t know how to add a Plug-In to your site, put down the computer and pick up that abacus sitting next to you).

   Other tutorials have told you to “download the social site images yourself” which I would argue is a complete waste of your time… if someone’s already built (well), use it.

2. Add the Icons & Your Social url‘s to a Text Widget: On your WordPress dashboard, go to Appearance > Widgets and add a Text Widget, like so:
   
   I called mine: “Social Media Links”, as you can see. In the text widget, follow my example that you see, where you add the following code (where the icon is specific, but the url‘s are generalized):

    <div id="social-icons">
        <div> 
            <a href="www.my-twitter-url"><i class="icon-twitter"></i></a>
        </div>
        <div>
            <a href="www.my-linkedin-url"><i class="icon-linkedin"></i></a>
        <div>
    </div>
   

   NOTE: There is a pdf of all of the font icons, but then names are not the same as those found on Font Awesome Examples on GitHub, so make sure you’re using the correct “icon name” as described in the cheat sheet link I just provided.

3. Make the Size & Spacing Pretty: Next go into your style.css on the right-hand menu, located under Appearance > Editor (named “Stylesheet” on the right-hand side menu bar). NOTE: I am not a .css, .html guru or anything. I can wax poetic about “Pythonic programming” but am still learning the ropes around best practices for front-end… so if there’s a better, more widely accepted place to put this .css, I’m very interested in learning (and would appreciate any insight).

   First, manipulate the size of each icon (note, you cannot use the normal functionality of <i class="fa fa-twitter fa2x">,</i>, from the GitHub Examples to change the sizes on WordPress… kinda sucks, so hack it):

        .icon-linkedin:before {
            font-size:40px;
        }
        .icon-twitter:before {
            font-size:40px;
        }
        ...
   

Next, we need to make I found a cool tutorial on CSS-Tricks [dot] com about “Equidistant Objects with CSS,” which is where I found out how to make them nice and evenly spaced. Check out the tutorial, but here’s a quick snapshot of my four icons:

        #social-icons {
            height: 50px;
            text-align: justify;
            min-width: 100px;
        }

        #social-icons div {
            width: 25px;
            height: 50px;
            display: inline-block;
        }
        #social-icons:after {
            content: '';
            width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
            display: inline-block;
        }

As I mentioned, if I’ve made any kind of .css, .html faux pas, please let me know. I’m just beginning to learn this sort of thing and consider myself an “Amateur for Life,” i.e. always looking to learn and better myself.

Happy Hacking!

• Benjamin