Follow

Pinterest Button

This article will instruct you on how integrate a Pinterest "Pinit" button into a site. You can see an example here: http://www.memphismagazine.com/Blogs/Memphis-Stew/May-2012/Food-Network-Super-Star-Guy-Fieri-Takes-On-Memphis/ this button creates an overlay of all the images on the page that the user can select to "pin." 

Selecting an image from this overlay will then create a pop-up with a log-in prompt.

Screen_shot_2012-05-21_at_11.35.22_AM.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The following instructions direct you to include the pagetools template in the following module. Please note that you need to comment out or remove the references to the existing {include file="pagetools.tpl"} in any page templates that will be using this new module. It is recommended that you create a test page before implementing this module into the site.

To begin, go the the Content Manager and create a new Template Content Module. Name the module something that makes sense to you. In this example "Pin it Button and Pagetools" is being used. Select "Published"

Take the following code and paste it into the Content area:

{literal}
<script type="text/javascript">
function run_pinmarklet() {
var e=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);
}
</script>
{/literal}<div class="module">
<div class="pinterest">
<a href="javascript:void(run_pinmarklet())" id="PinItButton" title="Pin it on Pinterest">Pin it</a></div>
<div class="tools-container">
{include file="pagetools.tpl"}
</div>
</div>

You will need copy and paste the following style elements into the "custom.css" file in your site. You may need to make adjustments to the styles for the Pin it button and the included pagetools. It is recommended that you use your browser's development tools to work with adjusting the styles and make changes accordingly.

Pin it button styles

#PinItButton{position:absolute;top:9px;background:url(//d3io1k5o0zdpqr.cloudfront.net/images/pinit.png);border:1px solid #C9C5C5;border-color:#E8E4E4 #C9C5C5 #C9C5C5;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.07);-moz-box-shadow:0 1px rgba(0,0,0,0.07);-webkit-box-shadow:0 1px rgba(0,0,0,0.07);font:11px Arial,sans-serif;text-indent:-9999em;font-size:.01em;color:#CD1F1F;height:22px;width:47px;background-position:0 -8px;}
#PinItButton:hover{background-position:0 -30px;border:1px solid #B8B4B4;}
#PinItButton:active{background-position:0 -52px;}
#PinItButton.pinned{background-position:0 -74px!important;border:1px solid #E7E7E7!important;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important;}
#CountPointer{position:absolute;z-index:1;background:url(//d3io1k5o0zdpqr.cloudfront.net/images/pinit.png);text-indent:-9999em;font-size:.01em;color:#FFF;}
#CountBubble{position:absolute;border:1px solid #C9C5C5;color:#777;background-color:#FCF9F9;border-radius:1px;}body.horizontal
#CountPointer{left:49px;height:22px;width:5px;background-position:-48px -8px;}
body.horizontal #CountBubble{top:1px;left:53px;height:14px;line-height:14px;padding:2px 5px 4px 5px;font:14px Arial,Helvetica,sans-serif;display:inline-block;}
body.vertical #PinItButton{top:34px;}
body.vertical #CountPointer{top:27px;height:7px;width:47px;background-position:0 0;}body.vertical
#CountBubble{left:1px;width:45px;font:16px Arial,Helvetica,sans-serif;line-height:16px;padding:5px 0;text-align:center;}
body.none #PinItCount{display:none;}

Pagetools Styles

#pagetools {
font-size: 10px;
text-align: left;
text-transform: uppercase;
border-bottom: solid 1px silver;
line-height: 42px;
padding: 0 60px;
background: white;
margin-bottom: 5px !important;

When you feel that it displays the way that you want it, you can then go into the chosen publication and select the "Module Configuration" tab and place the module in the top position in the "Default Article Modules" area. You module will not display on all existing articles and any new ones that you create. If you would like to add this module to pages, you can add it to the top position using the "Add and Arrange Modules" on the page.

 

Have more questions? Submit a request

Comments

Powered by Zendesk