Add Pinterest "Pin It" button to "AddThis" on product pages

ThemeBurn SupportForumsOpenCart ThemesShoppica OpenCart ThemeAdd Pinterest "Pin It" button to "AddThis" on product pages

This topic has been marked as resolved.

I want to add a Pinterest “Pin It” button to the “AddThis” section of the product page along with Google +1, Tweet and Facebook Like.

Here is sample code from AddThis’s website to create a horizontal button in the same fashion as mentioned above.

<a class="addthis_button_pinterest" pi:pinit:url="http://www.apple.com" pi:pinit:media="http://images.apple.com/home/images/hero.jpg" pi:pinit:layout="horizontal"></a>

Can you provide the code for it’s integration into Shoppica in the same manner as the other AddThis buttons already provided?

Thanks,
Al

February 6, 2012 at 8:13 pm #5939

Hi Al,

Take a look at this topic:

http://support.themeburn.com/topic/when-click-facebook-like-button-it-doesnt-show-the-thumbnail-description-title-on-the-wall

We have shown there, how to insert the newest AddThis initialization code.

Best,
ThemeBurn team

February 7, 2012 at 11:36 am #5959

After posting here I had done that and ran into a problem with the formatting. See attached photo. The “Pin It” button appears on the next line. I can’t seem to find the css settings to change.

Any ideas?

I am assuming that the css formatting is gotten from addthis.com through the script defined by:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e20919036eba525"></script>

The pubid being used is yours I am assuming. Should I be creating my own account then and customizing it from there?

Thanks,
Al

  • This reply was modified 4459 days ago by  freakyal. Reason: adding more thoughts
February 7, 2012 at 11:51 am #5964

Okay after some research and testing of css settings for addthis div id’s I found out that Pinterest hasn’t built a sharing API yet. As a result the addthis functionality is limited and they are treating it as a third party button until an API is released.

I guess I am stuck with the crappy formatting for now.

February 7, 2012 at 12:46 pm #5967
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
February 8, 2012 at 10:40 am #5985

Hi,

Here is the code I used in catalog/view/theme/shoppica/template/product/product.tpl for the pinterest button, in case anyone wants it. It provides your url and img/media information specific to the product.


<a class="addthis_button_pinterest" pi:pinit:url="<?php echo CURRENT_URL; ?>" pi:pinit:media="<?php echo $thumb; ?>" pi:pinit:layout="horizontal"></a>

Cheers,
Al

February 21, 2012 at 1:09 pm #6396

Thanx Al, saved me some work :-)

August 27, 2012 at 4:29 pm #12954

Hi!

I’ve just used the code Al also used. But when trying to Pin a product with the button on my product page it won’t work.

The image won’t Pin and isn’t viewable on my Pinterest Board, i get attached screen. I’ve just copied the code Al also used right beneath the Add this Facebook button in my product.tpl.

Anyone an idea on how to fix this?

 Rovara
July 1, 2013 at 1:14 pm #25008
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
July 3, 2013 at 3:44 pm #25108

Thanks!!

This worked for me!

 Rovara
July 3, 2013 at 9:24 pm #25124

@Rovara

Glad we’ve helped :)

July 5, 2013 at 5:34 pm #25199
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.