February 29, 2012

Add the Pinterest button

Pinterest is a "virtual pinboard" that lets you organize and share all the beautiful things you find on the web. Whether you're planning a wedding, remodeling a home, looking for new recipes to try, or simply want to collect and share the things you find inspiring, Pinterest is a fun and easy way to do it. Unfamiliar with how Pinterest works? Read more here!

If you prefer to not allow others to share your posts to Pinterest, see the article on adding the no pin code to your blog.

Add the Pin It button

To add the Pin It button to your posts in Basic Templates, go to your Dashboard and click to Design > Content. Click the pencil icon for the Post Footer module, check the Pinterest box, then click OK and save your changes.

Pinterest in the Post Footer

Advanced Templates

If you are using Advanced Templates for your blog's design, and you want to add the Pin It button, we recommend using the code from the Goodies page at Pinterest.com.

You will be prompted to choose between a Basic or Advanced code setup. We recommend the Basic setup for now, but it still requires some tweaks to get it to grab the permalink of your post.

Pinterest for Advanced Templates

 

In the URL of the webpage... field, enter: MTEntryPermalink

In the URL of the image... field, enter: MTEntryPhotoURL

In the Description of the Pin field, enter: MTEntryExcerpt

Tip: if you do not want the description auto-populated with an excerpt of your post (you can control the excerpt of the post from the compose screen) then you can leave the field blank.

When you click into the box with the generated code, you will need to copy its contents and paste it into your template(s) where you want it to appear.

Tip: add the code to a custom module (e.g. "pinterest-button") so that you only have one line of code to add to each of your templates (e.g. <$MTInclude module="pinterest-button"$> vs. the example code below).

Before publishing your changes, edit the code so that it is using proper Typepad Template tags. Essentially, you want to change the references to MTEntryPermalink, MTEntryPhotoURL, and MTEntryExcerpt into <$MTEntryPermalink$>, <$MTEntryPhotoURL$>, and <$MTEntryExcerpt$>.

For example:

<a href="http://pinterest.com/pin/create/button/?url=<$MTEntryPermalink$>&media=<$MTEntryPhotoURL$>&description=<$MTEntryExcerpt$>" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

The last two steps are to wrap the code with a Typepad Template tag group so that it can properly pull the image into your Pinterest account, as well as with a special class so that the button lines up properly with other social media buttons in the post footer.

<span class="entry-footer-links-pinterest">

<MTEntryPhoto>
<a href="http://pinterest.com/pin/create/button/?url=<$MTEntryPermalink$>&media=<$MTEntryPhotoURL$>&description=<$MTEntryExcerpt$>" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
</MTEntryPhoto>

</span>

The above set-up does not provide multiple images to select from like the Pinmarklet you might use from your bookmarks toolbar. The code above grabs only the first image from your post. If the option to select additional images becomes available then we will change this information to reflect that process.

Once finished, save your changes and add the code to the templates where you want the Pin It button to appear.

Get your readers to follow your Pinterest account!

If you want your readers to have a way to quickly follow your Pinterest account, then visit the Pinterest Goodies page and scroll to the "Follow Button" for Websites section.

Make sure you're already logged into your Pinterest account, then select the button style you want to appear on your blog. Copy the generated code, then paste the code into an Embed Your Own HTML module from the Design > Content screen of your Typepad blog.

To ask readers to follow the Typepad account over on Pinterest, we would select the first option, copy the code generated for us and, after adding it to our blog, it would show up like so:

Follow TypePad on Pinterest

Go ahead and click the button. It's fully functional and we'd love to have you join us on Pinterest!

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services