How To Create an Attractive Subscribe & Follow Box For Your WordPress Blog

Your WordPress blog isn’t the only place that you should be adding fresh content to. It’s important these days to also add new content to social networks as well.

Most of the time, webmasters create profiles and pages on social sites that are specific to just one web site (or niche that they are in). Each social site may have a specific content type that is to be shared. For example Flickr, Instagram and Pinterest profiles are loaded with images, and YouTube channels contain videos.

Or other times, webmasters may just be sharing the content from their site. Either way, as mentioned, it’s important to have a presence in many or all of the top social sites. More than just a presence, it’s also important to stay engaged on these sites. But that’s not what this article is about. In this article I want to provide the way in which I add links to all social profiles from my site, and supply all the code (and icon sources) for doing so, so that you can do the same.

Depending on your niche or what your web site is about, I’d say the main social sites to look at are: Pinterest, YouTube, Twitter, Facebook, Google+, and LinkedIn. There are probably others that make sense to your site and niche. I also add icons that link to my RSS feed and email subscription pages.

Subscribe and Follow Box Creation Video Tutorial

Subscribe and Follow Box Creation Steps

1. Let’s Start By Downloading Free Icons To Use To Represent The Profiles

It’s boring to just use plain text links, so I’m going to show you how to create a nice strip of icons to represent your social circles that we can fit nicely within a standard Text and HTML widget in the sidebar of your WordPress blog.

There are web sites that have free icon sets that can be used for your site. Designers have been busy getting creative with new looks for the logos and icons for these social sites. I use an icon search engine site called IconFinder.com. Unless you want to pay, be sure to turn the “free” filter on when doing your search.

Be sure to get icons ready for all the sites that you want to link out to. Try and match the look and feel if you are concerned about aesthetics. Plus, getting them to be the same size (especially the same height) is important. The ones that I use are 32 pixels by 32 pixels which are a standard size and look great on my site.

• Visit this link to do your icon search.
• Choose the “free” filter and optionally select the “For commercial use (no backlink)” choice.
• Click the “look” that you like, then download the set to your computer.

Upload the images to a folder on your server. I chose “/images/social/” to upload mine to. Make note of the path to each one because we will be using it in the code later on.

2. Place The CSS For The Subscription Icons

Check for an “Edit CSS” link under “Appearance” in your WordPress dashboard. If it’s there, you have a cool theme like me. If not, your theme is probably still cool but we have to do it a different way. I just like the CSS editor (under “Edit CSS”) because it points out errors and tidies up the code.

If you don’t have it, click “Appearance” and then “Editor.” You will be on the main stylesheet by default. You may need to modify that file to add the following CSS. If you scroll down and look at the bottom right, you may see a “custom stylesheet.” If so, use that instead.

Now, place the following CSS wherever appropriate based on what was discussed above.

.side-sub-follow {
	margin: 0;
	padding: 5px;
}

.side-sub-follow .fb {
	float: left;
	margin: 0 3px 0 0;
	background: url(https://website-example.com/images/social/facebook2.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
}

.side-sub-follow .yt {
	float: left;
	margin: 0 3px 0 0;
	background: url(https://website-example.com/images/social/youtube33x33.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
}

.side-sub-follow .gp {
	float: left;
	margin: 0 3px 0 0;
	background: url(https://website-example.com/images/social/googleplus1.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
}

.side-sub-follow .tw {
	float: left;
	margin: 0 3px 0 0;
	background: url(https://website-example.com/images/social/twitter33x33.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
}

.side-sub-follow .em {
	float: left;
	margin: 0 3px 0 0;
	background: url(https://website-example.com/images/social/email_open.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
}

.side-sub-follow .rss {
	float: left;
	margin: 0 3px 0 0;
	background: url(https://website-example.com/images/social/rss33x33.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
}

.ss-clearer {
	clear: both;
	line-height: 0!important;
	font-size: 0!important;
	height: 0!important;
}

In the code above you will see many similar “chunks” of CSS. There is one for each social profile that we want to link to. It should be obvious by the name of the CSS class and the name of the image what social site (or icon type) it is defining. You can name the classes whatever you like, just as long as they match up with the HTML code that we place in the text widget later.

Of course, you may need to add or remove some classes to represent the list of profiles you plan to link out to. And naturally you will have to modify the path to the icons, plus modify the width and height values for each if necessary.

The “ss-clearer” class is just used to maintain proper whitespace around the set of icons.

3. Adding The HTML Into A Sidebar Widget Is The Next Step In The Process

Once you have the CSS code in place and saved, we can now move on to adding the HTML into a text widget.

Head over to “Appearance” and then “Widgets.” Drag and drop a text widget into place. In my theme I have a section called “Primary Sidebar” where I placed mine. Your theme will likely differ in what it is called. If you aren’t sure where the text widget appears on your site, then just place it, add some dummy text, click the “Save” button, and then visit (or refresh) the site to see.

Add a title. I use “Subscribe & Follow.” Then place the HTML below, making sure to modify it for your needs. Note that just because it is called a “text” widget, HTML will also work. You’ll see that you can include “Arbitrary text or HTML” within the widget.

<div class="side-social">
<p><a href="https://www.facebook.com/page-name" target="_blank" class="fb"></a></p>
<p><a href="http://www.youtube.com/user/account-name" target="_blank" class="yt"></a></p>
<p><a href="https://plus.google.com/u/0/1111111111111111111/posts" target="_blank" class="gp"></a></p>
<p><a href="https://twitter.com/twit-name" target="_blank" class="tw"></a></p>
<p><a href="http://www.website-example.com/subscribe/" target="_blank" class="em"></a></p>
<p><a href="http://www.website-example.com/feed/" target="_blank" class="rss"></a></p>
<p><br class="ss-clearer"></p>
</div>


As you can see, I used class names that match exactly with the ones used in the CSS code in the previous step. This makes it so the browser knows the path to the images that are to be used and how they are to be displayed, etc.

You also want to be sure to modify the URLs to match those for your profiles and pages on the social sites. Plus of course you want to add and remove “code chunks” to reflect the social sites that you want to link out to.

It’s common to place these in the sidebar and widgets are a very easy way to make that happen, but you can also place them in other widget locations. On one of my sites, I include them in the footer widget area for example.

Troubleshooting The Subcribe And Follow Box

I find it easiest just adding one icon at a time. I will first place the CSS and then add the HTML. After testing and everything looks correct, I will move onto another icon. This makes it so that there is less code to “break.” Forgetting to close just one HTML tag can make the entire page look messed up, especially when using “div” tags. Therefore working with just one chunk of code at a time can make troubleshooting easier.

If you find that things just aren’t showing up regardless of what modifications you are making, it might have to do with caching or storing “static” files on a content delivery network.

For the most part, CSS files aren’t modified. They certainly aren’t modified regularly so they are cached often. Caching means that the assumed version of the file will be used to prevent reloading it for every page request. Until a certain event occurs, like manually clearing the cache, or a certain time frame is reached, the “old” CSS file will be used. If you are using a caching plugin, you can either wait it out or clear the cache. Pressing Ctrl+F5 might also force a hard refresh of the web page.

Another thing that might be going on is the CSS file is spread across a content delivery network. What this means is that an old version of the file is being used and is being loaded from a server close to your geographic location. You may already know this because you set it up. At any rate, it might take a few minutes for the CDN to get the updated version. This can be aggravating when making multiple changes. You might be able to login to your CDN and force an update of specific files with the click of a button. Check to see. It’s one extra step but when you get in the rythm it should be fine.

When all is said and done, you should have a nice strip of icons in your WordPress sidebar allowing people to subscribe and follow you on the web.