Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Display Pinterest images in a "gadget" for Blogspot/Blogger blogs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Plugin: jquery.zRSSFeed
*
* Version: 1.0.1
* (c) Copyright 2010, Zazar Ltd
*
* Description: jQuery plugin for display of RSS feeds via Google Feed API
* (Based on original plugin jGFeed by jQuery HowTo)
*
* Modified by Richard Mackney (originally for Instagram images, see https://gist.github.com/865838)
* Modified further by Marie Mosley for a Pinterest "gadget" for Blogger.
* Tutorial for use with Blogspot at: http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html
**/
;(function($) {
(function($){
$.fn.rssfeed = function(url, options) {
var defaults = {
limit: 6,
content: true,
key: null
};
var options = $.extend(defaults, options);
return this.each(function(i, e) {
var $e = $(e);
if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed');
if(url == null) return false;
var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url;
if (options.limit != null) api += "&num=" + options.limit;
if (options.key != null) api += "&key=" + options.key;
$.getJSON(api, function(data){
if (data.responseStatus == 200) {
_callback(e, data.responseData.feed, options);
}
});
});
};
var _callback = function(e, feeds, options) {
if (!feeds) {
return false;
}
var html = '';
var row = 'odd';
html += '<div class="rssBody">' +
'<ul>';
for (var i=0; i<feeds.entries.length; i++) {
var entry = feeds.entries[i];
html += '<li class="rssRow '+row+'">'
if (options.content) {
var content = entry.content;
html += '<a href="'+entry.link+'">'+ content +'</a>'
}
html += '</li>';
if (row == 'odd') {
row = 'even';
} else {
row = 'odd';
}
}
html += '</ul>' +
'</div>'
$(e).html(html);
//correct href for images so they point to Pinterest
$(function() {
$('.rssFeed a').each(function() {
var href = $(this).attr('href');
$(this).attr('href', 'http://www.pinterest.com' + href);
$('.rssFeed img').attr('nopin','nopin');
});
});
};
})(jQuery);
})(jQuery);
</script>
<style type="text/css">
.rssFeed a {
color: #444;
text-decoration: none;
}
.rssBody ul {
list-style: none;
}
.rssBody ul, .rssRow, .rssRow h4, .rssRow p {
margin: 0;
padding: 0;
}
.rssBody li {
position: relative;
color: transparent;
width: 100px;
height: 100px;
overflow: hidden;
padding: 6px;
float: left;
z-index: 1;
border-top: none !important;
}
/* This part of the style shows the full photo when the thumbnail is hovered. If you'd prefer not to use this, remove .rssBody li:hover, its curly braces, and everything inside its curly braces. This was designed for a left sidebar on Blogger. For a right sidebar, play with the translate numbers until the enlarged photo moves the way you want it to. */
.rssBody li:hover {
font-size: 1px;
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);
}
/* end hover image effect */
.rssRow {
padding: 3px;
}
.rssRow h4 {
display: none;
}
.rssRow div {
color: #666;
margin: 0.2em 0 0.4em 0;
}
</style>
<script type="text/javascript">
/** use your own Pinterest username in the rssfeed url. To display your latest photos from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss to show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss **/
;(function($) {
$(document).ready(function () {
$('#pinterest').rssfeed('http://www.pinterest.com/YOUR-USER-NAME/feed.rss', {
limit: 6,
snippet: false,
header: false,
date: false
});
});
})(jQuery);
</script>
<!-- Optional logo and gadget title. To use, uncomment it and add in your own Pinterest url, then place your own image link in the quotation marks after img src. -->
<!-- <a href=""><img src=""><br />Latest Pins</a> -->
<div id="pinterest"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.