vb.org Archive - Integration with vBulletin - Add New Facebook "Like" Button and Social Plugins (and OpenGraph to Headinclude)

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)

- - Integration with vBulletin - Add New Facebook "Like" Button and Social Plugins (and OpenGraph to Headinclude) (https://vborg.vbsupport.ru/showthread.php?t=242525)

Add New Facebook "Like" Button and Social Plugins (and OpenGraph to Headinclude)

This modification will add OpenGraph tags to all pages, adding your Content pages to the Open Graph, along with the Facebook 'Like Button' under the navbar for all 'Content' pages.

What does this mean? If you have a Facebook Profile you may have noticed the new layout, where things that you 'like' are arranged by 'type'. Adding OpenGraph tags ensures you will have your pages properly classified and included.

From The Open Graph Protocol :

Quote:

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.
Basic metadata
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".

Install Instructions:
AdminCP - Plugins & Products - Manage Products - [Add/Import Product] , browse to the location of the .xml file you downloaded from this thread, Import it.
Template Modifications
In whichever Templates you wish to have all Features (OpenGraph), you need to add the xmlns to the head.

ie:, find:

PHP Code:


		
			
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}"

Replace with:

PHP Code:


		
			
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect'] || $vboptions['ogfb_onoff']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if><vb:if condition="$vboptions['ogfb_onoff']"> xmlns:og="http://opengraphprotocol.org/schema/"</vb:if> dir="{vb:stylevar textdirection}"

(If there is a way to do this with plugins that wont cause major issues, someone tell me so I can make it happen that way. :) )

Titles
These should be part of the meta tag template that gets plugged in, but figuring out how to pass these variables is lower priority to getting this modification stable, so you need to add them in the templates.

ie: in SHOWTHREAD, find:

PHP Code:


		
			
{vb:raw headinclude}

Add under:

PHP Code:


		
			
<meta property="og:title" content="{vb:raw thread.title}" />

in FORUMDISPLAY, find:

PHP Code:


		
			
{vb:raw headinclude}

Add under:

PHP Code:


		
			
<meta property="og:title" content="{vb:raw foruminfo.title}" />

in MEMBERINFO, find:

PHP Code:


		
			
{vb:raw headinclude}

Add under:

PHP Code:


		
			
{vb:raw headinclude}

<meta property="og:title" content="{vb:raw prepared.username}'s Profile"/>

<meta property="og:description" content="{vb:raw prepared.username}'s Profile "/>

<meta property="og:image" content="<vb:if condition="$vboptions['profilepicenabled']"><vb:if condition="$prepared['profilepicurl']">http://www.nzboards.com/{vb:raw prepared.profilepicurl}<vb:else />http://www.nzboards.com/{vb:stylevar imgdir_misc}/unknown.gif</vb:if></vb:if>"/>

To add the Like Button, in navbar, find:

PHP Code:


		
			
{vb:raw ad_location.global_below_navbar}

add under:

PHP Code:


		
			
<vb:if condition="THIS_SCRIPT != 'login' AND THIS_SCRIPT != 'private' AND THIS_SCRIPT != 'register' AND THIS_SCRIPT != 'usercp' AND THIS_SCRIPT != 'faq' AND THIS_SCRIPT != 'search' AND THIS_SCRIPT != 'newreply' AND THIS_SCRIPT != 'newthread' AND THIS_SCRIPT != 'sendmessage' AND THIS_SCRIPT != 'payments'">{vb:raw fbog_likebutton}</vb:if>

For sites running any form of Facebook Connect - You must use iFrame

Due to the new SDK not yet having Connect, and the 2 flavours of FB not mixing with each other, if you want to use Connect, you have to forgo the extra features of the SDK version that this modification ships with. 0.7 now has logic to show either or, depending on whether you have vB's native FB Connect turned on.

If you don't want to upload to v0.7+ (or are using YAFB or another Connect), replace the content of fbog_like_showthread with:

Code:

<div style="padding: 5px; border: 1px solid #3F6F81; background: #ffffff; font-size: 10px; width: 300px;">

