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

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 > iframe{
		margin-top:-34px;
	}

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

  1. Rodmarck's Gravatar 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!

  2. james's Gravatar 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!

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>