Adding a social media icon box anywhere on your Blog.

If you look in my about page, you'll see a little box of icons representing my presence online. Each icon takes you to the profile for that particular social network.

I've been asked how to do this before so I'll show you how I did it.

There are several ways to do it of course, and the most basic one is to manually add the icons you want. That is simple enough that you can just do it from the edit pane in a wordpress post or page. I won't cover that on this post.

Getting Started

The cool way of doing it, and as far as I'm concerned the better way is to use the links feature that is built into WordPress. First you'll need to create a link category that will be used for this purpose only. Also, if you're good at working with themes, this would be even better if you integrated it into your theme. This post deals with using this code directly in your posts and pages.

Need a unique category

I created a category called: Where in the Web is Oscar Gonzalez? - I gave it a proper description and used the slug of "oscar-gonzalez" as shown below:

Then the code

Then comes the tricky part, making the code to display your links where you want them. First, you'll need to get a plugin called PHP Exec. This is also not covered in this post, but if you need help with it, let me know on twitter or email and I'll give you a hand or post a tutorial on that. You can find Exec-PHP at the WordPress.org repository. Onto the code.

After you get it installed, you'll be able to use PHP code in your posts. With the handy Codex guide and some trial and error, I figured out what I wanted to do and how it would work.

Here's the code I used:

&after=&class=oglinkcat&show_description=0
&show_name=0&orderby=rating&order=DESC'); ?>

Which in turn displays this:

&after=

&class=oglinkcat&show_description=0&show_name=0&orderby=rating&order=DESC'); ?>

The way this works is as follows:

I'm asking WordPress, to use the wp_list_bookmarks command --if you will, to ask for the links under the category with ID of 443 which is the category I have for this purpose, remember Where in the Web is Oscar Gonzalez, yup same one. The real name for something like "wp_list_bookmarks" is a function, by the way. You can find the ID by moving your mouse over the title of the category. There are other options and numerous combinations you can work with to determine how your list will display. The full documentation showing you the options and commands you can build with this function is located in the WordPress.org Codex.

After the ID, I've told the command to show the images attached by saying to the links by saying show_images=1; these images are attached to the links when you create them. Its really a choice you have to use or not to use an image, but because we want to be all spiffy and all, you do want to attach images to these links. In my case I am using 32px by 32px images in general.

Then I tell the function to give me each result wrapped in a list format by using:

before=

&after=

. When I want to use styles to further customize the display of the links, I use the class argument and in this case, the value is oglinkcat, Then the rest of the commands are really to help me sort out the order in which the links will be displayed and what elements will be used.

For example, these mean:

• &show_description=0 means Don't show the description
• &show_name=0 means Don't show the name
• &orderby=rating means That the links should be sorted by using the rating feature
• &order=DESC); That the order should be in a descending manner instead of ascending.

The CSS I'm using is as follows, but I won't explain it because I'm really not an expert at this and it took me some trial and error to finally get it right:

.oglinkcat ul li {
   padding-top: 10px;
   padding-bottom: 2px;
   padding-left: 2px;
   /* border-left: 2px solid gray; */
   list-style: none;
   display: inline;
}

So how do you use it? Each time you want to add a new link to our little nifty Social Media icon display box, you simply add a new link, following the designated fields in WordPress and assign it to the category that we're using in the code. Give it an image and set the other configuration options as you wish.

If you add your icons this way, you can easily choose to show different icons in different sections of your website really easily. I choose to show this box in my About page, but I also show it as a widget on some other pages. I could show it at the bottom of each post, or anywhere else I choose and still only have to update the links from one place. That's the beauty of this approach.

Here's how I add a new link to my social media icon box.

Make sure you give it an image, like an icon for the service you're trying to add, then click on save and your link should now start showing up inside the box. After you add and save the link, you can then refresh the page where you show the box of icons and find the new icon showing up.

I'll explain what the XFN options are in an upcoming post. If you want to receive an update when that comes out, please sign up for my WordPress and website tips newsletter.