<iframe src="http://www.facebook.com/plugins/like.php?href={vb:raw vboptions.bburl}{vb:raw relpath}&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

</div>

Configuration Instructions
AdminCP - Settings - Options - Opengraph/Facebook Integration
Global On/Off - Set to Yes to turn the system on.
FB - Page Admins - A comma-separated list of the Facebook IDs of the Admins of your pages on Facebook.
FB - API Key - The API Key of your Facebook Application.
OG - Site Name - A short, human-readable name for your site that will appear in the Like on the User's Facebook Activity Stream.

It is important to fill in these, as they are used by FB to fill in some of the information, and allows your pages to be referenced in the Open Graph.

New in Latest Version
Activity Stream -

Quote:

The Activity Feed plugin displays the most interesting recent activity taking place on your site. Since the content is hosted by Facebook, the plugin can display personalized content whether or not the user has logged into your site. The activity feed displays stories both when users like content on your site and when users share content from your site back to Facebook. If a user is logged into Facebook, the plugin will be personalized to highlight content from their friends. If the user is logged out, the activity feed will show recommendations from your site, and give the user the option to log in to Facebook.

The plugin is filled with activity from the user's friends. If there isn't enough friend activity to fill the plugin, it is backfilled with recommendations. If you set the recommendations param to true, the plugin is split in half, showing friends activity in the top half, and recommendations in the bottom half. If there is not enough friends activity to fill half of the plugin, it will include more recommendations.

Recommendations Box -

Quote:

The Recommendations plugin shows personalized recommendations to your users. Since the content is hosted by Facebook, the plugin can display personalized recommendations whether or not the user has logged into your site. To generate the recommendations, the plugin considers all the social interactions with URLs from your site. For a logged in Facebook user, the plugin will give preference to and highlight objects her friends have interacted with.

You specify a site for which to show recommendations for. The domain is matched exactly, so a plugin with site=facebook.com would not include URLs from developers.facebook.com. You cannot currently aggregate across multiple domains.

Both of these options have an on/off toggle in the main FB/OG Options, and are currently manual template placements in postbit or postbit legacy.

Find:

PHP Code:


		
			
                        <vb:if condition="$post['isfirstshown']">

                            {vb:raw ad_location.ad_showthread_firstpost_start}

                            {vb:raw ad_location.thread_first_post_content}

                        </vb:if>

                        <vb:if condition="$post['islastshown']">

                            {vb:raw ad_location.thread_last_post_content}

                        </vb:if>

Replace with:

PHP Code:


		
			
                        <vb:if condition="$post['isfirstshown']">

                            {vb:raw ad_location.ad_showthread_firstpost_start}

                            {vb:raw ad_location.thread_first_post_content}{vb:raw ogfb_activity}

                        </vb:if>

                        <vb:if condition="$post['islastshown']">

                            {vb:raw ad_location.thread_last_post_content}

{vb:raw ogfb_recommendations}

                        </vb:if>

Demo of how they will look: http://www.nzboards.com/the-lounge/r...on-sale-90544/

Changelog.
0.7 - 19.05.2010
"Recommendations actually works, and iFrame version for Connect Users" Version.

0.6 - 18.05.2010
"Removing extra, unnecessary code" Version.

0.5 - 16.05.2010
"Activity and Recommendations" Version.

0.4 - 16.05.2010
"Content Pages" Version.
Both plugins moved to parse_templates so as to work on CMS (and to futureproof?)

0.3 - Unreleased
"Content Pages.. but not CMS? It's CALLED content for God's sake! Ahh. global_start isn't called on the CMS." Version.

0.2 - Unreleased
"Why won't it work on the bloody.. oh, I was changing plugins on the vbseo site version. Lets just throw everything into all the plugins and cross our fingers" Version.

0.1 - 15.05.2010
Initial Release.
Works on Showthread only

What's Next?
This is an early beta release to gauge the interest in Open Graph/Facebook type stuff.
[s]I intend to add the tags to other pages,[/s] and implement some of the other Facebook Social Plugins. These will all be On/Off configurable. Some can be seen in action at:

View Profile: kall - New Zealand Boards - Like for Member Profiles
http://www.nzboards.com/the-lounge/r...on-sale-90544/ - Activity and Recommendation Streams in first and last post.

