Reply
Administrator
Julia_C
Posts: 7
Registered: ‎02-16-2011

A New Badge--Add Your Own Covers!

Add this new custom badge to your website or blog and show readers your cover. When clicked it leads readers directly to your product page.

 

 

Step 1: Copy and paste the code below into your web page or blog.

 

Step 2: Replace the 2 locations in the code that now appear as XXX’s with your title’s EAN number (located on your product details page.) Be careful not to add extra characters or spaces.

 

Step 3:  Add your cover. On BN.com, pull up a search page to show your cover as a thumbnail. Right click on your cover image then scroll down and click on properties. A pop up window will appear. Copy and paste the Address (URL) into the location in the code below that says image-url-goes-here. Again be careful not to add in extra characters or spaces.

 

Here's the code you'll need:

 

<a style="display:block; width:180px;" title="I'm a PubIt! Author! Buy my book on BN.com" rel="nofollow" href="http://search.barnesandnoble.com/books/product.aspx?EAN=XXXXXXXXXXXXX&cm_mmc=Pubit-_-Badge-_-Blog-_-XXXXXXXXXXXXX" target="_blank">

 

<p style="background:url(http://img1.imagesbn.com/pimages/pubit/resources/pubit_badge_custom.jpg) no-repeat; width:180px; height: 152px;">

 

<img src="image-url-goes-here" width="70" border="0" style="margin: 23px 0 0 7px;" />

 

</p>

 

</a>

 

Frequent Contributor
JenniferBecton
Posts: 39
Registered: ‎11-30-2010
0 Kudos

Re: A New Badge--Add Your Own Covers!

I can get the thumb of my book, but the PubIt badge part is missing. What am I doing wrong?

Administrator
Julia_C
Posts: 7
Registered: ‎02-16-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

Try removing the spaces between the lines of code. Some blog editors add in break symbols.

 

Hope this helps!

 

Frequent Contributor
cebj25
Posts: 58
Registered: ‎04-03-2009
0 Kudos

Re: A New Badge--Add Your Own Covers!

I can get it to work perfectly well on my Wordpress blog, but not on Blogger or Webs.com. The picture isn't aligned, it's either below the "I'm a Pubit author" or overlapping it.

 

Cool idea though.

Administrator
Julia_C
Posts: 7
Registered: ‎02-16-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

I got it to work in Blogger! Blogger adds tags to mark the spaces. If you take out the spaces before you paste it into the editor, the tags aren't added.

 

Hope this helps!

Frequent Contributor
ScottNicholson
Posts: 32
Registered: ‎06-11-2010
0 Kudos

Re: A New Badge--Add Your Own Covers!

Which spaces, Julia? All of them?

 

Scott

Trading words for magic beans.
Contributor
Gooberella
Posts: 8
Registered: ‎01-17-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

Excellent! Thanks :smileyhappy:

 

 

 

 

Angel in a Fur Coat 

 

Gooberella
Frequent Contributor
LocoDuc
Posts: 29
Registered: ‎09-01-2008
0 Kudos

Re: A New Badge--Add Your Own Covers!

[ Edited ]
 
Adam Santo
Author of the Temperature Trilogy

I'm a PubIt! Author! Buy my book on BN.com

Administrator
Julia_C
Posts: 7
Registered: ‎02-16-2011

Re: A New Badge--Add Your Own Covers!

The spaces between the lines. Like this:

<a style="display:block; width:180px;" title="I'm a PubIt! Author! Buy my book on BN.com" rel="nofollow" href="http://search.barnesandnoble.com/books/product.aspx?EAN=XXXXXXXXXXXXX&cm_mmc=Pubit-_-Badge-_-Blog-_-XXXXXXXXXXXXX" target="_blank">

<p style="background:url(http://img1.imagesbn.com/pimages/pubit/resources/pubit_badge_custom.jpg) no-repeat; width:180px; height: 152px;"><img src="image-url-goes-here" width="70" border="0" style="margin: 23px 0 0 7px;" /></p>

</a>

 

Frequent Contributor
LocoDuc
Posts: 29
Registered: ‎09-01-2008
0 Kudos

