--> Thumbnail Image Fix For Pinterest Buttons in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Thumbnail Image Fix For Pinterest Buttons in Blogger

Pinterest as you all know is the new social media network introduced just this year that has slowly attracted fair amount of traffic and is ...

thumbnail issues in pinterestPinterest as you all know is the new social media network introduced just this year that has slowly attracted fair amount of traffic and is grooming daily thanks to publishers and community members. We introduced various codes on how to add a Pinterest pin it button to your webpages but due to server side errors the JavaScript code introduced by pinterest for Firefox and Chrome is not functioning for the past one month. So We fetched a new code using AddThis servers and designed a custom Pinterest counter that works just like the original pinterest button. I also managed to write a simple XHTML code for the original pinterest button which will fetch the correct thumbnail image out of your BlogSpot blog and will work just fine without a description or blank thumbnail image problem. Lets check these fresh codes which works just fine. I will also update the old tutorials today.


Live Demo

 

The Original Pinterest Pin it button

The following code will work just fine on any blogger blog.

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title +  &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Here are some regions to give you an idea of how the code works:

  • data:post.url will fetch the Page Link/URL - Retrieved using url variable
  • data:post.title will fetch Blog post title - Retrieved using description variable
  • data:post.thumbnailUrl will fetch a 72 x 72 image thumbnail of your post. The is the data attributed provided by blogger which is often used while displaying the Mobile version of your blog on smartphones or iPad or Samsung Galaxy Tablet. The image surely looks small but this is the only allowed attribute we can use at this moment. I tried a lot to write a script that may force increase the size but the codes were not accepted by strict xml rules of blogger editor. Therefore this method will only display a 72x72 pixel wide image unlike the second method which displays large thumbnails. - Retrieved using the media variable

Enough of code syntax and literature , time to add it to blogger. Kindly link back to this page if you wish to share the above code with your readers. This code is released first time, therefore an attribution link would be enough a favour.  Follow these steps:

  1. Go To Blogger > Template
  2. Backup/restore your template
  3. Click the Edit HTML button
  4. Click Proceed
  5. Click the box "Expand Widget Templates"
  6. Search for this code:

<data:post.body/>

  Now if you wish to add the pinterest button below blog post titles then paste the code in step#7 just above the code in step#6 else if you wish to display the button at the bottom of posts then add the code in step#7 just below step#6 code.

      7.  Choose the code for your preferred size button and paste it inside your template as guided in step#6

For horizontal counter Use this code:

Paste the code below justhorizontal pin it

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

</b:if>

For Vertical counter Use this code:

vertical pinterest counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

</b:if>

     8.   Save your template and all done!

Custom Pin it Counter

For that kindly proceed to this tutorial:

New to Pinterest?

If you have no idea what pinterest is and how to pull out traffic from it to your blog then please read the following delicious tutorials:

Need Help?

If you encountered any problem during installation of the codes then feel free to let me know. I just hope this code and the previous update may help you with the best pinterest experience ever. People will surely now repin your posts once they see fancy thumbnails appearing in your board. Peace and blessings buddies. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Thumbnail Image Fix For Pinterest Buttons in Blogger
Thumbnail Image Fix For Pinterest Buttons in Blogger
http://lh4.ggpht.com/-0iOujAjyPMo/UL-RecqfxqI/AAAAAAAAIN4/ktWDrGbwFM8/image%25255B21%25255D.png?imgmax=800
http://lh4.ggpht.com/-0iOujAjyPMo/UL-RecqfxqI/AAAAAAAAIN4/ktWDrGbwFM8/s72-c/image%25255B21%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/12/thumbnail-image-fix-for-pinterest.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/12/thumbnail-image-fix-for-pinterest.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy