Pinterest Sharing System by BOP5 for VB 3.8 & VB 4.x! (Pinterest Pin Button Mod)
 

Brought to you by BirdOPrey5
www.Qapla.com

A BIG Thank You to all for voting this May 2012 Mod of the Month!

Version 1.04 - Added showpost compatibility
Version 1.01 - Compatibility fix for dbtech Advanced Thanks/Like mod
Version 1.0 - Initial (Non-Beta) Release

This mod is compatible with all VB 3.8 and 4.x versions released to date. It has been tested on VB 3.8.7, VB 4.1.11, and VB 4.2.0 and should work on older and newer versions as well.

Live Demos:
VB4 Demo: Pinterest Share Demo at Qapla.com
VB3 Demo: Pinterest Share Demo Thread - JUOT - Joe's Ultimate Off Topic

Pinterest is the next big thing in Social Media. It offers a very intuitive and friendly interface for users to share the things they like, use, and appreciate.

Unlike with Facebook or Twitter Pinterest absolutely requires some sort of visual representation of what you are sharing- this takes the form of a thumbnail image of a larger image or a thumbnail of a video.

Previously even if you could incorporate the Pinterest Pin button code into vBulletin there was no way to associate a unique image with every post.

This mod will search east post for any of the following. Priority is given to higher ranked items. The first instance of the first item type found will become the thumbnail sent to Pinterest. Each item can be enabled or disabled from the mod settings.

1) First it will look for YouTube videos. (Either embedded with [VIDEO] BBCode OR regular YouTube links OR YouTube videos embedded with the AME mod.

2) If no YouTube video is found it will next look for links to any external images. These are images that use the [IMG] BBCode.

3) If no external images are found it will look for any inline attachments. In the settings you can specify whether it should share the full sized attached image or only the thumbnail. Guests must have permission to download attachments or to see thumbnails for this option to work.

4) If none of the above find anything the mod can use this option will use avatar of the poster as the thumbnail sent to Pinterest.

5) If the user has no avatar as a last resort you can specify a link to a default forum image (perhaps the forum logo?) that will be submitted as the thumbnail.

Pinterest will not accept any Pins that do not contain a valid, guest accessible, image thumbnail.

You can choose the default description text. You can take text from the post itself, the thread title, or the forum META description. In any case the user always has the option to edit the description before submitting it to Pinterest.

The mod also contains a number of settings that allow you to choose how you want the Pinterest button to look, where you want it, and other basics such as what forums, styles, or usergroups to disable but button for or in.

The mod uses auto template edits for basic use however power-users will want to opt for the manual template edits (explained below) for even better customization and positioning of the Pinterest Pin Button.

Known Issues:
Using the recommended locations and settings the mod is working well on VB 3.8 and VB 4.x as you can see in the demo links above. However adding the Pinterest button causes some visual changes in some browsers.

For example in VB 4 with Chrome browser if you quick-edit a post with the Pinterest button the editor toolbar is pushed down lower than normal. Everything works it's just different than you are used to. In Firefox however the editor toolbar looks fine.

In VB 3 in the post message area location the "numbers" from the pin button are outside the border of the main table. This is somewhat on purpose- I think having the count outside the box draws more attention to them. Unfortunately if you don't like that all I can suggest is to disable the count completely because I am not a style expert. You are free however to do the manual template edit including in the instructions (and below) to find the perfect spot for your Pin button on your style(s).

Please Mark as Installed if you use this. :)
Donations Always Appreciated. :up:

Manual Template Edits

If you have a customized style and the auto edits don't work, or you simply want more control over where the button is and how it looks make one of the manual edits below.

If you are using VB 4.x:

Edit the template postbit or postbit_legacy depending on which one you use on your forum.

Find the code: Directly before (or above) that code paste in: This will show the Pinterest button in the default VB4 location. Feel free to move the template_hook code anywhere in the postbit template for your own custom solutions.

Edit the template postbit_pinterest_vb4 to further customize the button.


If you are using VB 3.x:

Edit the template postbit or postbit_legacy depending on which one you use on your forum.

Find the code: REPLACE that code with this code:This will show the Pinterest button in the default VB3 "message Area" location. Feel free to move the template_hook code anywhere in the postbit template for your own custom solutions.

Edit the template postbit_pinterest_vb3 to further customize the button.

Doesn't work cannot see anything

1) Did you enable the mod and choose the settings (button location and enabled searches(video/image/attachment/etc..)) ?

2) If you did and you have a heavily customized style (like the forum in your sig) you may need to do a manual template edit-
Search your postbit_legacy template and see if you have this line:
If you don't or it's not exactly that you will need to do a manual edit.

3) I forgot to mention this mod likely will not find images or attachments if you use the DbTech Advanced Post Thanks/Like mod. Not sure if that applies.

