How to integrate Pinterest with EE
Development and Programming
We are wanting to add the Pinterest shares to our website, but seem to be having some difficulty trying to make it work dynamically. Anyone else using this yet?
The way it is set up, the code wants you to manually put in the link of the webpage as well as the link for the image. They have a form that creates the code for you, but not for dynamic content.
http://pinterest.com/about/goodies/
I’m trying to use it here: http://coastalpetrescue.org/adopt/adopt-a-dog
Ideally, someone could click the pet’s individual page and there would be the Pinterest share button. But trying to use the permalink codes and the EE image tags did not work. Appreciate any help anyone can give here.
Hey, I don’t know if you already found a solution for this, but if not here’s how to get Pinterest to work with EE. Pinterest requires the permalinks and image src links used within its code to be url encoded. To do this with EE, you’d need to store the permalink and the image src in a PHP variable, and then use PHP’s urlencode().
So step by step: 1. Enable PHP on output on your template(s). 2. Store permalink and image src in PHP variables like this:
<?php $link = "{title_permalink='my_template/entry'}";
$image = "{custom_image_field}";
?>- Call those variables using urlencode() within your Pinterest code like this:
<a href="http://pinterest.com/pin/create/button/?url=<?php" class="pin-it-button">Pin It</a>- Make sure the Pinterest javascript is in place just after your <body> tag:
<!-- Include ONCE for ALL Pin This buttons in the page -->
[removed]
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x[removed].insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("unload", async_load);
else
window.addEventListener("load", async_load, false);
})();
[removed]Hope that helps!
Fantabulous! I will try that this weekend and get back to you!
No, didn’t work. But thanks for trying.
I’m using version 1.6.9
Ok, I got it to work… there was a ; between the media and = in the pin it button script, so removing that made it work. THANK YOU!!!!!
For anyone else who wants to add this, let me include the modifications I made to work on our site as I wanted to auto populate with the title of the page so someone didn’t have to type it in themselves (I’m a lazy pinner):
{exp:weblog:entries weblog="weblog_name" limit="1"}
<?php $linkPin = "{title_permalink='template/template_view/'}";
$imagePin = "{image}";
$descrPin = "Site Name {title}";
?>
{/exp:weblog:entries}I put that above the exp tags that call the content to the page (since my header info is all in a separate template).
Then, for the button:
<a href="http://pinterest.com/pin/create/button/?url=<?php" class="pin-it-button">Pin It</a>[removed][removed]*Where it says [removed][removed] should be the javascript tags you can copy from the Pinterest button page.
Did this work for you? We would like to see it in action if it did. Cheers.
Do you have any live examples where the social bookmarks plugin is in use? Thanks.