How to Add Social Media Icons to Blogger: Get Your Blog On!
I did a Google search for adding social media icons to Blogger and found great step-by-step instructions on My Favourite Things Blog.
After adding the social media icons, however, I realized that when I clicked on an icon the website opened in the same page as my blog. I wanted readers to be able to click on a social media icon and have the social media site open in a different window.
So, I did some more Google-ing to find a html code for opening a website in a new page. I decided to make a tutorial to break it down into smaller steps and give you a code that will open the social media sites in a new page.
Subscribe to a Photo Hosting SiteTo add social media icons to Blogger, you will first need to subscribe to an image hosting website. The website where I originally found a tutorial recommended Photobucket, so that is what I used. Photobucket was super easy to use.
Download Social Media Icons
Next, you will need to find some social media icons that you like. There are many sites where you can download free social media icons. I pinned some free social media icon to my Blogging board on Pinterest.
After you find a social media icon set that you like, you will need to download the images to your computer.
Upload the Social Media Icons to Your Photo Hosting Site
Once the social media icon files are downloaded to your computer, you can upload them to the photo hosting website of your choice. I chose Photobucket because it is easy to use and easy to find the code that you will need to copy later.
For each image you upload you will get a direct link. There are many ways to access the direct link code. You can click on the image after you upload it and at the right bottom corner there will be a set of links that looks like this:
Or you can click on the gear in the screen where all of your images are stored. Click on "get links" and a window with all of the links will appear.
For what we are doing you only need the DIRECT link code. It is the second one down.
You will copy and paste the direct image code for each of your social media icons... more about that at the bottom.
Add a Gaget on Blogger
In Blogger, go to the layout screen.
Then, click on add a gadget.
Scroll down until you see HTML/Javascript, then click on it.
A screen will open that looks like this one below.
Enter Your HTML Code
This is the fun part! This is where you get to feel like an HTML rock star! ;)
**For this part you will need to have Photobucket or whatever image hosting site you are using so that you can access your direct code!**
In the section that says content, copy and paste this code:
The colors will not copy into the section so read this next part very carefully...
The orange text is where you will put the social media website link. The green text is where you will put the direct link for your social media icon image. The purple text is where you will pick the size for your icons.
For example, the code for my social media icon for the School Counselor Blog Facebook page looks like this:
NOTE: Do not just copy and paste this code into your content area or it will link people to the School Counselor Blog Facebook page. You need to change it so that your facebook page or social media site address is in the orange text, the link to your image is in the green part, and you have chosen a height and width for your icons in the purple text.
After you add one you can continue to copy, paste, and modify the code for each one of your sites.
The only one that is different is email.
The code for email looks like this:
The red text is where you put your email address. The green text is where you put the direct link for your social media icon image. The purple text is where you choose the height and width for the social media icon.
Save. Preview. Admire!
After you have copied, pasted, and modified all of your codes, it may look something like this:
No need to be alarmed... it is supposed to look like a whole lot of craziness! Hit save and then preview. If everything looks good to you, hit the save arrangement button. Then in a new browser window, go to your blog and test out the links. Make sure they all work! If they don't, go back and look at your code. Make sure you copied and pasted everything exactly and that there are no extra spaces or characters!
Enjoy!
Once everything is up and running, let others know that you have updated your site! Fellow tweeter and school counselor blogger, Darrell Sampson just added social media icons to his blog, From the Counselor's Office! Share your success below in the comment section and give us a link so we can check ouyour new social media icons! :)
Adding social media icons to your blog is a great way to increase traffic to your social media sites. It helps your readers know all of the other places they can connect with you on the web!
+Andrea Burston of JYJ Counselor and I are presenting Get Your Blog On! at the American School Counselor Association National Conference. We are both planning to share some more advanced tips and tricks like this one for those of you interested in becoming school counselor bloggers!
Comment below, tweet, contact Danielle, or share on the School Counselor Blog Facebook Page!
Danielle is a K-12 Certified School Counselor, Nationally Certified Counselor, and blogger at School Counselor Blog, a place where school counselors share innovative ideas, creative lesson plans, and quality resources. Connect with Danielle via email, Twitter, Pinterest, LinkedIn, Google+, and become a fan of the School Counselor Blog Facebook Page.
