New feature: Pin It button! How to set up a pin button on Yandex.
Our actions
1. What is Pinterest. Short
2. First code example and installation
3. Second installation example
4. Installation using a plugin
1. Pinterest is social network, which allows users to add their photos and upload them to specific collections and share them among users of the service. Images uploaded to the resource are called pins, and the collections to which they belong/attach are called boards.
2. All we need to do is simply add the provided pinterest button code shown below. Where can I put a button to display on a web page? Naturally, it is better to install the code at the end of the article, in the file single.php “Single article”. This will make it more convenient for blog readers so that they can easily share pictures. In my case, the code was placed in the comments.php file "Comments".
Now you need to edit the code. In the links we write our paths to the files: images and pinmarklet.js. These files can be downloaded from Yandex.Disk. The pinmarklet file must be uploaded to the hosting, path http://Our blog.ru/wp-content/themes/blog theme/js/pinmarklet.js. And the picture is in http://Our blog.ru/wp-content/your folder for pictures/photo.png. That's it, our Pinterest button is ready.
3. For the second method, we will use the Pinterest service. We install the first code in the footer of our website footer.php before
The second code is in the place where the button will be located
In this option, the code settings are set by default.
Watch the video - How to install code on a website
Hello! We continue to analyze the most interesting and most useful plugins for the WordPress site! Today you will learn how to add a Pin It button to your website to share your website content on the Pinterest social network. You can choose the button size and button color. You can choose the location of the button. You can select on which pages the button will be displayed. Very simple and useful plugin!
You can install the Pinterest “Pin It” Button Lite plugin directly from your WordPress admin panel. Go to page: Plugins – Add new, enter the name of the plugin in the search form, press Enter, install and activate the plugin.
General.
– Button Type, here you can select the button type. It is recommended to leave it as default.
– Pin Count, you can enable the display of the counter and select its location.
– Button Size, you can select the size of the button, large or small.
– Button Shape, you can choose the shape of the button, rectangular or round.
– Button Color, you can select the color of the button. Only for rectangular button.
– Save Settings, uncheck the box and save the settings when you delete the plugin.
– Save your changes.
Post Visibility.
– Post/Page Types, select on which pages to display the button. In order:
- Home page or recent posts.
- Home page (static).
- Post pages.
- Individual pages.
- Archives, categories, tags, author, etc.
– Post/Page Placement, select the location of the button, before or after the content. Can be shown in excerpts from recordings.
– Save your changes.
Styles.
– Custom CSS, you can add your own styles.
– Remove DIV Container, you can remove the div tag around a regular button. Not necessarily.
– Disable Plugin CSS, you can disable the plugin styles to add your own.
– Save your changes.
Advanced.
– Always Enqueue Scripts & Styles, load the scripts and styles of this plugin onto each post and page. Useful when using shortcodes in widgets or other non-standard places.
– Disable pinit.js, disable pinit.js output. Not necessarily. Only if other plugins output pinit.js.
– Save your changes.
Everything is ready! After saving the settings, the Pin It button will be displayed on your website on the selected pages.
You can display the Pinterest button on your website using a widget that will appear on your widgets page. In the widget settings you will need to specify URL address page that will be shared on the Pinterest social network when you click on the button. You can specify the URL of the image and page description, which will also be displayed on the social network.
And now the main thing! How to Install the Pin It Button to a picture so that when you hover over it, a “P” icon will appear, allowing your readers to post your photo to Pinterest at any time, thereby showing it to their friends.
Step by step instructions
1. Open Template -> Edit HTML
2. Using Ctrl+F we look for the tag
3. Insert the code in front of it
//
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
All!
After that, on each picture of our blog, when you hover your mouse over the photo, such a button will appear. It will appear in all our readers!
If, for some reason, we don’t need the “Pin It” button in the picture, then we can simply remove it by writing to the tag
It should look something like this in HTML mode:
You can also change the position of the circle “P” in the photo. For example, we want to see it in the center of the image. No problem!
In the script we simply change var bs_pinButtonPos = "topright"; on var bs_pinButtonPos = "center";
Possible values for this parameter: center, topleft, topright, bottomleft, bottomright.
So we installed the button. Now let's see what it gives us.
When we press the “P” button, we see a window like this.
UPD 2
Now you don’t have to install a separate button on your blog. It can be fully embedded into the browser! Read how to do this.
But if you want users of any browser to be able to pin a pin from your page, then you can install it this way.
We provide you with all the necessary information about the Pinterest network and step by step instructions, so you can add a Pin it button to your site without much hassle.
What is Pinterest and “pinning”Pinterest is a kind of virtual board on which you can “hang” images you like and share them with other users. Collections of images can be organized by topic into interactive albums of sorts (called “boards” here). Not only can you share individual images on Facebook or Twitter, but you can also provide links to your collections. It’s very easy to add to your pin collection using the “Pin it” button, which is added to the browser panel when registering. This service is especially important for small companies that find it difficult to compete in search results or contextual advertising. Here you can post product catalogs, photographs of items self made, portfolio, website designs and much more.
Why are pins needed?Pinning has become not only popular, but also an incredibly effective way to drive organic traffic to a website. This new feature will provide you with an increase in organic traffic and help generate interest in your website and business. If you offer a product, this feature can lead to increased sales. If your site is informative, Pinterest will help you expand your audience reach and attract new traffic. Not sure whether to add it? Of course it's worth it! Luckily, it's very easy to do, and we'll show you how.
How to add a "Pin it" button to my site?First of all, add a button to the site:
In the left pane of the editor, click on the “+” sign to display the Add tab.
In Add, select Social. networks.
Select the "Pinterest Pin It" button and add it to the appropriate place on the site.
Let's go to the settings:
Double click on the “Pin It” button
In the settings button that appears on the left, click Select Image.
In the image gallery, select the appropriate photo and click Replace Photo (this is the image that will appear on Pinterest after users click the “Pin It” button)
In the Pin It button settings, under the Select Image button, add a description of the image (this description will appear on Pinterest after users click the Pin It button)
To change the appearance of the Pin It button, scroll down the settings panel and change the appearance of the spinner, size and colors of the button.
