Pinterest (Pin It)

Well I got a question about adding Pinterest to a site the other day and I can't seem to be able to figure out how to do it.



What I'm trying to do is put the Pinterest icon on each of my product pages and then pass the information on to Pinterest so people can add my products to their wall.



I'm able to get the icon on the pages just fine, but I can't seem to be able to pass the information along.



I need:



The product URL

The image URL

The product name



Has anyone done this? Can you please help?



On a side note, I've never heard of Pinterest until the other day, but when I asked my wife about it, she totally knew what it was. She actually has her own wall and everything. I guess my sister, my mom, and some of my wife's friends also use Pinterest. It kind of sounds like a chick thing to do so I'm not sure how much it will help me, but maybe for you guys/gals that sell chick stuff, this might help.



Thanks,



Brandon

It's definitely popular - Send me an email when you can brandon, think mine are heading to your junk mail box.

I've actually gotten sales from Pinterest. For my demographic it's very popular.

This article has detailed info about a “pin it” button.



[url=“How to Use Pinterest for Your Ecommerce Business - Practical Ecommerce”]http://www.practicalecommerce.com/articles/3297-How-to-Use-Pinterest-for-Your-Ecommerce-Business[/url]

Did you ever figure this out, Brandon? Pinterest is wildly popular with my customers and I am hoping to find something before I get left in the dust. :)



The above article does not address this issue. We need something like the facebook like code that can be put into the template to display on every page.

I came up with some code that will get everything except an image, which is of course the most important part!


```php

http://pinterest.com/pin/create/button/?url={$index_script}?dispatch=products.view&product_id={$product.product_id}&description={$product.product|unescape} {$product.full_description|unescape|strip_tags|truncate:280:”…“}” count-layout=“horizontal”>Pin It


```



I need to play with the description. 280 was too long for me. Also, I didn't get the 'Pin It' button with that code; it was just a text link. It obviously has some errors. I will test it later when I have more time.



I would love to have a pin it button that acts like the 'pinmarklet' that pinterest provides for browsers. Wordpress has a 'pin it' button that functions the same… when you click it, a window pops up allowing the user to select the image. The user also has to specify the description. I believe both use javascript.

Another member here on the forum that goes by Kathiew actually came up with a great solution. I had Alt-Team do a mod for me, but it doesn't seem to work quite right.



I ended up changing Kathiew's code a bit though to match it up to my Add This code. The code I'm using is:


```php



{/literal}


{literal}Pin It{/literal}
```

You'd put this in your skins/your-skin/customer/blocks/product_templates/default_template.tpl

Below:

```php {assign var="rating" value="rating_`$obj_id`"}{$smarty.capture.$rating}
{assign var="sku" value="sku_$obj_id"}{$smarty.capture.$sku} ```

Or, obviously it would be better to use the hook.

Then for the style, I'm using is:

```php .pinterest-button:hover {
opacity:0.8;
} ```

And I've attached the image to this post.

I hope that helps and please don't forget to thank Kathiew

Thanks,

Brandon

pinterest.png

Brandons solution works great, but I wanted the pin it button next to my Facebook Like button, in the same size and shape.



So I took Kathiews code, and implemented it in cs-carts facebook like button add-on.



How?



First, you have to have cs-carts facebook like button installed. In the add-on settings choose BUTTON and DISPLAY ON PRODUCT PAGE if you just want the like button, like me.



First grab a pinterest button you like. I choose the Pin It button (see attachment) that has the same size as the facebook like button. Upload this to your server as /images/pinterest.png



Take /skins/YOUR_SKIN/customer/addons/facebook/views/components/like_it_button.tpl



And replace all code with:


```php

{if $display == “Y”}

{literal}Pin It{/literal}


{/if}
```

This has nothing to do with the above, but if you have problems with the facebook like button asking for a comment (like many users have) here is the fix for that:

