How to Embed Pinterest Feed on Your Blogger Website
By integrating this dynamic feature, you'll not only enhance the overall aesthetic appeal of your site but also tap into the power of social proof and drive more engagement from your audience.
Why Embed a Pinterest Feed?
Before we get into the nitty-gritty, let's understand why embedding a Pinterest feed can be a game-changer for your website:
1. Increased Engagement: Pinterest is a visual paradise, and displaying those captivating pins on your site can instantly grab your visitors' attention and encourage them to explore your content further.
2. Traffic Booster: Each pin in the feed links back to its corresponding page on Pinterest, providing a seamless gateway for users to discover more of your content or the content of other users you feature.
3. Social Proof: Showcasing popular pins from your account or other influential accounts adds credibility and social proof to your website, reinforcing your authority in your niche.
4. Branding and Promotion: If you embed your own Pinterest feed, it serves as a promotional tool for your Pinterest presence, potentially helping you gain more followers and exposure.
Requirements
Before we dive into the step-by-step process, let's ensure you have the following prerequisites:
+ A Blogger website or blog where you have administrative access to add HTML/JavaScript gadgets or edit HTML code.
+ A Pinterest account (either your own or the account you want to feature).
Step-by-Step Guide
Now, let's roll up our sleeves and get to work!
Obtaining the Pinterest Feed Embed Code
The first step is to obtain the embed code from Pinterest. This code will allow us to seamlessly integrate the Pinterest feed into our Blogger website. Here's how to get it:
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.linkedin.com/pulse/sothink-logo-maker-chibuike-okoli-ui4qf/">
<img src="https://bit.ly/img-scr" /></a>
<a href="https://catalystbloggingtutorials.blogspot.com/?m=1"><img src="https://bit.ly/img-scr" /></a>
Customizing the Embed Code
The embed code provided by Pinterest allows you to customize various settings for the feed, such as the width, height, and scale of the pins displayed. Let's break down the code snippet:
1. `<center>` and `</center>`: These tags center the Pinterest feed on your website.
2. `<a>` tag: This tag contains the attributes that control the appearance and behavior of the Pinterest feed.
- `data-pin-do="embedUser"`: This attribute specifies that you want to embed a user's Pinterest feed.
- `data-pin-board-width="400"`: This attribute sets the width of the Pinterest board in pixels.
- `data-pin-scale-height="400"`: This attribute sets the height of each pin in pixels.
- `data-pin-scale-width="80"`: This attribute sets the width of each pin as a percentage of its original width.
- `href="https://www.pinterest.com/YOUR_USERNAME/"`: Replace `YOUR_USERNAME` with the actual Pinterest username of the account you want to feature.
3. `<script>` tag: This tag loads the necessary JavaScript file from Pinterest to render the feed on your website.
Feel free to adjust the values for `data-pin-board-width`, `data-pin-scale-height`, and `data-pin-scale-width` to control the size and appearance of the Pinterest feed on your website.
Adding the Pinterest Feed to Blogger
Now that you have the embed code ready, it's time to add the Pinterest feed to your Blogger website. You have two main options to choose from:
Option 1: Adding an HTML/JavaScript Gadget
1. Log in to your Blogger account and navigate to the dashboard.
2. Select the blog where you want to add the Pinterest feed.
3. Click on the "Layout" option from the left-hand menu.
4. Look for the "Add a Gadget" section and click on the "+" sign to add a new gadget.
5. In the gadget selection window, search for and select the "HTML/JavaScript" gadget.
6. In the content box of the HTML/JavaScript gadget, paste the customized Pinterest embed code you obtained earlier.
7. Optionally, you can adjust the gadget settings, such as the title and placement on your website.
8. Click "Save" to apply the changes and add the Pinterest feed to your Blogger website.
Option 2: Adding the Feed to a Post or Page
1. Log in to your Blogger account and navigate to the dashboard.
2. Select the blog where you want to add the Pinterest feed.
3. Click on the "Posts" or "Pages" option from the left-hand menu, depending on where you want to add the feed.
4. Create a new post or page, or open an existing one.
5. In the content editor, switch to the "HTML" view by clicking on the "HTML" button.
6. Paste the customized Pinterest embed code at the desired location within the HTML code.
7. Switch back to the "Compose" view and preview the changes to ensure the Pinterest feed is displaying correctly.
8. Publish the post or page to make the changes live on your website.
Positioning and Styling the Feed
Now that you've successfully embedded the Pinterest feed, you might want to adjust its positioning and styling to ensure it seamlessly integrates with your website's layout and design.
Centering the Feed
If you want to center the feed horizontally on your website, you can wrap the embed code with `<center>` tags, as shown in the example code provided earlier.
Custom Styling
You can also apply custom CSS styles to the feed to match the overall design and branding of your website. For example, you can change the background color, border, or add shadows to the feed container.
Maintenance and Updates
Pinterest may occasionally update their embed code or make changes to the way the feed is rendered. Be sure to check for updates and make necessary adjustments to ensure the feed continues to display correctly on your website.
Additionally, if you change your Pinterest username or decide to feature a different account, you'll need to update the embed code accordingly.
FAQs
Can I embed multiple Pinterest feeds on my website?
Yes, you can embed multiple Pinterest feeds on your website by following the same steps for each feed you want to add. Just make sure to use the correct username or account in the embed code for each feed.
Can I customize the appearance of the Pinterest feed further?
While the embed code provided by Pinterest offers some basic customization options, such as setting the width, height, and scale of the pins, more advanced customization may require CSS styling or modifications to the code.
Will the Pinterest feed slow down my website?
The Pinterest feed should not significantly impact your website's performance, as it loads asynchronously and uses Pinterest's own resources. However, it's always a good idea to monitor your website's performance and ensure it remains fast and responsive.
Can I display specific boards or pins in the feed?
The embed code provided by Pinterest displays a user's overall feed, including pins from all their boards. To display specific boards or individual pins, you may need to explore alternative solutions, such as using Pinterest's API or third-party tools.
Is it legal to embed a Pinterest feed on my website?
Yes, it is legal to embed a Pinterest feed on your website, as long as you follow Pinterest's terms of service and guidelines.
Pinterest provides the embed code for this purpose, allowing users to showcase content from the platform on their own websites.
0 Comments