Create a blog share button with HTML grab code

Todays tutorial will show you how to create a share button for your blog with a grab box. Although they aren’t used as much these day, it’s still pretty handy to have one available on your blog. With a share button, your readers can easily grab the code and paste it on their own blogs which will link back to you. You’re button should be interesting, let people know what your blog is about and entice people to click it (a call to action usually works).

1. Create the image using Photoshop, GIMP or an alternative image editing program. Take note of the size in Pixels (px) as we’ll need that later. Design your blog button to match your branding, keeping it simple and easily recognised.

2. Upload the image to your blog or a photo hosting site such as Photobucket, Flickr, Google Plus, Dropbox, etc.

3. Now add the following code to your blog – either on a page, post, gadget or widget. If you’re on Blogger, make sure your in HTML rather than compose or rich text mode.

<a href="LINK TO BLOG" target="_blank" title="BLOG NAME"><img style="width: WIDTHpx; height: HEIGHTpx;" alt="DESCRIPTION/BLOG NAME" src="DIRECT URL TO IMAGE LINK" /></a><br /><textarea style="width: WIDTH OF BOX px; height: HEIGHT OF BOX px;" id="code-source" rows="3" cols="13" name="code-source"></textarea>

4. Before </textarea> paste the following code which when published in between the textarea tags will turn into a linked image. This is what the user will see in the share box.

&lt;a href=&quot;URL&quot;&gt;&lt;img src=&quot;DIRECT IMG URL&quot; border=&quot;0&quot;&gt;&lt;/a&gt;

The full code is also available here in a cleaner format if you’re having trouble with the code above.

5. Now add your details – first add your blog link and image link, then add your blog description or tagline. Finally, add the size of the image and the size you want the HTML grab box. Now your readers can easily grab the code from the box and add it to their blogs. Try it out below.

blog tips, design tutorials, blogger and wordpress templates

Buy me a coffeeBuy me a coffee