[color=#282828][font=arial, verdana, tahoma, sans-serif][size=3]Add[/size][/font][/color]

```php
.fb_edge_comment_widget {
display: none !important;
}
```

[color=#282828][font=arial, verdana, tahoma, sans-serif][size=3]to your skins styles.cs[/size][/font][/color]s

Flow,



You have to press the button that says “More Reply Options” right next to the Post button. From there, you can add an attachment.



I am wondering though. Besides your image being different, what is the difference between your button and the one that the code above adds?



Thanks,



Brandon

Aah, found it.



About the difference… not much! It’s just a very easy way to get a pinterest button and make it look nice at the same time for people who are using cs-carts Facebook Like button add-on, without having to edit a core template file. That’s it! :)



See attachment for looks… isn’t that pretty? (ok so i’m definitely around too many women lately)

[quote name=‘Flow’ timestamp=‘1328809648’ post=‘130919’]

Aah, found it.



About the difference… not much! It’s just a very easy way to get a pinterest button and make it look nice at the same time for people who are using cs-carts Facebook Like button add-on, without having to edit a core template file. That’s it! :)



See attachment for looks… isn’t that pretty? (ok so i’m definitely around too many women lately)

[/quote]





How did you get the facebook like button under the add to cart button?

[quote name='Kayokoko Swimwear' timestamp='1328811732' post='130927']

How did you get the facebook like button under the add to cart button?

[/quote]



Use the facebook add-on that comes with cs-cart (or is downloadable here: http://forum.cs-cart…le-for-testing/)

[quote name=‘Flow’ timestamp=‘1328812444’ post=‘130928’]

Use the facebook add-on that comes with cs-cart (or is downloadable here: http://forum.cs-cart…le-for-testing/)

[/quote]



Mine only allows me to move the facebook block within the product details section of the produt page. :(

Thanks so much! I have an older version of cs-cart so the fb addon is out for me, but I have my own like button. I’ll play around with this. I appreciate all the info!! :)



Update: It worked great… Love it! Thanks again!

[quote name=‘Flow’ timestamp=‘1328809648’ post=‘130919’] Aah, found it. About the difference… not much! It’s just a very easy way to get a pinterest button and make it look nice at the same time for people who are using cs-carts Facebook Like button add-on, without having to edit a core template file. That’s it! :) [/quote]



Thanks! It works perfectly for me this way! ^^

[quote name=‘Flow’ timestamp=‘1328809648’ post=‘130919’] Aah, found it. About the difference… not much! It’s just a very easy way to get a pinterest button and make it look nice at the same time for people who are using cs-carts Facebook Like button add-on, without having to edit a core template file. That’s it! :) See attachment for looks… isn’t that pretty? (ok so i’m definitely around too many women lately) [/quote]



Thanks Flow. I have installed this and it works great. I just have a problem with the layout. As you can see on the screenshot the facebook line is positioned below the pin it button.



I can see what the problem is - it’s the facebook iframe element style being set to width = 450px. If I change it to 300px using firebug both buttons show on the same line. I have tried adding

<br />
.fb_ltr {<br />
width: 300px;<br />
}<br />

```<br />
to skins/myskin/customer/styles.css but it makes no difference.<br />
<br />
Or if I just remove the width it works.<br />
<br />
Here is the link to the page in case it helps:<br />
http://www.tacklebox.co.uk/tempting-em/bait/bait-ingredients/additives/cc-moore-belachan-paste-block.html<br />
<br />
Anyone have any ideas please? Thanks.<p><a href="127.0.0.1/uploads/monthly_02_2012/post-13990-0-13750500-1329830602.jpg">fb_ltr-width.jpg</a></p>

At the end of the long line in my code change







to






That should work

Thank you!!! Brilliant. Looks lovely now.

THANK YOU to everyone on this thread… using a combination of code from Brandon / Kathiew / Flow, it seems to be working for us. We have it in an html sidebox along with FB's Like iframe code, so it's on every page of our website, whether it's a product page or regular CS page.



One question/issue, when an image is pinned using this code, the eventual pin link on the user's board appears as just “mydomain.com” instead of the actual e.g. “mydomain.com/exact-url.html”. In other words, the background link is correct so when the user clicks on the image from their board it will take them to the correct url, just that the link the user sees is always “mydomain.com”… understand and anyone else experience this?



Thanks again!

About the layout, for people that have little space:



[color=#282828][font=arial, verdana, tahoma, sans-serif]You can change the layout of the facebook button from standard to [/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif]button_count.[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]

[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]This will make things smaller. You might wanna make the pinterest button the same size as the facebook button then, so it won't look weird.[/font][/color]

I have tried on my web site and that works brilliant. BUT one problem, when finished pin, it automatically goes to home page.

  1. How to make it stay in the same page?
  2. How to show count beside the 'Pin it' button?

    Thanks.