[Pinterest] Add the "Pin It" for each image on your blog

2

We can say Blogger is a Google platform, but favors "being" the spurned developers. There are a lot of things for Joomla or Wordpress is very easy because everything is available, we just need to click the mouse. With Blogger is completely different, almost each person must find their own stuff to it.When launched social network Pinterest, to get a Pinterest widget for Blogger gallerry we must also develop as my article here .
Today HHV will guide how to insert a button "Pin it" automatically to each photo in your blog. This procedure is actually less for the shop you want to do online sales based on Blogger. Of course, this code also works well on other platforms such as Wordpress or Joomla or static web pages.

1. Insert jQuery to your blog.

JQuery is very popular and common that you installed it to your blog. I have written a guide Vientiane settings for elementary JavaScript jQuery and Blogger here .

2. Code

Step 1: Login to Blogger go to Template> Layout and create Add an HTML / Javascript widget then copy all the code in the widget below. Named widget is Pinterest Button

<script type='text/javascript'>
 $ (). Ready (function () {

 $ ('. Entry-content img'). Each (function () {
  var $ permalink = $ (location). attr ('href');
  $ (This). Wrap ('<div class="pinme" $(this).attr('style') style="' + +'" />'.) After ('<a href = "http:/ / pinterest.com / pin / create / button /? url = '+ $ permalink +' & media = '+ $ (this). attr (' src ') +' & description = '+ $ (this). attr (' alt ') +' "class =" pin-it-button "count-layout =" horizontal "> Pin It </ a> ');
 });

});

(Function () {
    window.PinIt window.PinIt = | | {loaded: false};
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    async_load function () {
        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.parentNode.insertBefore (s, x);
    }
    if (window.attachEvent)
        window.attachEvent ("onload", async_load);
    else
        window.addEventListener ("load", async_load, false);
}) ();
</ Script>

But now Pin it button work with all the images in the blog. To Pin button at work only in post pages only need to add a small convention after the conditional statement.
You open the Blogger Template> Edit HTML , and click Proceed . Then open the Expand Widget Templates. Looking to Pinterest Button. it will look similar to the following may apply to HTML id, but you do not worry.

<B: widget id = 'HTML10' locked = 'false' title = 'Pinterest Button' type = 'HTML'>
 <b:includable id='main'>
  <! - Only display title if it's non-empty ->
  <b:if cond='data:title != ""'>
    <h2 class='title'> <data:title/> </ h2>
  </ B: if>
  <div class='widget-content'>
    <data:content/>
  </ Div>
  <b:include name='quickedit'/>
</ B: includable>

You just need to copy and replace all the code in between <b:includable id='main'> and</ b: includable>
Eventually you will have something like the following code.

<b:widget id='HTML10' locked='false' title='Pinterest Button' type='HTML'>
 <b:includable id='main'> 
<b: if cond = 'data: blog.pageType == "item" '>
  <div class='widget-content'>
    <data:content/>
  </ Div>
  <b:include name='quickedit'/>
</ B: if> 
</ b: includable>

Click Save template to

Note:

By default this code will send the card alt to describe the picture. If no card imagealt , it will display the text undefined (see photo).

3. Advanced Custom

The default Pin it button is at the bottom right of each photo (Figure). In the event of a Pin it button appears in the middle, we must add a CSS code that I will provide just under the wire.In case you know where to insert CSS reference this article.

<style type='text/css'>
. Unpin iframe {display: none! Important;}
. Pinme iframe {display: block; margin: 0 auto;}
</ Style>

Another thing to note is that you also have the photos in the article that we do not want to appear Pin it button  . During the above CSS I added a CSS code for this. You have to do it manually by adding to it a class photo unpin . Specifically.

<div class="unpin"> 
<img src="http://www.example.com/image.jpg" alt="example image"> 
</ Div>

-------------------
Add Pin it button for each image in the blog post is a very effective reminder. Especially you make the sale site on the Blogger platform.
If you have any questions comments. Please leave a message under this article. Hong Hoa Vi also connect using Pinterest to share offline.