Site Overlay

social media buttons: copy my code for your blog


imageToday I am sharing how you can make social media buttons (Facebook, Twitter, etc. like you see on the upper right corner of my blog) appear on your blog. Before I could do that, I first had to figure out how to put html code in my blog without it being interpreted as code. Here’s where I went to figure that out.

Rather than tell you all the steps I went through to find these pieces of code and what I did to make sure they were in a line and spaced mostly equally, I am sharing the finished product. Be sure to replace my code (i.e. what you see highlighted in red.) with yours in the appropriate locations, or else you’ll be sending people to my pages. Not so bad for me, but not so good for you either.

So here it goes:

<!– AddThis Button BEGIN –><br />
<div class=”addthis_toolbox addthis_32x32_style addthis_default_style”>
<br /><a addthis:userid=”pages/The-Lone-Home-Ranger/152804458160957″ class=”addthis_button_facebook_follow” href=”/”></a><br /><a addthis:userid=”lonehomeranger” class=”addthis_button_twitter_follow” href=”/”></a><br /><a addthis:url=”/feeds/posts/default” class=”addthis_button_rss_follow” href=”/”></a><br /><a href=”http://pinterest.com/justinerows/”><img alt=”Follow Me on Pinterest” height=”32″ src=”http://passets-cdn.pinterest.com/images/big-p-button.png” width=”32″ /></a>&nbsp;&nbsp;<br /><a class=”addthis_button_google_plusone_badge” g:plusone:href=”https://plus.google.com/u/0/100319055861196265499″ g:plusone:name=”” g:plusone:size=”medium” href=”/”></a></div>
<br /><script src=”http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f1f180c49681dba” type=”text/javascript”>
</script><br /><!– AddThis Button END –><br />

If you don’t know how to add HTML code to your sidebar, check my earlier button-making tutorial post that included those steps. Enjoy!

Editor’s note: This post is part of Teach Me Tuesday


Update (3-30-12): I have added buttons since I wrote this post, and rather than update the code each time I do this, I thought I’d write a quick tutorial for how you can do it yourself. First, find the image you want, like the GoodReads logo or a mail button. If it isn’t already hosted anywhere (i.e. in a place you can link up to), just swipe it from somewhere (HINT: FROM ME), put it in your Photobucket account (which you should have if you followed my button tutorial above), then copy and paste the code into the blog in a new line. Email me using my little email button if you’re confused!