Transcription
Hi, this is Russel from Low Fruit Solutions, and today I'm going to be demonstrating the Pinterest integration feature of the Pro Blogger application. The purpose of this feature is really to enable your browsers, your readers of your Shopify blog to be able to onwards share your images into the Pinterest network, where they'll hopefully re-pinned and re-pinned and re-pinned, creating effectively an SEO and traffic funnel back into your blog. Obviously it'll all depend on how cool your images are, how often they get re-pinned, etc, but the purpose of this particular feature is to enable that as best as possible. We'll come more to the overall details of the features like rich pins in a little bit, but before we dig in, let's have a look and see what a blog without this integration will look like.
I have a demo store set up here. You can see it's currently obviously not live. It's one of our test ones, and in the bottom here it's going to one of our test blogs, so I'm just going to go here, Pineapple for your health, and you can see that there's a number of text here. We have an image. There's no pins available to it, and we have a Pin It button here at the bottom. Now what that will do is it will fire up a menu, which would allow you to select images from this blog if you should choose. Right, so that's what it looks like before. Let's move on to the implementation side.
I'm just going to go to the dashboard here then I'll go into applications, and you'll see this is a UAT version of the application. The production one will not include the UAT, same thing though really. I'm just going to click on it, and this will fire up the app, and you can see all the features are currently disabled including the Pinterest integration feature. What I'm going to do is I'm just going to expand that. I'm going to click "Enable," and I'm going to hit save. Now, what this will do is copy the assets required to run this into the store. Then we'll have to move on to step two, what I'm going to do is I'm going to duplicate this tab so we can look at the install instructions as well as what we need to do on the code. I'm going to click Install here, and I'm just going to create a duplicate tab. Right. Go back.
To complete the Pinterest, and for that matter the image caption install or precursor to any of the installs, we have to follow this general install instruction, which I'm only going to borrow this part {% include 'pro-blogger-section-wrapper' %}, because we're going to go through it on the video. Right. Going back to the dashboard, you click on Online Store, and you'll see that we go to the themes by default. We're just going to go and click on the actions button here, select Edit Code. Now what you'll see is all your theme assets in this left hand pane here, and then the output on this right side. We're going to click on theme.liquid, and we're going to find right at the top here, you'll see there's the <head> section. We're just going to do a carriage return and going to paste in that code that I just copied from the install instructions, which is the Pro Blogger section wrapper, and we're going to hit Save. That is your liquid installation done for the Pinterest integration feature.
What does that look like on your store? Let's go back to the blog. I'm just going to hit Refresh. Okay. It's refreshed. What we're going to do is you can see now that when I swing my mouse over this image, where it wasn't before, we now have a Pinterest Pin It button that comes up, and that will come across up every image within your particular article. Now, what we'll see here is that it's also changed the default behavior of this button, so we don't want that. It's an unfortunate side effect of the Pinterest JS, so what we're going to do is in most themes, this will be covered by the social sharing include, which you can find in your snippets. See, it's called social-sharing.liquid, and you've got to go down here, and if it's not, it'll be similar sort of stuff where you'll see there's an <a target=>, and then it will include Pinterest.com. It's because it includes this path that it tries to style it exactly as a setting. So we're just going to exclude this by typing data-pin-custom="true". We're going to hit Save.
This is on the debut theme by the way, but most use the same mechanism to do this, so we're just going to refresh. There you go. That's now restored back to normal as it is a custom button. Let's go back to the settings of the application. We're just going to go back to this tab here. Now, let's talk about what the settings do. It's pretty straight-forward. What we have here is the shape and size of the pin, so what I'm going to just do is I'm going to change it to round, and I'm going to change it to a large pin, and I'm going to hit Save. Before I do that, let's talk about what rich pins are and what these other options here are.
Right. Rich pins effectively don't just pin to Pinterest itself, they also include a bit of metadata, and I'll demonstrate what the difference looks like in a short while. Actually, why don't we do it now? Here is Pinterest. I've just gone to a page to demonstrate the differences between two. This here is a standard pin, right? What you'll see is that it's got the image, and at the bottom it's got a Visit button. If we go back and we look at this one, see it's got the image. Looks kind of the same, but what do you find is it's a different button, and what it actually says is an article from and usually it can also include additional metadata such as when the title was published, who wrote it, and these sort of things. What the Pinterest integration portion of the ProBlogger will do is it'll take that information, and when you pin or when someone else pins things to their boards, it'll take that information with it, so when you click this it'll now take you directly to the article, and it's a good way obviously to funnel people in who are interested in reading a little bit more about these images.
Anyway, let's go back to the app. What I'm doing is I've just changed the shape and size. I'm just going to hit Save, and we're just going to refresh this quickly. Now what you'll see is now that's changed. Now we have a big, round Pinterest Pin It button on this image, and like I said, you would have one on every other image that was in here as well, so I could directly from here then click on this, and it would take me off to Pinterest. I'll have to log in, but any user then will be able to, if they like an image on hover here, just quickly click that and it would allow them to pin it to their board. As a store owner, it's actually very worthwhile to pin your own images within your own boards, because once they're in the social network of Pinterest, they can get shared. If they don't exist there, you're waiting for someone else to put them there, so it kind of helps to beat the gun if you will and post them yourself on your own boards categorized, etc, so you can begin the process.
To do that for your own board, what you will need to do is a Pinterest website validation, generally what happens is you'll register as a business on Pinterest, and they'll provide you will a validation code, which will look a lot like this to validate your domain. Now, you could edit your own code, place the snippet in a file in your assets, etc, or you can use the Pinterest integration strip here. You just paste it in with your domain in here, which would be in between these quotes, and save and will do it all for you.
Anyways, that is the Pinterest integration feature for ProBlogger. Hope you enjoyed the presentation, and thank you very much for watching.