How To Embed Pinterest Feed On Your Blogger Website

0 Shares

How to Embed Pinterest Feed on Your Blogger Website

In this tutorial articles, I’ll show you how to embed a Pinterest feed directly into your Blogger site.

This is a great way to showcase your own pins or feature content from other Pinterest users that align with your blog’s theme.

Let’s dive in and go through the process step by step!

Why Embed a Pinterest Feed?

Before we get into the nitty-gritty, let’s talk about why you might want to add a Pinterest feed to your Blogger website:

Visual Appeal: Pinterest is all about eye-catching images. By embedding a feed, you’re instantly adding visually interesting content to your site.
Increased Engagement: Visitors are more likely to interact with and explore visual content, potentially increasing the time they spend on your site.
Drive Traffic: Each pin in the feed links back to its source on Pinterest, creating opportunities for cross-platform engagement.
Social Proof: Showcasing popular pins can add credibility to your site and demonstrate your expertise or interests.
Fresh Content: Your Pinterest feed will automatically update as you or your chosen account adds new pins, keeping your site dynamic without extra effort.

Now that we understand the benefits, let’s get started with the embedding process!

Prerequisites

Before we begin, make sure you have the following:

A Blogger website where you have administrative access
A Pinterest account (either your own or one you’d like to feature)
Basic familiarity with HTML (don’t worry, I’ll guide you through it!)

Step 1: Obtain the Pinterest Embed Code

The first thing we need to do is get the official Pinterest embed code. Here’s how:

Go to the Pinterest Widget Builder page (you can find this by searching “Pinterest Widget Builder” on Google).
Scroll down to the “Profile” widget option and click on it.
Enter the Pinterest username of the account you want to feature in the designated field.
Customize the widget settings as desired (width, height, etc.).
Click “Build It!” to generate the embed code.
Copy the generated code to your clipboard.

Step 2: Customize the Embed Code

Now that we have our base code, let’s make some adjustments to ensure it fits well within your Blogger site:

Copy The Code Below

Copy the Code below…

<center> <a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="400" data-pin-scale-width="80" href="https://www.pinterest.com/YOUR_USERNAME/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script> </center>
<a href="https://www.nosrwebs.com/"><img src="https://bit.ly/img-scr" /></a>

RANK YOUR WEBSITE

Boost Your DA With Safe Backlinks

On-page SEO alone will not guarantee your success in Blogging. Yes,… Quality content is important, but Link building is the other piece of the puzzle.

Without Backlinks, your quality content will not rank, especially for competitive keywords.

But, not just any Backlink!… You must acquire only Clean and Safe Backlinks. With my Premium Link Building service, I can help you increase your search visibility, by boosting your website Domain Authority (DA) with only High-quality backlinks. Take advantage of this opportunity now!

INCREASE MY WEBSITE RANKING

Let’s break down what each part of this code does:

data-pin-do="embedUser": This tells Pinterest to embed a user’s feed.
data-pin-board-width="400": Sets the width of the board to 400 pixels.
data-pin-scale-height="400": Sets the maximum height of each pin to 400 pixels.
data-pin-scale-width="80": Scales the width of each pin to 80% of its original size.
href="https://www.pinterest.com/YOUR_USERNAME/": Replace YOUR_USERNAME with the actual Pinterest username.

Feel free to adjust these values to better fit your website’s design.

Step 3: Add the Pinterest Feed to Your Blogger Site

Now that we have our customized code, it’s time to add it to your Blogger website. There are two main ways to do this:

Option 1: Using an HTML/JavaScript Gadget

Log in to your Blogger account and go to your dashboard.
Click on “Layout” in the left sidebar.
Look for the “Add a Gadget” option and click on it.
In the pop-up window, scroll down and select “HTML/JavaScript”.
Paste your customized Pinterest embed code into the content box.
(Optional) Give your gadget a title, like “My Pinterest Feed”.
Click “Save” to add the gadget to your layout.

Option 2: Embedding in a Post or Page

From your Blogger dashboard, create a new post or edit an existing one.
Switch to the HTML view by clicking the “HTML” button in the post editor.
Paste your Pinterest embed code where you want the feed to appear in your post.
Switch back to “Compose” view to see a preview of how it will look.
Publish or update your post to make the changes live.

Step 4: Style and Position Your Pinterest Feed

Now that your feed is embedded, you might want to adjust its positioning or style to better match your blog’s design. Here are a few tips:

