4. Making Shareable Widgets

A shareable widget can be a great way to share your blog with others! Sometimes when you see a new blog that you really want to share you'll display their blog widget on your own blog. Providing others with a shareable widget (or badge) gives others the opportunity to do the same and thus expose your blog to potential new readers. Displaying your favorite blog buttons is a great way to build the blogging community!

Here is how you can make your own:




Step 1:  Setting up the code

Copy and Paste the following code into an HTML/JavaScript Gadget on your sidebar (or into the HTML portion of a Post, or Page).

<center>
<a href="YOUR BLOG URL" target="_blank"><img border="0" src="YOUR IMAGE URL" width="100%"/></a><br /><input value="&lt;a href=&quot;YOUR BLOG URL&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;YOUR IMAGE URL&quot; width=&quot;100%&quot; /&gt;&lt;/a&gt;" onclick="this.select()" type="text" />
</center>

Step 2: Getting your image URL

Upload your button image (I use both Flickr and Photobucket) and copy image URL.

TI_image_url


Step 3: Customizing the code to your blog

Paste your image URL into your HTML Gadget where I have indicated in red, and then paste your FULL website/blog URL also where indicated in blue. Save your work and enjoy your new shareable widget!
♥ at

7 comments:

  1. beeApril 14, 2013 at 5:06 PM

    Hello : ) I'm loving all thins learning and have added a button to my page but the code doesn't appear to be underneath it- is that what;s supposed to happen lol?

    ReplyDelete
    Replies
    1. Talia ChristineApril 14, 2013 at 5:29 PM

      Hi Becky!

      Thank you for your question! I've had a look at your blog and it looks like you might be missing some code (when you pasted it in perhaps?)

      You'll have to enter in your BLOG URL and IMAGE URL twice where indicated (once in each spot, two times total) and then paste the whole thing into your sidebar widget. One set of the blog URL's and the image URL's is for the button, the other set is for the shareable code portion.

      Please let me know if I can answer any more questions or if I can help clarify further! xo

      Delete
    2. Talia ChristineApril 14, 2013 at 9:30 PM

      EEK! So I've looked further into this and it seems that Blogger actually changed how the "textarea" code was translated and was deleting the information resulting in a blank box.

      I've updated the entire code and it should work now! Just copy and paste the updated code in the post above and follow the directions as normal now :)

      Delete
  2. Lauren April 14, 2013 at 9:00 PM

    This comment has been removed by the author.

    ReplyDelete
  3. Lauren April 14, 2013 at 9:03 PM

    Hi, I followed these instructions and the code underneath box is blank, am I missing something? I entered everything in twice.

    ReplyDelete
    Replies
    1. Talia ChristineApril 14, 2013 at 9:29 PM

      Thanks, Lauren! The good news is you probably did everything right! I've looked into this and it seems that Blogger actually changed how the "textarea" code was translated and was deleting the information resulting in a blank box.

      I've updated the entire code and it should work now! Just copy and paste the updated code in the post above and follow the directions as normal now :)

      Delete
  4. beeApril 29, 2013 at 4:53 PM

    thank you, I think I fixed it! : )

    ReplyDelete

We are happy to answer any questions about the workshop material. Fire away, lovelies!

Subscribe to: Post Comments (Atom)