Pinterest is an image sharing and social media platform that enables users to save and share images, [to a small extent ] videos and animated gifs. Pinterest’s home feed page contains a collection of pins from users, boards and topics followed.
This post [ commonly referred to as pin ] can be shared to other platforms such website and integration process is similar to that of Facebook, Twitter or LinkedIn post-integration. Olitt provides Pinterest share button plugin to facilitate the integration process and users are only required to input the pin url and container id while the plugin takes care of the other complexity.
This guide contains a 4 step process for integration. If you have a pin URL, feel free to skip to step 2.
Step1: Obtains the pin URL.
This is the URL pointing to the post you want to share to your website and its obtained from the Pinterest website.
Log in to your Pinterest account. You can create your pin and share or one you are following. For illustration, I will be using one from the home feed.
From your account, open the business dropdown menu at the top left and select home feed as shown below.
From the list that appears, click to open your desired post. Copy and save the pin URL from the browser as shown below.
Step 2: Create an HTML container element.
This is the element that will display the pin on your website.
Open a new tab on your browser and log in to your Olitt account.
Once you log in to your account, select websites to enter “my websites” page. Hover the mouse cursor over the templates and select the edit template.
You can create the HTML div element or use already defined div element in your template. Scroll down and click on the section you wish to display the pin. Upon the context menu that pops up, click on the edit icon.
The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.
Add the id on the container element selected above.
Save the changes and return to “my website” page.
Step 3: Install the plugin
From the “my website” page, click the more (…) options and select plugins.
From the list that appears, scroll down and locate “Pinterest share button”. Click on Expand.
Add the id element you created above and the pin-url as shown below.
You can replace fields with yours.
Click on the “connect” button and now you should be able to see “connected” green text.
Step 4: Verify installation
You can verify the integration by refreshing your website. If you completed the above steps successfully, you should be able to see the pin share button on a section where you added the Pinterest id.