How to Add Social Media Icons to Your Website

The Benefits of Manually Adding Social Media Icons

Plenty of websites offer pre-made icons. You can find the ones you like and even mix and match to create a unique set that represents your blog. Custom icons can blend with your blog or stand out in a jaw-dropping way. Manually controlling these icons lets you add the newest or lesser-known services before the plug-ins. For instance, there was a lag with the popular social bookmarking tools when Google+ first emerged. You can forget about bulky widgets, if you just want to add one or two links.

 

Find and Upload Icons

There are plenty of websites online that offer sets and individual icons for social bookmarking. If you have any experience with photo editors, you can create your own from the logo of the site, but you may find a pre-made group of icons that works just as well.

After saving the icons to your computer, you may want to resize them, however. The size depends on the area on your blog where you will show the icons. If you want them on a single line, you may need to shrink them to fit into your sidebar, while you may enlarge icons so that each is the width of your sidebar.

First, you will need to log in to your WordPress dashboard and click to add new media to your library. Select the files from your computer and click “Upload.” Once uploaded, expand the information for each image to get its URL. Copy and paste to a new tab or note pad, to keep the image addresses handy.

 

Adding Social Media Icons to WordPress

The simplest way to add icons is to add a widget from your dashboard (Appearance > Widgets). Select a new “Text” widget, which lets you add HTML. You’ll use a simple line that links to widget to your profile URL for each social service. For example, a link to Twitter will look like:

<a href=”http://twitter.com/Username“><img src=”path_to_your_icon” /></a>

Remember to change the hyperlink to your Twitter URL and the image source to the actual image source from your uploaded icon. If you put a space between each line of code, the images will appear next to each other vertically. However, you can put a line break between the icons using the following format:

<a href=”http://twitter.com/Username“><img src=”path_to_your_icon” /></a><br />

<a href=”http://facebook.com/Username“><img src=”path_to_your_icon” /></a>

Remember to press “Save” once you add your code.

 

Polishing Appearance

A few lines of CSS will add final touches to your social network icons. For example, you can center the whole block by wrapping it in a center-aligned div:

 

<div style=”text-align: center”>

<a href=http://twitter.com/Username“><img src=”path_to_your_icon” /></a><br />

<a href=http://facebook.com/Username“><img src=”path_to_your_icon” /></a>

</div>

 

Justifying the block works similarly:

 

<div style=”text-align: justify”>

<a href=http://twitter.com/Username“><img src=”path_to_your_icon” /></a><br />

<a href=http://facebook.com/Username“><img src=”path_to_your_icon” /></a>

</div>

 

If you want more space between the edges of your icons and the sides of the container, add padding:

 

<div style=”text-align: justify;margin:5px;”>

<a href=http://twitter.com/Username“><img src=”path_to_your_icon” /></a><br />

<a href=http://facebook.com/Username“><img src=”path_to_your_icon” /></a>

</div>

 

To increase the space between the icons themselves and the size of your container, use the padding attribute:

 

<div style=”text-align: justify;padding:5px;”>

<a href=http://twitter.com/Username“><img src=”path_to_your_icon” /></a><br />

<a href=http://facebook.com/Username“><img src=”path_to_your_icon” /></a>

</div>

 

Any of the box-level attributes can apply to the div, including, margin, padding, border, width and height. Because your social icons are also links, you might want to remove any underlines with the following method.

 

<div style=”text-align: justify;margin:5px;”>

<a href=http://twitter.com/Username” style=”text-decoration:none;”><img src=”path_to_your_icon” /></a

</div>

 

However, consider the following, if you want to add an unique border to the linked icons:

 

<div style=”text-align: justify;margin:5px;”>

<a href=http://twitter.com/Username” style=”text-decoration:none;border:1px dotted #000000;”><img src=”path_to_your_icon” /></a

</div>

Cleaning Up Your Code

 

If you have access to and feel comfortable editing your WordPress theme’s CSS file. Open “style.css” in the theme editor (Appearance > Editor).

 

If you wanted to center align your div with padding at five pixels and a dotted border for your links, add the following CSS to the end of your style file.

 

#social-icons

{

text-align: justify;

padding: 5px;

}

 

#social-icons a

{

text-decoration: none;

border: 1px dotted:

}

 

Save the file and change your widget to display the following:

 

<div id=”social-icons”>

<a href=http://twitter.com/Username“>”><img src=”path_to_your_icon” /></a>

</div>

 

However, you can keep your CSS within your widget, if you feel more comfortable doing that. Either way, you have custom social icons on your website and are providing visitors with more ways to connect with you.

 

Related Post

Leave a Reply