AddThis Pintrest button hack to look better in 32×32 format

Written by james on April 30, 2012 — 2 Comments

Today I had to add a Pinterest Share button on our website, and run it through our AddThis account so we can track the analytics. Unfortunately, there are only two options for the Pinterest button via AddThis, neither of which look good along side our 32×32 style share buttons. So, I decided to hack it up =)

If you apply a fixed height to the a tag which holds the Pinterest button’s iframe, then set overflow to hidden, then apply a negative margin to the nested iframe, you can essentially get rid of that pesky count bubble that will not go away.

Resulting css is something like:

 
	.addthis_toolbox > a.addthis_button_pinterest_pinit{
		margin:8px 0px 4px;
		height:24px;
		overflow:hidden;
		vertical-align:baseline;
	}
	.addthis_toolbox > a.addthis_button_pinterest_pinit &gt; iframe{
		margin-top:-34px;
	}

2 Comments to “AddThis Pintrest button hack to look better in 32×32 format”

You can follow all the replies to this entry through the comments feed.

Rodmarck

August 16, 2012 at 10:51 pm | Permalink

Great post!
You know how I can replace the button image with css? I’d like it to be a size 16×16, but not using the addthis_button_pinterest_share.

Thanks!
james

August 19, 2012 at 7:38 pm | Permalink

Not sure, I only looked into making the bubble button fit in a 32×32 space. I’m sure AddThis will be coming out with fully supported Pinterest buttons and icons soon enough. Good luck!