New Pinterest Widgets
Author: Eon Day
Visited 2808,
Followers 1,
Shared 0
How can you incorporate the new Widgets from Pinterest? I would like to have a different one for each page on my site, but dont know where to drop the supplied code.
Posted on the
Hi Eon,
I'll use the 'Pin It Button' widget as an example.
There are two elements to the widget... some HTML and a little bit of JavaScript... we'll deal with the HTML first:
<a href="//pinterest.com/pin/create/button/?url=http://www.flickr.com/photos/kentbrew/6851755809/&media=http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg&description=Next stop: Pinterest" data-pin-do="buttonPin" data-pin-config="above"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
Note that the code above is simply the example code from the Pinterest website. It will be slightly different each time you create a new widget. But the principle is the same.
In Step 3 - Page Creation, drag and drop an 'HTML and Widget Object' onto the page in which you want the Pinterest button to appear. Once in place, double-click on the new object to enter its properties. On the screen which opens, paste the Pinterest HTML code into the white space.
Now look to the top-right of your screen and click on the 'Expert' tab - the bottom half of that screen contains a section entitled 'Files linked to HTML code' - this is where we will put the Pinterest JavaScript which is to be linked to the HTML code which you have just pasted.
First, you need to save the JavaScript from the Pinterest site in a text editor such as Notepad, and be sure to change the file extension from .txt to .js -
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f[removed].insertBefore(p, f);
}(document));
</script>
Let's say you save the JavaScript as a file called pinitbutton.js - now click on the 'Add' button on the right-hand side of the 'Expert' screen referred to above. In the window which opens you will be able to browse on your computer to the path where you saved the pinitbutton.js file, and select it under 'Linked file to upload to Server'
Having done that you then need to ensure the 'Link file to Page' checkbox is ticked.
Now close the HTML and Widget Object by clicking 'OK' back through all the screens. Reupload your project to your server and test!
Author
Unfortunately that doesnt seem to work with "Board Widget".
HTML:
<a data-pin-do="embedBoard" href="http://pinterest.com/TheFortMT/sporting-goods/"></a>
Java (.JS)
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f[removed].insertBefore(p, f);
}(document));
</script>
Ill even attach screencaps and .js file to test
Hello Eon Day,
Try to add the javascript code in Step 1 - in the Expert Tab, in the Section Before closing the hed tag and then try to use your custom pinterest code again.
In this way you will not need to attach the js file to the html&widget object and it will be loaded.
Please feel free to write back if you need more information.
Author
I finally figured it out. The java goes in step 1 as you suggested, although Pinterest suggests "Before Closing the Body Tag". Then I dropped an "HTML & Widget" object, with what Pinterest refers to "Insert the Link" code into the HTML Code Tab field.
Now I just have to figure out how to get the widget to span the width of the Body. =/
Hello Eon,
If you need to occupy the whole space of the body you can expand the html&widget object in step 3 to occupy the complete row.
About moving the code to "before closing the Body Tag", it is usually suggested to not cause a small delay during the loading of the page.
Hope this helps.