Re: A New Badge--Add Your Own Covers!

 
Adam Santo
Author of the Temperature Trilogy

I'm a PubIt! Author! Buy my book on BN.com

New User
Lindsay_E
Posts: 1
Registered: ‎02-27-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

Thank you for this excellent badge. Got it to work in one try!

 

Lindsay

 

Cel & Anna: A 22nd Century Love Story

 

www.celandanna.com

Contributor
OUBob
Posts: 5
Registered: ‎02-22-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

I've tried this over and over until I'm blue in the face!  I cannot get this to post the badge.  I can get a link to my book but that's it.  I tried copying/pasting your link below and inserting my book number and thumbnail cover and I still get a link to my book and nothing else.  What am I doing wrong?

 

Thanks for your help.

 

OUBob

Frequent Contributor
JustReadItCLK
Posts: 35
Registered: ‎11-30-2009
0 Kudos

Re: A New Badge--Add Your Own Covers!

I have been trying forever, but cannot get this to work.

I can only get the book cover to show, but not the publit background.

I've tried deleting spaces between the paragraphs and I've followed directions to a "T"

I've never had this much trouble with a widget before.

Not sure what I'm doing wrong :smileysad:

Reader 2
hawkssr
Posts: 3
Registered: ‎12-24-2010
0 Kudos

Re: A New Badge--Add Your Own Covers!

[ Edited ]

Am not succeeding at this :smileysad:

Contributor
davidd68
Posts: 11
Registered: ‎04-09-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

How does this badge help me?

Contributor
ChrisHoward
Posts: 5
Registered: ‎06-08-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

Removed spaces, added image URL and links to the book.  Works great. Thanks!

 

Chris

New User
MSM23
Posts: 1
Registered: ‎04-13-2011
0 Kudos

Re: A New Badge--Add Your Own Covers!

Help!  I got the image to look fine by taking out all the extra spaces as shown in this thread.  Thanks for getting me that far.

 

However, when I try to click on the links, I just get a clicking sound and an exclamation point next to the little hand.  I assume that means it's not recognizing the URL embedded in the html.

 

Any ideas?  I have gone over it closely, matched it up to the samples in this thread, and even copy/pasted it into a browser and it worked.

 

Thanks in advance.

New User
BradMurgen
Posts: 1
Registered: ‎01-10-2012
0 Kudos

Re: A New Badge--Add Your Own Covers!

[ Edited ]

The key is making sure to remove any space that might be added after each line break.

 

When I tried using this on Blogger, however, my cursor was not changing to the hand that denotes a clickable element, even though the link was there.  Maybe because the link is tied to the paragraph element as opposed to the background image?  Anyway, to get around this I just added some css style tags to the paragraph element to change the cursor to the hand you should have.

 

So I used the below.  The two types of cursor tags should cover all the major browsers.

 

<a style="display:block; width:180px;" title="I'm a PubIt! Author! Buy my book on BN.com" rel="nofollow" href="http://search.barnesandnoble.com/books/product.asp​x?EAN=XXXXXXXXXXXXX&cm_mmc=Pubit-_-Badge-_-Blog-_-XXXXXXXXXXXXX" target="_blank"><p style="background:url(http://img1.imagesbn.com/pimages/pubit/resources/p​ubit_badge_custom.jpg) no-repeat; width:180px; height:152px; cursor:hand; cursor: pointer;"><img src="image-url-goes-here" width="70" border="0" style="margin: 23px 0 0 7px;" /></p></a>

Reader 2
Dee4DIT
Posts: 3
Registered: ‎02-29-2012
0 Kudos

Re: A New Badge--Add Your Own Covers!

Hi Julia,

I just wanted to thank you for the badge you provided with the code and all. I was able to get it on the site I run for author D.I. Telbat and we are happy with it! Thanks a lot! :smileyhappy:

Dee

 

Contributor
TheLadyWrites
Posts: 6
Registered: ‎03-29-2012
0 Kudos

Re: A New Badge--Add Your Own Covers!

Thank you. I added this to two of my sites. I'm attempting to adjust the size on one of them but it seems an effective option. It's a great addition to the site too. Thank you for sharing your hard work w/ all of us :smileyhappy: