Tag Archives: blogging

socialmediaiconsblog

Blog Guide: How To Add Social Media Icons To Your Posts (Or Anywhere!)

I’ve recently been learning tons of new skills related blogging so I thought I’d try and share a few to help newer bloggers make their blogs shine.  Today I’ll be walking you through the steps to add social media icons, like the ones at the tops of my sidebars, to the bottom of your posts (or basically anywhere you want).

I’ve used the exact process I will teaching you to add some social media buttons to the bottom of this post, so scroll on down to check them out, and click through to see how they work.

Disclaimer: This guide is written for bloggers using WordPress.  If you’re using a different platform, the process should be similar, but let me know if you have any questions.

Step 1. Find your social media icons.

If you google ‘free social media icons’ you will find a ton of options.  I usually look through a list of a whole bunch of free ones until I find one that catches my eye.  This list has some nice options.  Download your icons of choice.

Step 2. Upload your icons to WordPress.

On your WordPress dashboard screen find ‘Media’ in the lefthand column, and then click ‘Add New’.  Use this screen to upload the social media icons you will be using.

Step 3. Find the url for your icons.

After they have uploaded, click on the individual icons to view their details.  In the box in the upper right hand corner you will find the ‘File URL’.  You will need this url for each individual icon so copy and paste them all into a word document or remember how to get back to this page.

fileurl

Step 4. Place HTML code into post (or sidebar or wherever).

Copy and paste code below wherever you want your icons to appear.  Make sure you replace the bold links with whatever is indicated, whether it is the url for your profile on that site or the icon url we found in step 3.

HTML CODE (replace bold text with your links):

<div><a href="fulltwitterurl"><img title="Twitter" src="twittericonurl" alt="Twitter" width="35" height="35" /></a><a href="fullpinteresturl"><img title="Pinterest" src="pinteresticonurl" alt="Pinterest" width="35" height="35" /></a><a href="><img title="Instagram" src="instagramiconurl" alt="Instagram" width="35" height="35" /></a><a href="fullfacebookurl"><img title="Facebook" src="facebookiconurl" alt="Facebook" width="35" height="35" /></a><a href="mailto:emailaddress"><img title="Email" src="emailiconurl" alt="Email" width="35" height="35" /></a><a href="fullbloglovinurl"><img title="Bloglovin" src="blogloviniconurl" alt="Bloglovin" width="35" height="35" />

This is an example of how the code for my twitter icon looks.  Make sure you include the full url for both your twitter and the icon.

<a href="https://www.twitter.com/henryface_"><img title="Twitter" src="http://henryfacebeauty.files.wordpress.com/2014/04/twitter-48.png" alt="Twitter" width="35" height="35" /></a>

You can also add additional versions of this code to include icons for RSS feeds, linkedin, etsy shops, pretty much anything you can find an icon for.  You could even create your own icons!

Here is what they code should look like after you paste it with your links.  Make sure you paste it in the 'text' tab, not 'visual'.  After you paste it, switch back to visual and you should be able to see the icons.  If not, something has gone wrong.

htmlcode

I recommend copying and pasting the full code with your individual urls somewhere safe so you can easily find it whenever you want to add your icons somewhere.

So how did we do?  Were you able to follow along?  Any questions along the way?  Please feel free to leave them in the comments or email me using the mail icon below if you need some more personal help.  I would love to start sharing more blogging tips so let me know if this is something you guys are interested in!

 

TwitterPinterestInstagramFacebookEmailBloglovin

About these ads