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&#8221; 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

22 thoughts on “Blog Guide: How To Add Social Media Icons To Your Posts (Or Anywhere!)”

  1. I have always wondered how people do this! Great post. How do you get them in your side bar? I have tried putting the coding/links into a text widget but it won’t work, the images don’t show up and the links won’t work. If I put the links into a image widget it all works fine but then I can’t get them lined up horizontally . Erh I’m so not tech savvy! :)

      1. Hmm that’s interesting. If you want to send me a screenshot of your widget screen at henryfacebeauty@gmail.com I’d be happy to look at it and see if I can help further. And maybe one what it looks like on your page. Does it show up as text or just nothing?

      2. Aww thank you so much, that is so kind of you :) I have just emailed the screen shots through.
        They just come up as little image icons but not the actual icons if that makes sense and when you click them they come up with error messages

  2. Thank you, this was helpful, well I had some issues, but finally I have it done. I have a question tho, do you know if it is possible when you click on the icon the page to open in a new tab. Thanks

    1. Definitely! We were able to finally figure it out for abeautyobsession so hopefully I can help you too :) send me some screenshots and maybe copy and paste the code your using.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s