PDA

View Full Version : Integration with vBulletin - Pinterest Sharing System by BOP5 for VB 3.8 & VB 4.x! (Pinterest Pin Button Mod)


BirdOPrey5
04-11-2012, 10:00 PM
Brought to you by BirdOPrey5
www.Qapla.com (http://www.qapla.com/mods/)

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

This mod has been nominated for Mod Of The Month - Please visit the MOTM Thread (https://vborg.vbsupport.ru/showthread.php?t=282271), view all the entries, and vote for your favorite mod.

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.1.12 and should work on older and newer versions as well.

Live Demos:
VB4 Demo: Pinterest Share Demo at Qapla.com (http://www.qapla.com/mods/showthread.php/352-Pinterest-Share-Demo)
VB3 Demo: Pinterest Share Demo Thread - JUOT - Joe's Ultimate Off Topic (http://www.juot.net/forums/showthread.php?t=73268)

Pinterest (http://www.pinterest.com) 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 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 the avatar of the poster as the thumbnail send 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 [I]Mark as Installed if you use this. :)
Donations Always Appreciated. :up:

BirdOPrey5
04-12-2012, 01:08 AM
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: <div class="content<vb:if condition="$show['first_ad'] OR $show['last_ad']"> hasad</vb:if>">

Directly before (or above) that code paste in: {vb:raw template_hook.postbit_bop_pinterest}

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: <div id="post_message_$post[postid]">

REPLACE that code with this code: <div id="post_message_$post[postid]" style="min-height:60px; position:relative; "> $template_hook[postbit_bop_pinterest]

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.

BirdOPrey5
04-12-2012, 11:42 AM
Thanks to dbtech for a quick solution to the conflict with the Advanced Thanks/Like mod. Version 1.01 resolves the issue.

tommydamic68
04-12-2012, 10:58 PM
I would love to try this mod but for some unknown reason i am unable to "pin" anything from my computer, would safari have anything to do with my problem? i have followed instructions on adding it into my broweser and i tried your demo page with no luck-0 pins on my profile page on Pinterest.com.....?:confused:

Adam H
04-12-2012, 11:16 PM
Good work Joe. Might install this one one of my boards at the weekend.

BirdOPrey5
04-13-2012, 12:49 AM
I would love to try this mod but for some unknown reason i am unable to "pin" anything from my computer, would safari have anything to do with my problem? i have followed instructions on adding it into my broweser and i tried your demo page with no luck-0 pins on my profile page on Pinterest.com.....?:confused:

Have you ever been able to pin anything before?

What happens when you click on the pin button?

What should happen is a small window opens with a thumbnail image, description box, and submit button (like in the screen shots.)

After hitting submit in a few seconds the window should say "Pin successfully submitted" or something like that with two buttons- one to view the pin and one to tweet the pin.

I have confirmed it worked fine with Safari for me.

Do you have JavaScript enabled?

tommydamic68
04-13-2012, 08:26 AM
Have you ever been able to pin anything before?

What happens when you click on the pin button?

What should happen is a small window opens with a thumbnail image, description box, and submit button (like in the screen shots.)

After hitting submit in a few seconds the window should say "Pin successfully submitted" or something like that with two buttons- one to view the pin and one to tweet the pin.

I have confirmed it worked fine with Safari for me.

Do you have JavaScript enabled?

I have never been able to pin. After hitting the pin it button it appears to take but does not confirm pin. I did check and have javascript enabled. What the heck? I don't get it.


Think i just figured it out- you must have a board to pin>>>>? dah! thanks! will give mod a shot!

BirdOPrey5
04-13-2012, 09:03 AM
Cool. Please Mark as Installed if you end up using it. :up:

v123shine
04-14-2012, 06:12 AM
Try to install...thank you :)

SaN-DeeP
04-14-2012, 10:01 AM
nice one BirdOPrey5, was looking for pintrest addon to my sites.

karkey
04-29-2012, 06:43 AM
hello,
Seems to not show up at present, is there any hooks that the mod needs to help work ?

As I am on a custom designed skin

BirdOPrey5
04-29-2012, 10:36 AM
As it says in the info txt file there is a manual template edit you can try:


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: <div id="post_message_$post[postid]">

- REPLACE that code with this code: <div id="post_message_$post[postid]" style="min-height:60px; position:relative; "> $template_hook[postbit_bop_pinterest]

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.


There are also instructions for a VB4 template edit but as this is the VB 3.8 forum I assume that is what you are looking for.

jlew24asu
05-04-2012, 12:11 PM
edit. figured it out. great mod!

jlew24asu
05-04-2012, 12:24 PM
:) :) :)

This mod has been nominated for May Mod of the Month.

Please visit the MOTM Thread (https://vborg.vbsupport.ru/showthread.php?t=282271), view all the entries, and vote for your favorite mod.

:) :) :)

voted!

jlew24asu
05-04-2012, 01:26 PM
when there are several photos in a post, this mod only gives you the option to Pin the top photo in the thread. is there a way to have this mod open all photos in the post and give the user the option which photo to Pin?

I've seen this done on some blogs.

http://chicagophotoshop.com/forums/showpost.php?p=77751&postcount=190

BirdOPrey5
05-04-2012, 02:48 PM
I'm working on a way to enable the option of lettings user's pick the image. So far the javascipt to do that seems to be incompatible with javascript to keep counts- and Pinterest has no developer resources yet.

The next update will likely include this option but it will be at the expense of having a counter unless I can figure it out by then.

jlew24asu
05-04-2012, 02:51 PM
awesome. personally, I dont think the counts is a big deal.

Morrus
06-13-2012, 02:24 PM
Is there any way this can be added to SHOWTHREAD instead (while referencing the first post)? That's where my Facebook, Google+ and Twitter buttons are, and I think it would look kinda messy having the Pinterest button in a different location.

BirdOPrey5
06-14-2012, 10:23 AM
No, not as coded- would require major changes.

mannclann
07-04-2012, 07:18 PM
I am feeling a little stupid. I added the mod manually but I can't for the life of me find the first screenshot that you show, that looks like a setup screen.

Where do I find this?

Thanks

Rick

BirdOPrey5
07-04-2012, 07:29 PM
In VB4

Admin CP -> Settings -> Options -> Pinterest Share System by BOP5 (usually near the bottom)

IN VB3

Admin CP -> vBulletin Options -> vBulletin Options -> Pinterest Share System by BOP5 (usually near the bottom)

mannclann
07-04-2012, 09:08 PM
Thanks!,

Got it working now.

Rick

BirdOPrey5
07-04-2012, 09:39 PM
Thanks!,

Got it working now.

Rick

Thanks. Please click the "Mark as Installed" box in the top post. :)

ricardoNJ
01-11-2013, 05:08 AM
TEST THIS URL: http://www.arteforos.com/showthread.php?t=177

THAT DOES NOT WORK when I select "PIN IT" (PINEAR)

BirdOPrey5
01-12-2013, 02:06 PM
I believe it's due to the encoding of the non-English characters. I do not know a work around, sorry.