Also please give me a link to a post that actually has an image or video in it- I browsed a few threads on your forum and couldn't find any such content.

Shame it does not work with the thanks mod from dbtech

It would still find videos and it would still allow avatar or forum logo sharing- just external images and attachments won't work.

I downloaded the dbtech mod to see if I could figure out a way to make them compatible but I can't make heads or tails of dbtech code.

If dbtech could fix their mod so they don't parse the $post['pagetext'] value- or even if they copied $post['pagetext'] to something like $post['noparse'] before parsing I could easily add code to detect if their mod is installed and if so use the alternate $post['noparse'] value when searching for images and attachments.

Those with a coding background may ask why don't I just search the parsed text for images <img> instead of [IMG]. The answer is because if I search parsed text for images and the first image is simply a smiley then the smiley would be the "thumbnail" which isn't going to work well for sharing on Pinterest.

Let me try and contact them and see if they have a solution.

A big thanks to dbtech for getting back to me quickly with a fix for the conflict.

Version 1.01 released which should work fine the the Advanced Thanks/Like mod. :up:

It Works!!!! You are awesome!!!!!!!!!!!!!!!!!!!!!!!!

They get posted to the social networking site "Pinterest" - http://pinterest.com

It's a relatively new fast growing social media site. I think it's currently ranked the 4th largest behind Facebook, Twitter, and YouTube.

Thanks for this. Works really well :)

You must 'Like' someone else's post before liking any more by BirdOPrey5.

:)

Thanks.

Works great! Thanks for this. Nominated for MOTM.

Thanks! :D

I love the hack, have installed the plugin on 3.8 and have done the manual template edit on postbit, but don't see anything. Maybe the $template_hook[postbit_bop_pinterest] is not working as when I view my source I do see the min-height:60px but nothing after that close div.

Should the manual template edit really be $template_hook[postbit_pinterest_vb3]
instead of $template_hook[postbit_bop_pinterest]?????

Nevermind. It is working now. It appears that Pinterest had some lagging issues this morning.

Glad it is working. :up:

Yes Pinterest is growing so fast they tend to be down sometimes. Twitter had the same growing pains in their early days. Still do to a point.

Great mod. What about the albums how can put the code so people can pin photos

Albums, blogs, and the like will be addressed in future versions.

thanks

Hey Joe, for some reason with some posts the 'pin it' image is not completely aligned to the right. Can you perhaps help with that? Thanks.

Attachment 137785

Can I get a link to that post?

Here you go: http://creativx.net/forums/windows-7...tml#post520938

That's weird... What browser are you using?

I just checked with IE9, Firefox, and Chrome and they all looked right to me:

https://vborg.vbsupport.ru/attachmen...1&d=1334500308

Oh wait, i registered on your site, I see what it is...

There is a google "ad" to the right of that pinterest button in that post. For some reason the ad is blank, but if the ad wasn't blank it would be in the right place.

Either fix the ad or remove the ad and the pinterest button will look/work right.

Thanks Joe....but...ehhh....how to fix that man? But OK, not your mod then, so thank you so much for the best support always. I really appreciate it!

Check your ad location templates in your styles or your ad manager in admincp - I'm guessing it is "last post shown" location that has the ad because it only happens on the last post of a page.

Can this be used within the facebook_likebutton template to display once per thread next to the facebook like button? Will it also display in blogs and articles if that is the case?

Edit - I guess not since it's made to put in postbit

No it won't work once per thread because Pinterest is designed for sharing media and that is usually specific to posts.

If you wanted to show it only on the first post though you could edit the "Pin button in Posts" plugin and find the code:

and change it to:

It just seems like making a call x number of threads to pinterest would add a lot of calls to every thread page load.

Thanks Joe!

Actually the javascript loads only once per page. The "calls to pinterest" are just images and once an image is downloaded once the browser doesn't re-download it again anyway. They design it so you can use multiple buttons on one page. :up:

any easy way to move the button down to beside the quote / multiquote links?

Right, I meant the call to get the pin count, which isn't a very large file anyway (0.4kb)

Any idea on how to move the button up next to the post title?

fyi, you should consider moving the default location anyway since quotes can hide it. For example:
http://nikonites.com/photo-critique/...html#post12524

nevermind, I moved it by adding position:relative; top:-35px; to the div to make it:

<div style="position:relative; top:-35px; float: {vb:raw boppin.lorr}; padding-{vb:raw boppin.rorl}: 2px;">"

That is a cool location, thanks for sharing.

I'm sorry I don't have any better ideas on where to position the button- playing with CSS frustrates me.

Hopefully more people will be kind enough to release the edits they made to better position the button like tpearl5 did. :up:

I'm using the VB4 default built in position myself until I can find something better.

Nominated :)

Love it! Thank you!

Nominated!!!