expr:class='"loading" + data:blog.mobileClass'>

Tuesday, May 28, 2013

Tried It Tuesday-Social Media Buttons!

So, a Tuesday after a looonnng weekend is a bummer.  I am still in total weekend mode but need to get my act together quickly!  We have four weeks left with students (can we say countdown?!?) and I don't even know where to begin.
Tried It Tuesday is here and for all of you on summer vacay catching up on blogging while drinking your morning coffee, I am pretty jealous.  I know my turn will be here soon though:)  The summer is when I started blogging I can't wait to be able to read more blogs on a regular basis soon!

If you are new to Tried It Tuesday, read more about it here.

My Tried It:
Making Social Networking Buttons!
As you may know, I finally started a facebook page for my blog.  I tried unsuccessfully last week to install a facebook pop up for new visitors to my blog.  I'm pretty sure that was a failed attempt at HTML code.  However, my "testers" were not visiting my blog for the first time, so I don't know if there is a way to know for sure since it is only supposed to pop up for new visitors.  I agree that pop ups are annoying but I wanted to spread the word somehow especially since I didn't have those nice little social media buttons on my sidebar.  I have been admiring  these little buttons on everyone's blogs for awhile and then thought it was time I tried to figure out how to do that!
Do you see my little buttons now on my right sidebar?  I made them all by myself!  
(Can you tell how proud I am?!?  Sometimes it's the little things!)  
And NO, I did not design my blog!  That just scares me! I have virtually no blog designing experience or computer based design experience period.  
My blog was designed by the amazing Diana at Custom Blog Designs and the talented Michelle at The 3AM Teacher designed my threaded comments:)  However, if your blog design is lacking these little buttons, keep reading to see how I created my own!
1.  First, I created the pictures using Powerpoint.  For more detailed instructions on using Powerpoint to create layered images, see this post by SThomping Ground.  The images I took from my blog design package, Misty Cato's I Can Fix It.  Here is a screenshot of the PPT creations:
I did not use the "e" for email yet because I am not sure how to link it.  When I click on other blogs' "email button" I get a new email application trying to walk me through the setup process and it doesn't show their email until I complete that.  So, for now, I just have my email still listed on my "About me and contact" page at the top of my blog.  I also didn't use the "normal" P for Pinterest but I figured that most readers would know what the "P" stands for. :)

2.  I grouped the images in each picture by selecting all the images and right clicking (control click on Mac).  Select Grouping and "group".  
Save the grouped image as a picture by right clicking again.
3.  I uploaded my images to photobucket and copied the "Direct Link" for one photo at a time to add to my blog.  

4.  I selected "Layout" and "Add a Gadget" from blogger.  Then, select the add "HTML" option.  I used the code I found from SThomping Ground.  

<div class="separator" style="clear: both; text-align: center;"><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" /></a></div>

I replaced "YOUR LINK" with the link for my button and replaced "YOUR DIRECT LINK FOR IMAGE" with the direct link code I copied for that image from photobucket.

5.  Little problem!  My buttons appeared HUGE on my blog!  I searched for an answer and found this post by Olivia at My Favourite Things.  The "70 width" worked for my blog with the first try!  This is the code that I pasted in the HTML add a gadget box (minus my direct links for sites and pictures in purple).  This is the code for all FOUR buttons.  All four codes were pasted in the same box and came out horizontally in my right sidebar with the code like this. 

<a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a>

Here is the code for ONE button:
<a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a>

I hope this may help someone who would like to add some easily accessible buttons to their sidebar!  You will be so pleased with yourself after it actually works!

19 comments:

  1. This is great. I am pinning this so I have it for "future reference!"

    Hunter's Tales from Teaching

    ReplyDelete
  2. This will come in handy this summer as I want to redesign my blog. I love this linky; I learn so much each week!
    Carol
    Still Teaching After All These Years

    ReplyDelete
  3. This is just fantastic. Thanks Holly...my summer list keeps growing (or my "things to do while hockey and basketball are on in the background" list grows).

    matt
    Digital: Divide & Conquer

    ReplyDelete
  4. This is on my summer to do list- thanks for the easy to follow directions!
    Aylin
    Learning to the Core

    ReplyDelete
  5. these are really cute! I will need to add this to my "to-do" list this summer.

    THANKS!
    Elizabeth
    Hodges Herald

    ReplyDelete
  6. I tried the pop-up thing, too. I even went to the TpT forum to ask people who have never visited my blog to visit to see if it worked. Nope! So let us all know if you figure it out!

    Diane
    Fifth in the Middle

    ReplyDelete
  7. I am really impressed. I only added a FB button and I just used one that someone designed and I only had to link it! I can't believe how tricky that popup is, whenever I see it work on someone else's blog I am shocked and wonder how they did it!!
    I linked a totally (mostly totally)not educational post today, don't kick me out of the party : )

    ReplyDelete
  8. Great tutorial on adding social media buttons! I also had a techie Tried It Tuesday to share with you about ThingLink. It is a great iPad app that allows you to add text, video, etc to images. I think it has many uses in the classroom as well as personal uses!
    Check out my post and blog :)
    Today is my first link up with your linky! I love that I have time in the summer to do these!
    Kim
    Mrs. H's Resource Room

    ReplyDelete
  9. Thanks so much for posting!! I have figured my entire blog design out by myself (it looks amateur, but it is MINE!), but I HAVEN'T tackled the social media buttons. So glad to have your instructions! Guess what's next on the list...?!

    ~Erin
    Mrs. Beattie's Classroom

    ReplyDelete
    Replies
    1. Holy Cow... I DID IT!! Check out my new social media buttons...
      Mrs. Beattie's Classroom

      Thanks again for sharing this! :)

      ~Erin

      Delete
  10. Thank you for a great tutorial! I can't wait to try it!

    Kelly
    Teaching Fourth

    ReplyDelete
  11. You go girl! Thanks for such a detailed post-saving to my favorites when I get that daring! :O)
    Joanne
    Head Over Heels For Teaching

    ReplyDelete
  12. I LOVE your new buttons! They are so so cute :) Thanks for the amazing tutorial on how to do them, too!!

    Amelia
    wherethewildthingslearn

    ReplyDelete
  13. Good for you for making your own buttons! I'm so impressed!!!

    I didn't get to link up this week...I couldn't get my unit done that I wanted to share...summer is fun but the kids keep me busy! It would seem like there would be all this time...but there's not... :O)

    Have a great short week!
    Amanda
    Collaboration Cuties

    ReplyDelete
  14. Have pinned this for later when my brain is actively working. :)

    Shannon
    http://www.irunreadteach.wordpress.com

    ReplyDelete
  15. I am SO late to the linky this week Holly! I am going to add these buttons to my to do list though! Love you girl!!!

    Tina
    Crofts' Classroom

    ReplyDelete
  16. Thanks a bunch! I don't have these buttons so I can definitely work on this over the summer.

    Jessica
    Literacy Spark

    ReplyDelete
  17. Thanks so much for the mention! These turned out just beautifully! =)

    ReplyDelete