October 24, 2018

Adding a Pinterest Board Widget to the Blogger sidebar

I have been selling premade Blogger templates for over four years now. The templates that are currently available in my shop all have a styled Instagram feed widget, either in the sidebar or at the bottom of the layout. I often get questions from customers if I can add a styled Pinterest widget as well, but I have to disappoint them at this time.

In the past my templates did have a styled Pinterest widget, but earlier this year Google deprecated an API feed tool which was used to create these kind of custom widgets. A lot of designers saw themselves faced with a big problem: without this tool their widgets stopped working and that disappointed a lot of customers.

You might not be familiar with the term API, but this is how Webopedia explains it:

An application program interface (API) is a set of routines, protocols, and tools for building software applications. Basically, an API specifies how software components should interact. Additionally, APIs are used when programming graphical user interface (GUI) components.

Without this kind of tool it is pretty difficult to build a good working and stylish Pinterest widget. Of course I know my basic way around coding but only for the regular stuff. The templates that I sell are pretty simple and basic in their coding and stand out because of how they are styled with watercolor effects and other illustrations. I am definitely more a graphic designer than a web designer, and that is something that is not always easy for clients to understand. The fact that I sell premade Blogger templates does not mean that I know everything about website coding and that I can create any kind of widget for them.

This means that at this moment in time I recommend using the official Pinterest profile widget when you want to show off your latest pins in your Blogger sidebar. Today's tutorial will show you how to create a board widget that will fit your sidebar perfectly. Let's show off those pins!

How to create an official Pinterest board widget for Blogger

We are going to use Pinterest's official widget builder for this, so the first thing to do is visit the widget builder for Blogger over here. The page shoud look like this:

I am going to show you how you can make a widget that shows the latest pins from your total Pinterest feed, so the next thing I am going to do is select the 'profile' option:

I want to create a custom widget that will fit my sidebar perfectly, so this is how you do it:

• make sure you are logged in to your Pinterest page
• select the 'profile' option
• put your Pinterest profile link in the HTML line
• then select the 'create your own' option

Now build your custom widget to make it fit for your sidebar. In my case I am using one of my own Blogger templates, and the width of the sidebar of these templates is 280 pixels. So I fill in 280 for the board width. If you are using a different Blogger template, then find out what the width of your sidebar is so you can make the widget fit perfectly. The designer of your template should be able to give you this information.

I also filled in 140 pixels for the image width. That is half of 280 and will make the images show up in 2 columns. I set the height to 400, just because I like it, but you can play around with it. In the box underneath the pixel numbers you will see a preview of what your board widget will look like.

Once you are satisfied with how your board widget looks, it is time to put it on your blog.

How to place your Pinterest board widget in your Blogger sidebar

Just below the preview of your board you will find two pieces of HTML coding. That is the coding you will need to place this widget in your Blogger sidebar. The first piece of coding you see is the actual coding for the board, the second piece of coding is needed to get your blog ready to display a Pinterest widget, so we are going to start with that.

• go to your Blogger dashboard and select 'theme' on the left side of the screen
• then select option 'edit HTML'
• this will bring you into the coding of your blog template

We will now have to put the second piece of coding into your blog's coding, but it needs to be done at the right place:

• press the key combination CTRL - f
• this will open a little search bar in the upper right corner of the HTML coding
• type in </body> in this search bar
• and press 'enter'
• now you are taken to the place in the coding that says </body>

• go back to the Pinterest widget builder page and copy the second piece of coding
• then paste that piece of coding right before </body>
• and save this by clicking the orange button that says 'save theme'

Now that your blog has been prepared for the Pinterest widget it is time to actually put the widget in the sidebar:

• go to your Blogger dashboard and select 'layout
• then go to the sidebar section and select 'add gadget'
• choose the 'HTML/Javascript' gadget 

• now go back to the Pinterest widget builder page and copy the first piece of coding
• paste this coding into the content box of the HTML/Javascript gadget
• and save the gadget

• your new gadget has now been added to the top of the sidebar
• if you want it to appear in another position in your sidebar, click on it with your mouse button and drag it to a position of choice
• then save it by clicking the orange button that says 'save layout'

When you view your blog now, the Pinterest board widget shows up in your sidebar. Your readers will be able to see your latest pins and when they click on the widget, it will take them to your Pinterest page.

No comments:

Post a Comment