Integration with vBulletin - 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:

[Sunka]

Thanks BOP5, but no, it is not working totally OK.
Before you click on Like/thanks button, Pinterest icon with number shows in post. When i put mouse pointer, it shows that link is javascript:void(0) and on click popup shows like it should be.

After click on thanks/like button, post refresh and Pinterest icon is change to icon without number. Click on icon open new tab, and when you put mouse pointer, I see that now is not javascript like before, but link:

http://pinterest.com/pin/create/button/?url=http//:www.pijanitvor.com/showthread.php...

[BirdOPrey5]

Yeah, I was afraid of that... The Ajax call dbech's mod is using loads the new post, but the javascript of the showthread page was already loaded. I added the javascript code to showpost (it works fine in showpost on VB 3.8) but since it's not using the showpost as the full page the javascript isn't being loaded again.

I'm afraid I don't know how I could change this mod any further to force the javascript to reload on the AJAX call by the dbtech mod. It seems like something that would need to be initiated by their mod.

Have you tried using a different location for the Pin button? It seems very weird the whole post needs to reload on a "Like."

[Sunka]

I tried all possible options in ACP, but result is same.
Maybe solution is to move pinterest icon in post track (where is Like button here on vBorg)?

[DragonByte Tech]

Originally Posted by BirdOPrey5

Yeah, I was afraid of that... The Ajax call dbech's mod is using loads the new post, but the javascript of the showthread page was already loaded. I added the javascript code to showpost (it works fine in showpost on VB 3.8) but since it's not using the showpost as the full page the javascript isn't being loaded again.

I'm afraid I don't know how I could change this mod any further to force the javascript to reload on the AJAX call by the dbtech mod. It seems like something that would need to be initiated by their mod.

Have you tried using a different location for the Pin button? It seems very weird the whole post needs to reload on a "Like."

The reason why the whole post reloads is the fact that the whole - or part of - the post can be hidden, as well as attachments.

It ended up being too much grief to try to manually re-insert those elements into the post on button click, when the showpost.php could do it all with less hassle.

I don't know what JS code you want to load, but if you're using jQuery and its .live() or .on() functions, it works when new elements are inserted into the DOM.


Fillip

[BirdOPrey5]

Thanks for the explanation Fillip.

I'm not using jquery or anything really- the Pinterest Pin button requires a block of javascript code to run to turn their static image into their button with counter. This code must run after all the static images have loaded.

I'm not even sure running it a second time will work but I hope it would.

The Pinterest JavaScript that needs to be called is this:

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);

    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);

})(); 
</script>

[DragonByte Tech]

In that case I don't know if these mods will work together period D:

Does your mod work if someone uses Quick Edit on a post? I think that also refreshes the post.

What about if someone expands a deleted post?

Fillip

[BirdOPrey5]

No it doesn't work after a quick edit, it needs to be reloaded... Hmmm.

[Wakey]

When I click the pintrest button I get the popup to post it but when I click Pin It it just reloads the popup with a black image and no description. Nothing gets posted to my pintrest account Where as on the test sites it tells you it was successful and offers you the chance to tweet it.

Any idea whats wrong?

[BirdOPrey5]

Not off hand, link to a thread?

[Wakey]

Does it on all of them but here's one

http://forum.rcflightline.com/showth...?p=859#post859