vBSEO Owners - there's a small issue with the standard version of this Modification. I will release a vBSEO compatible version over at vBSEO.com later. :)

Wow this is a mod you must have. Thanks.

It this not going to be default in vb4.0.4?
thanks for taking the time, but I just feel it will be here in less then a month.

Quote:

Originally Posted by hornstar1337 (Post 2037151)

It this not going to be default in vb4.0.4?
thanks for taking the time, but I just feel it will be here in less then a month.

Yeah? Source? :)

Quote:

Originally Posted by hornstar1337 (Post 2037151)

It this not going to be default in vb4.0.4?
thanks for taking the time, but I just feel it will be here in less then a month.

With the introduction of the Facebook Connect in vBulletin was announced new features would come later, nothing was pointed about those changes so far, i believe few tweaks like this may be added but so far there is no info about that or any other change.

Downloaded and Installed.

Working apart from ( dont really understand how it appears ) the Activity and Recommendation Streams in first and last post

I like the comment part, otherwise I don't see much difference in the other version. (example here)
It's good to see new releases Kall :)

In fact we had Facebook connect disabled.

Soon as I re-enabled it, this modification stopped working

Quote:

Originally Posted by TimberFloorAu (Post 2037180)

In fact we had Facebook connect disabled.

Soon as I re-enabled it, this modification stopped working

YAFB or the default one?

@comments about the activity streams - They're under the 'What's Next' for a reason.. ;)

Quote:

Originally Posted by Loco.M (Post 2037177)

I like the comment part, otherwise I don't see much difference in the other version. (example here)
It's good to see new releases Kall :)

Well, for starters, I'm not seeing any OpenGraph meta tags at all on your page.

(That, and the fact that this is an Options-controlled automatic template insertion..and at last look, the other one was the iframe version. :P )

Quote:

Originally Posted by kall (Post 2037196)

I didn't notice this was for 4.0 either..lol do you have a 3.8 version by chance :)

I suppose I could make one, for you.

This is awesome! I am with Loco.M on a request for a 3.8 version please!

Well. Not quite 'popular' demand, but 2 is enough for me.

https://vborg.vbsupport.ru/showthread.php?t=242536 :) 3.8.4 version. I really just whipped it up quickly, so please advise of any issues.

Hi Kall, sorry havent responded sooner.

Working away at the coast this weekend, and on laptop.

Users report:
1. we are getting stack over flow ( possibly unrelated )
2. yep using stock vb facebook integration.
3. i have disabled all hooks for time being.

4. we are actually having some weird occurences.

All usergroups now see ads lol.
Plus when we click a link, chrome or firefox try to download the page !!
Reported this on vb , i think it is a mysql error on our site

Will try again later, but GREAT hack.

creates serious lag issues

Awesome
is there anyway to get this to work on Album images and blogs?
i have a working CMS one

Thanks again

Quote:

Originally Posted by Animemike (Post 2037725)

Awesome
is there anyway to get this to work on Album images and blogs?
i have a working CMS one

Thanks again

There is, I'm working on that. :)

Early warning: If you are using Standard URLs, you're going to end up pulling your hair out. FB will treat all the different URLs as different pages, so the Like figures wont show right at all.

@TFAu: It will be related to the xmlns stuff in the head, I would guess. YAFB has the same problem.

Quote:

Originally Posted by kall (Post 2037734)

Indeed ive been trying to do this for days gettting it work on albums and blogs am sure you can do it :)

How can i move the Button /box mate. I have i place am after adding it

Thanks again

P.S also Kall on your site when looking at a profile i see "Two" Like buttons :D thought you should know if you didnt :)

Quote:

Originally Posted by Animemike (Post 2037736)

How can i move the Button /box mate. I have i place am after adding it

P.S also Kall on your site when looking at a profile i see "Two" Like buttons :D thought you should know if you didnt :)

Those 2 things would be related... I'm about to release a version that just goes in the navbar and shows on all 'content' pages. I've restricted it with the standard THIS_SCRIPT conditionals that one should use for Ads. (but not removed the old one from the MEMBERINFO template ;) )

