Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Pinterest (Pin It) Rate Topic   - - - - -

 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 08 January 2012 - 03:20 AM #1

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

 

Posted 09 January 2012 - 01:24 AM #2

It's definitely popular - Send me an email when you can brandon, think mine are heading to your junk mail box.
I've moved on from CS-Cart to WooC******** - If you need anything I can be of little help.

 
  • lauraluc
  • Member
  • Members
  • Join Date: 23-May 11
  • 89 posts

Posted 19 January 2012 - 01:46 PM #3

I've actually gotten sales from Pinterest. For my demographic it's very popular.
This article has detailed info about a "pin it" button.

http://www.practical...mmerce-Business

 
  • ogia
  • Senior Member
  • Members
  • Join Date: 09-Aug 09
  • 503 posts

Posted 08 February 2012 - 08:56 PM #4

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.
CS-Cart 2.1.3 | Selling downloads
I recommend Newsletter Integration with Mailchimp

 
  • ogia
  • Senior Member
  • Members
  • Join Date: 09-Aug 09
  • 503 posts

Posted 08 February 2012 - 10:34 PM #5

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

<a href="http://pinterest.com/pin/create/button/?url={$index_script}?dispatch=products.view&amp;product_id={$product.product_id}&description={$product.product|unescape} {$product.full_description|unescape|strip_tags|truncate:280:"..."}" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

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.
CS-Cart 2.1.3 | Selling downloads
I recommend Newsletter Integration with Mailchimp

 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 09 February 2012 - 12:37 AM #6

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:

<!-- Include ONCE for ALL buttons in the page -->

{/literal}
<div style="float:left !important; margin-left:4px;">
{literal}<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" class="pinterest-button"><img class="aligncenter" src="images/pinterest.png" alt="Pin It" height="32" width="32"></a>{/literal}
</div>

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

Below:

{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:

.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

Attached Thumbnails

  • pinterest.png


 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2348 posts

Posted 09 February 2012 - 10:05 AM #7

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:

{if $display == "Y"}
<div id="fb_like_it_button"> <div style="float:left !important; margin-right:4px; ">  {literal}<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" class="pinterest-button"><img class="aligncenter" src="images/pinterest.png" width="49" height="24" alt="Pin It"></a>{/literal} </div> <fb:like ref="top_left" show_faces="false" layout="standard" action="like"></fb:like>
</div>
{/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:

Add

.fb_edge_comment_widget {
  display: none !important;
}

to your skins styles.css

When life hands you lemons, bring on the Tequila baby!


 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 09 February 2012 - 03:20 PM #8

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

 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2348 posts

Posted 09 February 2012 - 05:47 PM #9

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)

When life hands you lemons, bring on the Tequila baby!


 

Posted 09 February 2012 - 06:22 PM #10

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)



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

 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2348 posts

Posted 09 February 2012 - 06:34 PM #11

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


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

When life hands you lemons, bring on the Tequila baby!


 

Posted 09 February 2012 - 06:39 PM #12

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


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

 
  • ogia
  • Senior Member
  • Members
  • Join Date: 09-Aug 09
  • 503 posts

Posted 18 February 2012 - 03:29 AM #13

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!
CS-Cart 2.1.3 | Selling downloads
I recommend Newsletter Integration with Mailchimp

 
  • nodame
  • Senior Member
  • Members
  • Join Date: 20-Feb 09
  • 149 posts

Posted 18 February 2012 - 10:33 AM #14

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! :)


Thanks! It works perfectly for me this way! ^^
v4.1.1

 
  • ruthpeet
  • Junior Member
  • Members
  • Join Date: 15-May 10
  • 8 posts

Posted 21 February 2012 - 01:24 PM #15

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)


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
.fb_ltr {
width: 300px;
}
to skins/myskin/customer/styles.css but it makes no difference.

Or if I just remove the width it works.

Here is the link to the page in case it helps:
http://www.tacklebox...aste-block.html

Anyone have any ideas please? Thanks.

Attached Thumbnails

  • fb_ltr-width.jpg


 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2348 posts

Posted 21 February 2012 - 02:26 PM #16

At the end of the long line in my code change
<fb:like ref="top_left" show_faces="false" layout="standard" action="like"></fb:like>

to

<fb:like ref="top_left" show_faces="false" layout="standard" width="300" action="like"></fb:like>

That should work

When life hands you lemons, bring on the Tequila baby!


 
  • ruthpeet
  • Junior Member
  • Members
  • Join Date: 15-May 10
  • 8 posts

Posted 21 February 2012 - 03:18 PM #17

Thank you!!! Brilliant. Looks lovely now.

 
  • wwgreen
  • Senior Member
  • Members
  • Join Date: 20-Nov 06
  • 411 posts

Posted 15 March 2012 - 03:51 PM #18

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!

v4.9.3sp1


 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2348 posts

Posted 28 April 2012 - 05:00 PM #19

About the layout, for people that have little space:

You can change the layout of the facebook button from standard to button_count.

<fb:like ref="top_left" show_faces="false" layout="button_count" action="like"></fb:like>


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.

When life hands you lemons, bring on the Tequila baby!


 
  • cm4554
  • Member
  • Members
  • Join Date: 01-Jul 09
  • 97 posts

Posted 07 June 2012 - 03:32 PM #20

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.
We are currently using CS Cart 4.1.2