Chloe - Instagram & Pinterest

You can choose between an Instagram* feed or a Pinterest feed for the footer. Below are instructions for both, including adding a Pinterest feed in the sidebar.

* In order to add an Instagram feed, you'll have to sign up for snapwidget.com (but if you're already using or want to use another site, that's fine, too). You should still be able to get the 4x1 layout with 20px padding, if you want to keep the original layout.

Generate an Instagram feed from snapwidget.com

Go to Snapwidget and create an account. You have to register, but generating a widget is free. Click on "Get a free widget" > "Create a free widget" > select "Instagram Grid" (there's a Pro and Free version - choose the Free version) > "Click here to update username" > log in with your account.

Configure the settings like this:

  • Thumbnail Size: 250
  • Layout (Columns X Rows): 4 x 1
  • Photo Padding: 20
  • Hover Effect: Fade Out
  • Sharing Buttons: No
  • Responsive: Yes

Copy the generated code > go to your blog dashboard > Layout > open the "Instagram" widget from the "After Footer" widget area > replace this:

<!-- add Instagram feed here -->

with the code you've copied from Snapwidget > save the changes.

Full HTML:

<div class="feed-wrapper"><div class="feed-wrap">

<!-- add Instagram feed here -->

</div></div>

Add a Pinterest feed to the footer

  1. Go to your blog dashboard > Layout
  2. Open the "Instagram" widget from the "After Footer" widget area
  3. Replace the HTML in the widget with the code below
  4. Replace USERNAME with your Pinterest username
<div class="feed-wrapper"><div class="feed-wrap">
<script>
$.ajax({
dataType: 'jsonp',
type: 'GET',
url:'https://widgets.pinterest.com/v3/pidgets/users/USERNAME/pins/'
}).done(function(response) {
var pins = response.data.pins;
var html = '';
for (var i = 0; i < 4; i++) {
var description = pins[i].description;
var dominantColor = pins[i].dominant_color;
var imageUrl = pins[i].images['237x'].url;
var url = pins[i].id;
html += '<div class="pinterest-item"><a href="https://www.pinterest.com/pin/' + url + '/"><div class="pinterest-image" style="background:url(' + imageUrl + ')"></div></a></div>';
}
$('.pinterest-row').html(html);
}).fail(function() {
console.log('erro');
});
</script>
<div class="pinterest-row"></div>
</div></div>

Add a Pinterest feed to the sidebar

  1. Go to your blog dashboard > Layout
  2. Add a "HTML/JavaScript" widget to the "Sidebar Column" widget area
  3. Add the HTML below to the new "HTML/JavaScript" widget
  4. Replace USERNAME with your Pinterest username
<script>
$.ajax({
dataType: 'jsonp',
type: 'GET',
url:'https://widgets.pinterest.com/v3/pidgets/users/USERNAME/pins/'
}).done(function(response) {
var pins = response.data.pins;
var html = '';
for (var i = 0; i < 4; i++) {
var description = pins[i].description;
var dominantColor = pins[i].dominant_color;
var imageUrl = pins[i].images['237x'].url;
var url = pins[i].id;
html += '<div class="pinterest-item"><a href="https://www.pinterest.com/pin/' + url + '/"><div class="pinterest-image" style="background:url(' + imageUrl + ')"></div></a></div>';
}
$('.pinterest-row').html(html);
}).fail(function() {
console.log('erro');
});
</script>
<div class="pinterest"></div>