Centering the feed: Wrap the embed code with <center> tags like this:

   <center>
     <!-- Your Pinterest embed code here -->
   </center>

Adding margins: Use inline CSS to add some space around your feed:

   <div style="margin: 20px 0;">
     <!-- Your Pinterest embed code here -->
   </div>

Responsive design: If your blog theme is responsive, you might want to adjust the feed’s width to be a percentage instead of fixed pixels:

   <a data-pin-do="embedUser" data-pin-board-width="100%" ...>

Remember to test how your feed looks on different devices to ensure it displays correctly across all screen sizes.

Step 5: Test and Troubleshoot

After adding your Pinterest feed, it’s crucial to test it thoroughly:

View your blog on different devices (desktop, tablet, smartphone) to ensure the feed displays correctly.
Check that all pins are clickable and lead to the correct Pinterest pages.
Verify that the feed is updating with new pins as expected.

If you encounter any issues, here are some troubleshooting steps:

Double-check that you’ve copied the entire embed code, including the script tag.
Ensure there are no extra spaces or characters in the code.
Try clearing your browser cache and reloading the page.
If the feed isn’t appearing at all, check your blog’s theme for any JavaScript conflicts.

Best Practices for Using Pinterest Feeds on Your Blog

To make the most of your newly embedded Pinterest feed, consider these best practices:

Relevance: Ensure the pins in your feed are relevant to your blog’s content and audience.
Frequency: Keep your Pinterest account active to ensure fresh content appears in the feed.
Balance: Don’t let the Pinterest feed overshadow your blog’s main content. Use it as a complement, not a replacement.
Call-to-Action: Encourage your readers to follow you on Pinterest for more content.
Integration: Mention your Pinterest content in your blog posts to drive traffic to your pins.

Maintaining Your Pinterest Feed

Once your feed is up and running, there’s not much maintenance required. However, keep these points in mind:

Periodically check that the feed is still functioning correctly.
If you change your Pinterest username, remember to update the embed code on your blog.
Stay active on Pinterest to keep your feed fresh and engaging.
Consider rotating the featured account or board occasionally to showcase different content.

Leveraging Your Pinterest Feed for Blog Growth

Now that you have a Pinterest feed on your blog, let’s talk about how to use it strategically:

Cross-promotion: Use your blog to promote your Pinterest account and vice versa.
Content ideas: Pay attention to which pins get the most engagement and use this to inform your blog content strategy.
Seasonal content: Update your Pinterest boards with seasonal content to keep your blog feeling current and timely.
Collaborations: Feature other Pinterest users’ content to build relationships and potentially gain exposure to their audiences.

Measuring the Impact of Your Pinterest Feed

To understand how effective your Pinterest feed is, keep an eye on these metrics:

Blog engagement: Has the time visitors spend on your site increased since adding the feed?
Pinterest followers: Are you seeing growth in your Pinterest following?
Click-throughs: Check your Pinterest analytics to see if you’re getting traffic from your blog to your Pinterest account.
Comments and interactions: Are readers mentioning or asking about your Pinterest content?

FAQs

Can I embed multiple Pinterest feeds on my Blogger website?
Yes, you can embed multiple feeds by repeating the process for each feed you want to add. Just make sure to use the correct username for each embed code.
Will embedding a Pinterest feed slow down my website?
Generally, the impact on load time is minimal as the Pinterest script loads asynchronously. However, if you notice any significant slowdown, consider reducing the number of pins displayed or the size of the feed
Can I display pins from a specific board instead of a user’s entire feed?
Yes, you can. In the Pinterest Widget Builder, select “Board” instead of “Profile” when creating your embed code. Then enter both the username and the specific board name.
Is it possible to hide certain pins from appearing in the embedded feed?
Unfortunately, there’s no built-in way to hide specific pins from an embedded feed. The best approach is to carefully curate the Pinterest account or board you’re featuring.
Do I need to update the embed code if Pinterest makes changes to their widget?
Occasionally, Pinterest may update their embed code. While they try to maintain backwards compatibility, it’s a good idea to check your feed periodically and update the code if you notice any issues or if Pinterest announces significant changes.

By following this guide, you should now have a beautiful, dynamic Pinterest feed embedded in your Blogger website.

Remember, the key to making this feature truly valuable is to keep your Pinterest content fresh, relevant, and engaging. Happy pinning!