I have the vBSEO version ready to go, but now I have to work on the non-vBSEO'd one.

Cheers Kall.

I have never had the YAFB , but .. I know couple of weeks ago, we did a php rollback, to get ioncube working. We have now re-upgraded to latest php.

I will give this hack another go.

Cheers. Ste

Ok done some digging the file that keeps being downloaded, when we are on webpages is receiver.php

Which is the facebook file.
Why on earth.... grrrr ( gonna have to submit support ticket with vb )

Quote:

Originally Posted by TimberFloorAu (Post 2037765)

If it's not working, check the source of a page, look in the very top part. If what I am guessing is true, there'll be a double-up/screwup in there somewhere.

*edit* This modification *does* mess with that stuff in the header.. I have tried to make it non-breaking using conditionals, but yeah.. (it's been a while since I made anything.)

Version 0.4 uploaded - to uninstall, remove the like code from SHOWTHREAD and import the 0.4 product.

This one works on all 'content' pages, comes in the navbar (you need to add the code. :) )

thanks its working good on my forum vb4,3

is there a sollution for vbseo users?

I can't see the like button there is a empty container without the like button

Awesome Kall!

Is it ok to add the code

PHP Code:


		
			
<vb:if condition="THIS_SCRIPT != 'login' AND THIS_SCRIPT != 'private' AND THIS_SCRIPT != 'register' AND THIS_SCRIPT != 'usercp' AND THIS_SCRIPT != 'faq' AND THIS_SCRIPT != 'search' AND THIS_SCRIPT != 'newreply' AND THIS_SCRIPT != 'newthread' AND THIS_SCRIPT != 'sendmessage' AND THIS_SCRIPT != 'payments'">{vb:raw fbog_likebutton}</vb:if>

on the pages i want and it will work fine?
Thanks

