Thursday, September 17, 2015

How to Get Social Media Icons on Your Blog: for Beginners

I know this isn't my usual topic of conversation here at Homeschooling Housewife. But I was so excited about figuring out how to put my nifty social media buttons on my website that I figured I should share it! If you're looking for great homeschooling reading check out my side column for my most popular posts!

I found several great tutorials on how to go about getting social media icons onto my blog, and I wouldn't have been able to figure it out without them...but for some reason all the icons wouldn't work using their methods, so I had to figure my own way to do it! And trust me, I am not very tech-savvy...I'm one of those "a year after everyone else is sick of this new tech-ware I'm finally starting to use it" kind of people.

Here are my step-by-step instructions to getting social media icons on your blog!

  •  Get Icons: look here or here to find the icons (the image of the social media network you want your readers to see) that fit your blog. This is going to take a while to find the perfect icon, be patient...it's worth it! 
    • Once you've found icons that you'd like to place on your blog, download them, crop them if necessary and save individual files of each icon you plan on using.
      • I made a brand new file on my desktop so I could easily find them again
  •  Upload Icons: now you need to get your icons into your photobucket account. I had no idea what photobucket was before I did this...take a deep breath, it's gonna be ok! All you have to do is sign in for your free account using your existing facebook ID or start a new account through them. 
    • once you're into your photobucket account hit the UPLOAD button (which will take you to a new page) and drag your saved icons to your "bucket." 
  •  Get HTML code: it does not matter if you have no idea what that is, all this step includes is clicking on the correct link--you CAN do this! 
    • 1-click on any of you icons, this will take you to a singular view of that icon.
    • 2-on the right side of the page you should see a list of options under a title that says "SHARE THIS PHOTO." That list includes: "Email and IM," "Direct," "HTML," and "IMG." Do you see it?
    • 3-click on the link next to "HTML." You only have to click it once. By doing so it will copy that link for you!
  • Open HTML widget on Blogger: On the dashboard of your blog there is a list of ways to view your blog on the left side of the page. Near the bottom of that list is "Layout," click it. Here you will see the rough outline of how your blog is "Laid Out." In one of your side columns hit the "Add a Gadget" button, this will bring up a list of gadgets you can add to your blog. Click on the gadget for HTML/Java Script (probably the second one on the list), this will open a new window that says, "Configure HTML/Java Script."
  •  Paste icon link into HTML window: In that new window that just popped up you're gonna paste the icon link from photobucket in the square titled "content". You can either right click your mouse and select "paste" or you can hold down the "CTRL" button and then hit the letter "v." Your code should immediately pop up in that window.
  •  Highlight icon: you should still be in the "Configure HTML/Java Script" window. In the "Content" header bar (above the square where you pasted your icon HTML code) on the right side of the bar there are the words "Rich Text." Click on that. Now you should see the social media icon in that same box you pasted the HTML code! *MAGIC! You need to double click on this icon until it gets highlighted, not just the box around it but the transparent blue color over the entire icon. YOU'RE DOING GREAT AND YOU'RE ALMOST DONE!
  •  Link icon to your social media page: now you need to make a link between the icon and the social media page you want it to take your readers to. 
    • Open a new tab or window in your internet browser and sign yourself into your social media account. Navigate to the home page of your account and highlight the URL (the http://wwww.facebook or pinterest/yourname that is at the very top of your web page). Now copy the URL by right clicking and selecting "copy" or holding "CTRL" and hitting the letter "c."
    • Once you've copied the URL click back to your open window for blogger that has your highlighted icon. Find the button that looks like the earth with a little chain above it and click it.
    •  This will bring up another window that says "Enter a URL" with a long rectangular box in which to do so. Paste your social media page's address into this box and press the "OK" button.
    •  You will once again see your "Configure HTML/Java Script" window. Hit the orange "Save" button at the bottom of this window. The window will close and take you back to the"Layout" page of your dashboard. Hit the orange "Save the Arrangement" button at the top-right of the screen.
  •  Check the connection: Hit the "View Blog" button to view your live blog page. You should now see your awesome social media icon! Click on your icon. It should redirect you to your social media site!
  • Repeat: if you want more than one social media icon you need to open up the widget you just finished. You can do this by clicking the fix it button that looks like 2 crossed hammers at the corner of the widget. Make sure that you're in the Edit HTML setting (you'll see the HTML code for your photobucket if you're on the right screen) and paste the other icons you want to see on your blog. Then switch over to the "Rich Text" view and link up the new icons with your other social media sites!
 I really hope this helps you! It's so fun to have all your social media linked up and for your readers to be able to follow you on pinterest, instagram or whatever you love to use! Good luck!

No comments:

Post a Comment

I would love to hear what you think! Thanks for commenting!