Adding Product Short Description to Pinterest Button

[Whispar1]

I am having a problem coding the pinit button. The pin works fine, but in addition to pulling the product name, I would also like it to add the description like the facebook share does (either short or long description - have not decided what is best yet)

 

Facebook share pulls the description from the Product Schema description tag - however pinterest does not.

 

I am using the addshoppers module so I don't know if that is causing some issues. They have been very helpful with trying to come up with a solution but nothing yet. Maybe is better to do a standalone pin button?

 

[fishordog]

Have you tried using another sharing tool instead of addshoppers? I'm using addthis and it pulls meta title when sharing, so maybe you can modify it so it will pull short desc. instead

Edited May 3, 2014 by fishordog (see edit history)

[NemoPS]

My free open graph module should support rich pins as well, you can give it a try (in my addons store)

[Whispar1]

I use to have addthis - I may consider going back to it if I cant get this worked out. Rich pins are important for our business because of the type of products we have.

 

Nemo, thank you. I actually have your module installed but it did not work so I ended up using your tutorial and modified my products.tpl file. Still not sure why it will not pull the product description but the facebook share does.

[Whispar1]

Okay so with this code, the pinit button will pull the long description:

<script type="text/javascript">
AddShoppersTracking.coupons = {
        pinterest: {
            text: '{$product->name} {$product->description}'
        }
    };
</script>

However, the description is often too long for a pin so I want to pull from the short description.

<script type="text/javascript">
AddShoppersTracking.coupons = {
        pinterest: {
            text: '{$product->name} {$product->description_short}'
        }
    };
</script>

But this does not recognize description_short and as a result, does not pull ANY description, just the title tag. Can anyone see what I might be missing here?

[Whispar1]

Okay - since facebook pulls its description from the schema tags - is there anyway to force pinterest to do the same?

Can anyone show me an example of a site running prestashop that has rich pins that adds the short description to the pin?

[NemoPS]

I must admit I am not familiar with rich pins as I don't use pinterst!

I found this module, but it's paid
 

http://addons.prestashop.com/en/social-commerce-facebook-prestashop-modules/8392-pinterest-rich-pins.html

 

And here is the rich pins documentation: https://developers.pinterest.com/rich_pins/

[Whispar1]

Thank you for the reply Nemo

We have already gone through the development documentation and been approved to use rich pins, thank in part to your tutorial

 - thank you for that! http://nemops.com/prestashop-google-rich-snippets/#.U3OfKvldXzI

 

The only problem I have is with the script and I assume it is a Prestashop issue.

If I use this script it works but of course the long description is too long for a pin:

<script type="text/javascript">
AddShoppersTracking.coupons = {
        pinterest: {
            text: '{$product->name} {$product->description}'
        }
    };
</script>

But if I use this variation to use the short description, it does not give the short description and I am not sure why?

<script type="text/javascript">
AddShoppersTracking.coupons = {
        pinterest: {
            text: '{$product->name} {$product->description_short}'
        }
    };
</script>

[NemoPS]

Uhm, that's weird! Are you adding that to product.tpl? Where exactly?

Also, remember to wrap your script with a cdata block as best practice

[Whispar1]

Yes, in product.tpl in the product ratings hook. cdata added

<script type="text/javascript">
// <![CDATA[
AddShoppersTracking.coupons = {
        pinterest: {
            text: '{$product->name} {$product->description_short}'
        }
    };
//]]>
</script>
<p style="margin-bottom: 2px; color: #0000ff;">Like this product? Share it with your friends!</p>
<div class="share-buttons share-buttons-fb-like" data-style="button_count" data-counter="none" style="height: 20px; vertical-align: middle;"></div>
<div class="share-buttons share-buttons-pinterest" data-style="none" data-counter="none" ></div>
<div class="share-buttons share-buttons-panel" data-style="medium" data-counter="none" data-oauth="true" data-hover="true" data-buttons="twitter,facebook,pinterest"></div>

Edited May 15, 2014 by Whispar1 (see edit history)

[NemoPS]

Small test: before the script, add {$product->description_short}, see if it works. As it's a hook, it might as well not be assigned to it

[Whispar1]

Thank You for trying Nemo - unfortunately it did not work. It is just very strange that {$product->description} works fine but {$product->description_short} does not. Makes no sense to me, especially since the facebook share adds the short description, but from product schema tag.

[NemoPS]

In that case the short description is simply not assigned to that hook, otherwise it would echo out

[Whispar1]

I have moved the script and the sharing tool to different locations on the product page and different hooks. Still the same problem - description works - description_short does not.

 

In fact, every single share (email, facebook, twitter, etc) all have the short description i.e. this example

Short Description: Aubree 6-Light Chandelier in Polished Nickel

http://www.whispardesign.com/chandeliers/646-aubree-6-light-chandelier

 

At this point, if there was a way to truncate the long description for the pinit button I would...

This is driving me nuts :/

Edited May 19, 2014 by Whispar1 (see edit history)

[NemoPS]

There is: {$product->description|truncate:100:'...':true}

[Whispar1]

Thank you kindly Nemo - that works. Although we could not figure our why description_short did not work, at least this is an acceptable solution for now

Edited May 21, 2014 by Whispar1 (see edit history)