63 Comments

  1. Hi Ellie,

    Thank you for this and all your tutorials! They’ve helped me out so much πŸ™‚

    I’ve been meaning to make a blog button for ages, just added yours to my page.

    Thanks again, Nic xx

    1. This means that your image can’t be found. I notice you’re using div to centre align the code, this should be placed around the entire code, not in between it. Also the div has no id and doesn’t relate to anything in the CSS, this could also be causing a problem. This is how your code should look. Hope this helps x

      <div align="center">
      <a href="URL" target="_blank" title="Simply The Sutters"><img style="width: 159px; height: 109px;" alt="Simply The Sutters" src="http://i39.tinypic.com/2vxhikw.jpg" /></a><br /><textarea style="width: 160px; height: 50px;" id="code-source" rows="3" cols="13" name="code-source"><a href="URL"><img border="0" src="http://i39.tinypic.com/2vxhikw.jpg"/></a>
      </div>
      Simply The Sutters

       
       

      How to give your div an id and use css to centre…

      <div id="centerimage">
      ...
      </div>

      Then in your css

      #centerimage {text-align: center;} 
  2. Hello!
    Thanks ever so much for the tutorial! I’ve tried every single tut on the internet and nothing seems to work. it’s either the dropbox text comes up with no image OR the image comes up with no drop box text. Please, please, please could you help?

    I used your tutoral which is excellent but the image comes up with no drop box text? Any help for this?

    Thanks so much,
    Zofia x

    1. You need to make sure not to place anything in between the code. This is the code you need to use πŸ™‚ x

      <a href="URL" target="_blank" title="Little Miss Prada xo"><img style="width: 200px; height: 200px;" alt="Little Miss Prada xo" src="http://i1251.photobucket.com/albums/hh452/xzofiaatamzin_/large-3.png" /></a><br /><textarea style="width: 200px; height: 50px;" id="code-source" rows="3" cols="13" name="code-source"><a href="URL"><img border="0" src="http://i1251.photobucket.com/albums/hh452/xzofiaatamzin_/large-3.png"/></a></textarea>

  3. Hi, I’ve tried a couple of tutorials to make my own blog button with a grab box and this is the one that has worked the closest. I get the image up and the box for the text but it is empty too. I’m not sure what I’m doing wrong?

    1. This is your code <a href="URL" target="_blank" title="She's Eclectic"><img style="width: 125px; height: 125px;" alt="She's Eclectic" src="http://i1104.photobucket.com/albums/h334/marriedjuly03/photo34a.jpg"></a><br><textarea style="width: 125px; height: 100px;" id="code-source" rows="3" cols="13" name="code-source"></textarea>

      You’re missing the link part within the textarea, should look like this

      <a href="URL" target="_blank" title="She's Eclectic" rel="nofollow"> <img style="width: 125px; height: 125px;" alt="She's Eclectic" src="http://i1104.photobucket.com/albums/h334/marriedjuly03/photo34a.jpg" /></a> <br /><textarea style="width: 125px; height: 100px;" id="code-source" rows="3" cols="13" name="code-source"><a href="URL" rel="nofollow"><img border="0" src="http://i1104.photobucket.com/albums/h334/marriedjuly03/photo34a.jpg"/> </a> </textarea>

      She's Eclectic

      1. Thank you for your help! I’m not sure why but when I cut and paste the code and save it Blogger manages to lose some of it? It’s taken me a few goes and some hair pulling and muttering under my breath (aimed towards Google lol!) but I’ve done it πŸ˜‰ Thanks again.

  4. I’ve literally spent hours trying to make this work from many different tutorials on the web….and I’m not having any success πŸ™ The picture tab shows up but the box for people to grab the code is empty. I would so appreciate some help!

    1. Just had a look at the code you are using, you are missing the part in between <textarea> and </textarea>. Make sure you’re copying the entire piece. Let me know how you get on okay πŸ™‚

      <textarea style="width: WIDTH OF BOXpx; height: HEIGHT OF BOXpx;" id="code-source" rows="3" cols="13" name="code-source"><a href="BLOG LINK"><img border="0" src="DIRECT URL TO IMAGE LINK"/></a></textarea>

  5. I love your tutorials and I am so close with this one. Every thing works fine, and the code come up in the box when I hit “rich text,” but as soon as I click save and preview my profile, my box is blank. Any ideas?

  6. I’ve tried everything and can’t get any text to show up in the box! I get my picture but nothing in the box! Please help!! elizabethkmcdowell.blogspot.com

    1. Hello Elizabeth, very sorry! Blogger seemed to be striping some of the code out so I’ve rewritten the code above, should work now πŸ™‚ x

  7. Hello! Love your tutorial. The only issue I am having is that my image isnt there, it is a box with a question mark is it. I redid it twice. Any clue how I fix this?

    Thanks!

    1. Hello! Sorry about the delay, I’ve been quite ill this week. Make sure you’re using the direct image URL from your photo hosting site and not the url to the page πŸ™‚ xx

    1. Hello, make sure to put your information into the second part in between the textarea tags. Have a look at your button right now, see the URL & Image URL (shown in pink below) are missing from the box, so if someone copies it your button won’t appear. You need to fill in that information <a href="URL"><img src="DIRECT IMG URL" border="0"></a>
      . Thanks for sharing my button πŸ™‚

  8. I stumbled across your blog & am so glad I did! I used your tutorial and got my button up & running (I’m sure thousands of people are swarming my site now to get it πŸ˜‰ ) I’m definitely a new fan of your blog & hope to learn lots from your site! — I added your button to my page as well!

    -Emily

  9. OK so your tutorial didn’t work, blogspot hated it, but when I scrolled down and looked at the codes you suggested one finally kind of worked and I tweaked it, but what happens is:

    I can get the picture and the text box to show up but without the text on my side bar, but using the same code I can make a post and get the entire thing to show up.

    Then when I click the link from the text box image, it brings me to my page but says this page can not be found because it has URL at the end of it.

    Here is the cluster of a code it made…any help?

    <a href="http://vtfreebiegirl.blogspot.com/&quot; imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a> <br />
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://vtfreebiegirl.blogspot.com/&quot; imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://i1032.photobucket.com/albums/a405/vtfreebiegirl/button_zps1676b7ff.jpg&quot; imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1032.photobucket.com/albums/a405/vtfreebiegirl/button_zps1676b7ff.jpg&quot; /></a></div>
    <div style="text-align: center;">
    <textarea cols="13" id="code-source" name="code-source" rows="3" style="height: 100px; width: 147px;"><a href="URL" rel="nofollow"><img border="0" src="http://s1032.photobucket.com/user/vtfreebiegirl/media/button_zps1676b7ff.jpg.html&quot; target="_blank"><img src="http://i1032.photobucket.com/albums/a405/vtfreebiegirl/button_zps1676b7ff.jpg"/&gt; </a> </textarea></div>

    My email is vtfreebiegirl at gmail dot com, thank you!

    1. Hello, you’ve added extra coding as well as divs in order to centre different sections (probably by adjusting it using Blogger) which is why it won’t work. I’ve emailed you with the exact code, so just copy and paste it into the html gadget – make sure you’re in edit html and not rich text.

      1. Thank you so much for taking the time to help me, I finally have a button after 3 years of being a blogger πŸ™‚

  10. Thank you for your tutorial! I’ll be spending some time this evening creating my grab button for Raising A Family On A Budget. I was hoping to include the grab box to the right of the image instead of underneath, but for the life of me I can’t figure out what part of the html to edit. Any thoughts?

    1. Hello, use the following to align the image on the left and the grab box on the right. You can adjust the widths and height to fit properly depending on the size of where you’re putting it. If it’s going in a larger space, remove the floats and add a padding. Hope this helps!

      <a href="LINK TO BLOG" target="_blank" title="BLOG NAME"><img style="width: 120px; height: 100px; float: left;" alt="DESCRIPTION/BLOG NAME" src="DIRECT URL TO IMAGE LINK"></a><textarea style="width: 120px; height: 100px; float: right;" id="code-source" rows="3" cols="13" name="code-source">

      &lt;a href=&quot;URL&quot;&gt;&lt;img src=&quot;DIRECT IMG URL&quot; border=&quot;0&quot;&gt;&lt;/a&gt;

      </textarea>

  11. Hi! I found this really helpful! The only problem is the image does not so up. πŸ™ The box however shows up where the link is in. I don’t know what to do! Can you please help me?

    1. Here’s the exact code you need to use. Remember to add the direct image URL in the correct two places

      <a href="http://eveofwomanhood.blogspot.com" target="_blank" title="eveofwomanhood"><img style="width: 200px; height: 200px;" alt="eveofwomanhoodE" src="DIRECT URL TO IMAGE LINK " /></a><br /><textarea style="width: 200px; height: 30px;" id="code-source" rows="3" cols="13" name="code-source">
      &lt;a href=&quot;http://eveofwomanhood.blogspot.com&quot;&gt;&lt;img src=&quot; DIRECT IMG URL &quot; border=&quot;0&quot;&gt;&lt;/a&gt;
      </textarea>

  12. After trying few codes for the grab me button, it finally works! Thanks heaps to your tutorial code. I’d put your button in my sidebar

  13. Love this tutorial! Finally got a button! yay! Thankyou so much, this turned out great! Just grabbed your button too πŸ™‚

  14. Did it! Hurrah!!! πŸ˜€

    THANK YOU! Your tutorials have been a lifesaver today. Managed to get the drop-down menu working too! Woop woop! xx

  15. I have literally spent all evening swearing at my computer trying to get different codes to make my badge appear, and yours worked perfectly first time!
    Thank you for this post!

    xx

  16. You are a lifesaver! I’ve been trying to work with Blogger to add my button for a couple of hours and finally found your tutorial. I’ve also added your button to my blog! Thank you so much!

  17. Hi, I have been trying to work through this tutorial- and am having some problem. If there is anyway you can help me, please feel free to email me. The help would be greatly appreciated!!!

Sorry, comments are closed!