dam so close to what i was after added that code to album and blog pages didnt work :(

Quote:

Originally Posted by Animemike (Post 2037923)

Awesome Kall!

Is it ok to add the code

PHP Code:


		
			
<vb:if condition="THIS_SCRIPT != 'login' AND THIS_SCRIPT != 'private' AND THIS_SCRIPT != 'register' AND THIS_SCRIPT != 'usercp' AND THIS_SCRIPT != 'faq' AND THIS_SCRIPT != 'search' AND THIS_SCRIPT != 'newreply' AND THIS_SCRIPT != 'newthread' AND THIS_SCRIPT != 'sendmessage' AND THIS_SCRIPT != 'payments'">{vb:raw fbog_likebutton}</vb:if>

on the pages i want and it will work fine?
Thanks

dam so close to what i was after added that code to album and blog pages didnt work :(

That was the plan.. how 'doesnt it work'?

*edit* You do have to put the code in the navbar template at the moment...

Quote:

Originally Posted by kall (Post 2038075)

That was the plan.. how 'doesnt it work'?

*edit* You do have to put the code in the navbar template at the moment...

Dam i dont want it in the navbar :/

thats why its not working than

It doesn't really *look* like it's in the navbar, not in the traditional sense like a button..

http://www.nzboards.com/the-lounge/r...on-sale-90544/ - see it there? That's not cool? :(

Where did you want it exactly? I'm in the beginnings of a nasty head cold, so I'll try to see how to explain it. (Basically, you should be able to get it to display in any template by adding that template to the PreRegister stuff in the plugins.)

Quote:

Originally Posted by kall (Post 2038087)

Ah i see
well am trying to add it in
Template: blog_show_entry (id: 1924)
Template: album_pictureview (id: 1926
Template: postbit_legacy (id: 1809)
Template: vbcms_content_article_page (id: 1925)
Template: 8WR_media_details (id: 2407)
Sorry about your head
Tho my head has been killing me all this week trying to get this to work also
So i feel your pain lol

Thanks again
Kall

If you could give me a example of one of those am sure will pick it up ok / or maybe not :D

postbit_legacy? *sigh* That other mod has totally corrupted everyone. It's not supposed to be for the post.. unless it's showpost.php, it's supposed to be for the page. (If you wanted it on every post, it can't.. because it would show the same 'page' for every post and the click would give the Like to that page, not the individual post.)

Having said that..

Under this line in the Navbar and Metatag plugins:

PHP Code:


		
			
vB_Template::preRegister('blog_entry',array('facebook_liked_url' => $facebook_liked_url));

Try adding:

PHP Code:


		
			
vB_Template::preRegister('blog_show_entry',array('facebook_liked_url' => $facebook_liked_url));

(adding whatever template you want it to show in.)

Quote:

Originally Posted by kall (Post 2038102)

PHP Code:


		
			
vB_Template::preRegister('blog_entry',array('facebook_liked_url' => $facebook_liked_url));

Try adding:

PHP Code:


		
			
vB_Template::preRegister('blog_show_entry',array('facebook_liked_url' => $facebook_liked_url));

(adding whatever template you want it to show in.)

Awesome and sorry about the postbit_legacy it worked so didnt think anything was wrong :o
Thanks for the code above, Now i just want to see if i got this right :D
Lets say am doing this one "8WR_media_details"

PHP Code:


		
			
vB_Template::preRegister('8WR_media_details',array('facebook_liked_url' => $facebook_liked_url));

Just add that same as you just said?
Thanks again Kall <3

Quote:

Originally Posted by Animemike (Post 2038112)

PHP Code:


		
			
vB_Template::preRegister('8WR_media_details',array('facebook_liked_url' => $facebook_liked_url));

Just add that same as you just said?
Thanks again Kall <3

That should do it.. I'm not entirely happy with the way I have coded it, it's all probably doubled-up and not needed in both, but hey.. it's Beta, and as long as it works, right? :)

Quote:

Originally Posted by hornstar1337 (Post 2037151)

It this not going to be default in vb4.0.4?
thanks for taking the time, but I just feel it will be here in less then a month.

Here's the source - Adrian's blog:

Quote:

Open Graph and Social Plug-ins
Facebook has come up with a protocol that allows external webpages to fit into their social graph model using meta tags. The basic idea behind Open Graph is that web publishers can add certain meta tags to their webpages that will classify the page according to FB's graph schema. Then, the publisher can add a social plug-in, like the "Like Button" to this web page. The web page then becomes a part of Facebook's social graph, and user's can "Like" your webpage, and it will show up in the user's "About Me" section classified by the meta tags from the page. There are many ways we can leverage this functionality with vBulletin, but off the top of my head I believe we can classify threads, blog posts, and articles with dynamic meta data about the content, add a plug-in (configurable from admincp of course), and allow users to share and discuss vB content from within Facebook. While this may seem like we lose traffic to Facebook, it will actually make vBulletin activity more visible, and should increase participation on the vBulletin boards.
http://developers.facebook.com/docs/opengraph
http://developers.facebook.com/docs/...e/plugins/like

Quote:

Originally Posted by kall (Post 2038113)

That should do it.. I'm not entirely happy with the way I have coded it, it's all probably doubled-up and not needed in both, but hey.. it's Beta, and as long as it works, right? :)

Dont work mate :/ tryed all the templates i listed using
Just dont show the button

Code:

<vb:if condition="THIS_SCRIPT != 'login' AND THIS_SCRIPT != 'private' AND THIS_SCRIPT != 'register' AND THIS_SCRIPT != 'usercp' AND THIS_SCRIPT != 'faq' AND THIS_SCRIPT != 'search' AND THIS_SCRIPT != 'newreply' AND THIS_SCRIPT != 'newthread' AND THIS_SCRIPT != 'sendmessage' AND THIS_SCRIPT != 'payments'">{vb:raw fbog_likebutton}</vb:if>

Too add the button

Try just {vb:raw fbog_likebutton} (the conditional is because it's in navbar).

Did you add the new line for the template to both plugins?

Quote:

Originally Posted by kall (Post 2038130)

Try just {vb:raw fbog_likebutton} (the conditional is because it's in navbar).

Did you add the new line for the template to both plugins?

Yea i added them to both mate and that didnt work also :(

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01869 seconds Memory Usage 1,940KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (20)bbcode_php_printable (21)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: