How to install “link to us” link exchange widget

link to us button This is my second tutorial on adding a link exchange button/badge/banner widget to your blog. Unlike my previous link exchange button tutorial, where your readers need to copy and paste the button code into their blog, this method lets them install the button just by clicking a button -no code will be displayed, no copy-pasting required.

Note: This method only imports the button into a Blogger blog.

 

Installing the “Link to us” widget

  1. Login to your Blogger account.
  2. Go to Design > Page Elements.
  3. Click an Add A Gadget link.
  4. In Add A Gadget window, select HTML/Javascript .
  5. Enter the title of your widget. This is optional.
  6. Copy the code below and paste it inside content box.
    <center>
    <img src="YourButtonUrl" value="YourBlogName"/>
    <form action="http://beta.blogger.com/add-widget" method="POST">
    <input value="" name="widget.title" type="hidden"/>
    <textarea style="display:none;" name="widget.content">
    &lt;center&gt;&lt;a href="YourBlogUrl"&gt;&lt;img src="YourButtonUrl" title="YourBlogName"&gt;&lt;/a&gt;&lt;/center&gt;
    </textarea>
    <input value="http://www.bloggersentral.com/" name="infoUrl" type="hidden"/> 
    <input value="Grab this button" name="go" type="submit"/>
    </form>
    <span style="font-size: 80%;">Get this <a href="http://www.bloggersentral.com/2009/11/how-to-install-link-to-us-widget.html">widget</a></span>
    </center>
    Where:
    • YourButtonUrl is the link to your link exchange button, badge or banner.
    • YourBlogUrl is the URL of your blog.
    • YourBlogName is the name of your blog
  7. Click Save.

By now you should be able to see your button/badge/banner with a “Grab this button” button right below it, similar to the picture above.

 

Testing the widget

You want to test whether your link button installs correctly. Your readers will go through this same process when they want to grab your button.

  1. Go ahead click the “Grab this button” button. Add Page Element page will pop up: add page element
  2. Select the button recipient blog and enter the  gadget title (optional).
  3. Click Add Widget button to add the link to us button. You will be transferred to Page Elements page on the recipient blog.
  4. Drag the widget to reposition.
link button

If it installs correctly, you should be able to see your linked button or badge in your recipient blog, similar to the picture above but without the “Grab this button” part.

 

 

Testing the button link

To test the link, simply click on the button. The browser should take you back to your blog. If not, you might have entered a wrong URL. Go back to step 6 to correct it.

 

Enjoy!

39 comments to "How to install “link to us” link exchange widget"

joey perez November 30, 2009 at 9:53 AM    

I am not sure what part of this code to change the following. Which Lines on this code?
And what is the BUTTON URL?

* YourButtonUrl is the link to the button, badge or banner.
* YourBlogUrl is of course the url of your blog.
* YourBlogName is of course the name of your blog

Greenlava November 30, 2009 at 2:16 PM    

joey perez,
They're in code line 2 and 5.
You need to host your button, badge or banner on an image host such as Photobucket or Flickr. Then get the direct link to the button. That link becomes YourButtonUrl.

joey perez November 30, 2009 at 8:13 PM    

Do you mean change line 8 and not 5. Change bloggersentral to my url which would be conservativeunderground-joey?

Greenlava November 30, 2009 at 11:27 PM    

joey perez,
Oops I mean line 2 and 6.
"YourButtonUrl" --> as explained in comment no.2
"YourBlogUrl" --> "http://conservativeunderground-joey.blogspot.com/"
"YourBlogName" --> "Simply Reagan"

joey perez December 1, 2009 at 12:07 AM    

Thanks for your patience and all of your help. I followed all the instructions you have sent me but it will not work. In line 2 I changed the button url to "http://flickr.com/photos/prvette21/4147118582
I also changed in line 2 the blog name to SIMPLY REAGAN
I changed the above in line 6 and I also changed in this line to my url

I registered on FLICKR this morning and uploaded my button. I right clicked on the button on FLICKER and copied the URL which was
http://flickr.com/photos/prvette21/4147118582

I do see GRAB THIS BUTTON on my blog but not the button I uploaded

I then clicked on GRAB THIS BUTTON and in the new window used TEST for the TITLE.I saved it.
I then clicked on TEST but nothing happens. Sorry for all the inconvenience.

Greenlava December 1, 2009 at 11:23 AM    

joey perez,
We're nearly there :)
Your button url is incorrect. A direct image url should always ends with the image type extension such as jpg, gif or png.
To get the correct url go back to Flickr, click on the image. Then click on the "All sizes" icon on top of the image.
After that scroll down and you'll see the correct url inside the box under "2.Grab the photo's URL". Copy and use that url.

joey perez December 1, 2009 at 7:08 PM    

Got it working my friend, thanks for working me through it. I will now add your link to my Blog as you have proven to be very kind, helpful and informed.

Greenlava December 1, 2009 at 11:06 PM    

joey perez,
Congratulations! and thanks for the link :)

WebpageLottery December 17, 2009 at 10:33 AM    

It works pretty well. I got more than 10 visitor from "Link to us" widget.

Tammy January 24, 2010 at 11:43 AM    

Your site is so helpful. I have added a link on my blog at http://tammypanter.blogspot.com

http://tammypanter.blogspot.com/2005/01/other-links.html

Thank you so much!

Greenlava January 24, 2010 at 7:26 PM    

@Tammy
Thank you for linking.

Robin Hood Softwares April 24, 2010 at 1:03 AM    

I just added your website link in my blog. Check it out in the side bar.

Greenlava April 24, 2010 at 3:27 PM    

@Robin Hood Softwares
Hey thanks!

Robin Hood Softwares April 24, 2010 at 4:27 PM    

can you help me in creating a link widget like yours which is exactly same as I linked in my website( I mean your link) but with some large width and height.

Robin Hood Softwares April 24, 2010 at 4:29 PM    

I need a help. As you can see a divider between various posts in my blog, I need the same as comment divider. Please help me by creating a script for that.

Greenlava April 25, 2010 at 10:55 AM    

1. To make a badge, try GRSites Text Boxes

2. Find this code inside your template:
.commentmet_text {
SOME CODE HERE
}

and add this code inside the braces:
background:url(http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif) no-repeat center bottom;
margin-bottom:10px;
padding-bottom:20px;

Robin Hood Softwares April 25, 2010 at 11:12 AM    

Thank you my dear friend. You are great. If you need any softwares or games or any downloadable things, kindly contact me. Also I will add your badge on all my blogs without your permission. Is that Ok?

If I have any doubt in html or codes, I will ask you, dont feel bad to reply or help me. Thanks a lot dear BROTHER.

Greenlava April 25, 2010 at 4:57 PM    

@Robin Hood Softwares
Yeah it's ok.
Come back and ask questions anytime :)

Lynn Pratt August 19, 2010 at 7:20 PM    

You are truly amazing, even I made this work! Thank you so much!

Flor Martha S. Ferreira October 2, 2010 at 10:59 PM    

Thanks. I try to put your button link at my blog but the image is not working. If you fixed it I will place it at Vida em Sociedade http://vidaemsociedade-sa.blogspot.com/

Greenlava October 3, 2010 at 12:37 AM    

@Vidaemsociedade
Try the code from How to make a “Grab this” linkback button tutorial.

darcie November 25, 2010 at 10:16 AM    

ok...I give up...
help me....................
What am I doing wrong!?!

Greenlava November 26, 2010 at 12:44 AM    

@darcie
Could you be more specific as to what the problem is?

MUX SPARROW December 5, 2010 at 1:31 AM    

a q here:
how if our visitor is not from blogger platform? will they find some problem to add our banner to their blog??
thanks!

Greenlava December 5, 2010 at 3:27 PM    

@MUXLIMO
Yes they will.
Try this version instead:
How to make a “Grab this” linkback button

Artiss May 8, 2011 at 12:10 AM    

That's a great tool and working perfect! http://b21.in

youngminds75 July 6, 2011 at 5:04 PM    

hi bloggercentral i follow the guides you made how to make this link to us button...its great easy to follow dude.thanks big help.just added you

Best Electronics November 30, 2011 at 6:52 PM    

your article is very good... best regards from me..

Val February 10, 2012 at 2:03 AM    

Thank you for this easy tutorial. I added this widget today, thanks to you. :)

Unknown February 11, 2012 at 11:26 AM    

THANK YOU! I've been wanting a button for a long time but had no clue till I followed some thread here (again) learning how to use my image as a button. And it works - took a bit of time on my part due to not being familiar - used Picasa for my button URL which worked. Happened to have a second blogger blog so could test it out on myself. Thanks again.

Geosya February 13, 2012 at 10:38 AM    

I like to be here.. This is absolutely the best one!

Jude April 27, 2012 at 8:22 PM    

It appears that this only works for Blogger users. I tried it on www.checklistmag.com and it kept taking me back to my account. I want a code for general use, where anyone could link to my site. Can you help on that one?

Greenlava April 28, 2012 at 8:11 AM    

@Jude Chukwuemeka
Yeah you're right this tutorial only works for Blogger.
For general use try this tutorial instead.

DILHAN PADENIYA September 29, 2012 at 9:46 AM    

good.,.,. very Gud Post .,.,.

health chat October 10, 2012 at 7:47 PM    

Thanks much!

Anonymous,  November 27, 2012 at 3:16 PM    

Informative Blog !!

Thanks for Sharing

topSpot November 28, 2012 at 5:10 AM    

Thank you so much!

Andrean Perdana December 23, 2013 at 9:20 AM    

.
Thank You So Much..
Your site is so helpful..
.

Ogitchida Kwe's Book Blog April 19, 2014 at 11:58 AM    

Thank YOU! I was looking all over for a nice widget for our homeschool blog!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.