Joomla pinitButton Documentation

Rate this item
(1 Vote)
This documentation helps you set up the plugin pinitButton, that helps your visitors share your articles to the social network Pinterest.

This documentation is valid for all versions of pinitButton.


Install the plugin like any other extension. For details on how to install extensions, look at the installation guide at the Joomla community.

Activating the plugin

The plugin is disabled by default after installation, so our first step is to activate and set up the plugin.
This is done in the plugin manager (Extensions -> Plug-in Manager).

Plugin Manager

You will be presented with a list of all the installed plugins. Look for the plugin name Content - pinitButton, and click on the name to enter the settings.

In the plugin details, you'll find the setting for Enabled which you set to "enabled" to make the plugin active. The appearance of these settings are different between Joomla 1.5 (left picture) and Joomla 1.6 and higher (right picture) as seen bellow.

Joomla 1.5Joomla 1.7

Basic setup

For most users the basic setup will be sufficient, and we'll go through the different settings to explain what they do. The settings page is displayed below.

Pinit button settings


Choose where you want the button to be displayed in you articles.

For advanced users: The button is always contained in a span placeholder of the class pinitButton, which makes it possible to further customize using CSS.

  • Before content - Button is placed directly between the article title, and the article content.
  • After content - Places the button right after the article content.
  • None - No button is displayed, but all the necessary code for using it is still included in the source code. This makes it possible to paste a code snippet wherever you like the button to be displayed. A great place would be in a custom HTML module for example.

Pinterest Image

Select the button image you want to use. Below you see the default button to the left and the bit button to the right.

Pin Count

Select how you want to display the count number of how many times the article have been pinned.


The plugin automatically fetches the images related to the current article. Image prio setting lets you control the order in which the plugin selects these images. The selection goes from prio 1 > prio 3, meaning that it first check for available image set in prio 1. If none is found here it goes to the next prio and so on. Since some articles won't have an image, which is required on Pinterest, we recommend that you set the last prio image (3) to custom image. This let's you select a default image yo use if none is found.

  • First image in article - The first image found in the article content is used.
  • Intro image - The image set as intro image is used.
  • Full article image - Image set as full article image is used.
  • Image with class - First image found with class set in image class. For example; if you set the class of an image to "pinitimage" (the default class), then this image is used.
  • Custom image - Select the image to use from the images in the "Select custom image" list.


This setting lets you specify how the article is described when pinned on Pinterest. You can choose between the following types of descriptions:

  • Article meta description - The description you've set in the meta description of the article is used. This is the recommended setting, since it gives you better control of what description to use. Just remember to allways write a meta desc on your articles.
  • Article intro text - If all your articles are using a "read more" separator, the you could use this option. This option uses the text above the "read more" line as description.
  • Site description - The meta description for your site, set in the global settings is used.
  • Custom description - Enter the description to use globally in the custom og:description box.

Advanced setup

If you want to have better control of how the button is displayed, we recommend to set the placement option to none. This way you can enter the text {pinitbtn} (including curly braces) to set the position of the button where you like.

Daniel Eliasson

A programmer and webdesigner with over 15 years of experience in different programming languages with a toolbox consisting of: Objective C, JAVA, C++, PHP and many more techniques.

Stilero på Twitter

No tweets found.

Följ Stilero Webdesign