The Arcive of Official vBulletin Modifications Site.

Add "LIKE" button and other Facebook plugins to threads. · **Released**: 05-25-2010

UPDATED: 7/4/10

What's new?
Facebook Comment Box

I recently added the new facebook "Like" button to my forum and I want to share with everyone!

Yes, this is IE,Firefox, Opera, Safari compatible.
Yes, this will also show a "comment" box when hover over.

First thing's first:

1. Go to http://www.facebook.com/developers/createapp.php (Facebook account required)

2. Enter your site name in the "Application Name" field... "agree" - "Create new app"

3. Click the Website tab

4: Enter your site URL in the "Connect URL" field.

i.e. http://www.DOMAIN.com/ (Don't forget the SLASH).

5. Enter DOMAIN.com in the "Base Domain" field and save.

6. In the next page you will see an "Application ID" number. (you'll need it later... keep the window open for now)

Template Edits:

headinclude:
Under:

PHP Code:


			
<meta name="generator" content="vBulletin $vboptions[templateversion]" />

Paste:

PHP Code:


			
<meta property="og:title" content="$threadinfo[title]"/>

<meta property="og:site_name" content="$vboptions[bbtitle]"/>

<meta property="og:type" content="website" />

<meta property="og:image" content="IMAGEPATH"/>

<meta property="fb:admins" content="YOUR PROFILE ID"/>

* Replace IMAGEPATH with the actual path to the image you want to be displayed on people's facebook wall. (You can use your site logo)
*YOUR PROFILE ID = http://www.facebook.com/profile.php?id=randomnumbers

++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++

SHOWTHREAD
Find:

PHP Code:


			
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">

Replace with:

PHP Code:


			
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" xmlns:fb="http://www.facebook.com/2008/fbml" lang="$stylevar[languagecode]">

++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++

under:

PHP Code:


			
<body onload="$onload">

Paste:

PHP Code:


			
<div id="fb-root"></div>

<script src="/images/fb.js" type="text/javascript"></script>

*Download and open the attached .js file, Replace "APP ID" with your actual app ID. (not to be confused with profile ID)
*Save and upload fb.js to root/images
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++

Find:

PHP Code:


			
<!-- / multiquote scripts -->

</if>

Add below:

PHP Code:


			
<!-- Facebook Comment --> 

<br /> 

<if condition="in_array($bbuserinfo[usergroupid],array(1))"><div align="center">

<fb:comments numposts="3" width="800"></fb:comments>

</div></if>

<!-- / Facebook Comment -->

*This will place the Facebook Comment box below the last post, you may change the width to your liking.
*The comment box will only be shown to guests.
++++++++++++++++++++++++++++++++++++++

Now we need to place the "LIKE" button somewhere visible.

I use postbit_legacy so, this is what I did:
Find:

PHP Code:


			
<if condition="$post['title']"><strong>$post[title]</strong></if>

            </div>

Add below:

PHP Code:


			
<if condition="$post[postcount] == 1"><table style="background-color: #ff0000;">

<tr style="background-color: yellow;">

<td style="background-color: #fff;" align="right"><fb:like href="$vboptions[bburl]/showthread.php$session[sessionurl]?p=$post[postid]" width="260"></fb:like></td>

</tr>

</table></if>

* This will place the like button below the first post of every thread.
* you may change the table color to suit your needs.
---------------------------------------------------------------------------
Thanks to BirdOPrey5 for pointing out some mistakes.

Mark as Installed if you use this modification.

DONE! =]

carsafety · #**102** 10-20-2010, 06:01 PM

I've been testing the Like button today. One suggestion so far is that anyone using the opengraph meta tags consider using the value "article" instead of "website" for the og:type tag. I noticed that when using website, every time a page was liked, it would create a Facebook fan page for that particular thread, as if it was its own website. I didn't want to end up with thousands of fan pages being created, as I read that others were banned for using the website tag outside of their homepage. I'm not sure if there are other functional differences, but that is one to consider if you have a lot of threads on your forum.

BirdOPrey5 · #**103** 10-20-2010, 07:21 PM

I've actually had to (temporarily I hope) remove this mod from my threads because there is a bug with Internet Explorer that causes the page to be blank and reload in the browser with a different url.
http://blog.facesharp.com/2010/10/05...ing-analytics/

It's causing some serious issues with Analytics, SEO, etc... This particular link mentions it's IE6 an the XFBML implementation but it has also been reported with the iframe and newer ie versions.

When I checked my google logs sure enough this was happening at my site too.

carsafety · #**104** 10-20-2010, 07:54 PM

Quote:

Originally Posted by BirdOPrey5

I've actually had to (temporarily I hope) remove this mod from my threads because there is a bug with Internet Explorer that causes the page to be blank and reload in the browser with a different url.
http://blog.facesharp.com/2010/10/05...ing-analytics/

It's causing some serious issues with Analytics, SEO, etc... This particular link mentions it's IE6 an the XFBML implementation but it has also been reported with the iframe and newer ie versions.

When I checked my google logs sure enough this was happening at my site too.

I saw this in the other mod thread, along with this link-

http://www.searchmarketingman.com/20...utton-bug.html

How can I duplicate the blank page issue? The mod appears to be working for me (I am only using the Like button, not the comment box app). The link appears on Facebook and correctly directs to the correct forum page.

According to the searchmarketingman page, you can force Google/Yahoo/etc not to index the fragment pages. That seems to resolve the issue for me.

My question is, were else would someone find a link to the fragment/duplicate page? From facebook? Obviously, I don't want people finding blank pages, but it's not clear to me how they find them. Incidentally, his page says iframe works correctly at the bottom, but I don't like it as much since it doesn't give the comment box.

carsafety · #**105** 10-20-2010, 08:03 PM

Quote:

Originally Posted by BirdOPrey5

I've actually had to (temporarily I hope) remove this mod from my threads because there is a bug with Internet Explorer that causes the page to be blank and reload in the browser with a different url.
http://blog.facesharp.com/2010/10/05...ing-analytics/

It's causing some serious issues with Analytics, SEO, etc... This particular link mentions it's IE6 an the XFBML implementation but it has also been reported with the iframe and newer ie versions.

When I checked my google logs sure enough this was happening at my site too.

Also, did you try the custom channerl URL fix mentioned in the link you provided? If so and if it worked, can you please let me know the details of where and how you implemented the code?

BirdOPrey5 · #**106** 10-20-2010, 08:38 PM

I don't know how to replicate it but when I looked at google analytics there werre dozens, maybe hundreds of those "fragment" URLs and if I followed those URLs sure enough I got the blank page... This means some people were also getting blank pages- now none of my members complained so maybe it was random visitors... I don't know.To be safe I removed all Facebook elements from my threads but I kept the like button on my homepage.

As a backup I did implement the channel url fix. It involves making a new blank HTML file with the 1 line of code mentioned on the page that describes the fix, then adding extra code to the facebook code... i wont know if its working until a few days go by and i don't see anymore fragment urls.

in the mean time i added the share button from www.addthis.com which has facebook, twitter, and 200+ other sites to share with, but a custom javascript so shouln't be affected by this bug,

carsafety · #**107** 10-20-2010, 09:19 PM

Quote:

Originally Posted by BirdOPrey5

As a backup I did implement the channel url fix. It involves making a new blank HTML file with the 1 line of code mentioned on the page that describes the fix, then adding extra code to the facebook code... i wont know if its working until a few days go by and i don't see anymore fragment urls.

Newb question, but I'm not a coding expert. Can I simply add the following code:

channelUrl: 'http://example.com/channel.html'

to the relevant location in the fb.js file that is downloaded for this mod?

If not, where do you implement the Fb.init code otherwise?

Quote:

in the mean time i added the share button from www.addthis.com which has facebook, twitter, and 200+ other sites to share with, but a custom javascript so shouln't be affected by this bug,

I tried the Wibiya bar, but I had a lot of problems with slow loading and other user complaints, among other issues. Is the addthis button any better? I noticed the Wibiya bar just seemed to integrate the Facebook app code into their bar, but I have no idea if that resolves the bug or not.

BirdOPrey5 · #**108** 10-20-2010, 11:04 PM

I never tried the Wibiya bar so I can't compare but addthis seems fast (faster than facebook's button would load infact) and I've had no complaints. I just don't like it as much because it opens the facebook post in a new tab instead of a small pop-up window like the real facebook like button does.

As for the fix- in the .js file:

Add a comma to the end of the "xfbml" line and add the following line below it:

Code:

channelUrl:'http://www.yoursite.com/channel.html'

Change yoursite.com to your URL obviously.

And make a channel.html file in your web root wirh only this line in it:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

carsafety · #**109** 10-20-2010, 11:50 PM

Quote:

Originally Posted by BirdOPrey5

I never tried the Wibiya bar so I can't compare but addthis seems fast (faster than facebook's button would load infact) and I've had no complaints. I just don't like it as much because it opens the facebook post in a new tab instead of a small pop-up window like the real facebook like button does.

As for the fix- in the .js file:

Add a comma to the end of the "xfbml" line and add the following line below it:

Code:

channelUrl:'http://www.yoursite.com/channel.html'

Change yoursite.com to your URL obviously.

And make a channel.html file in your web root wirh only this line in it:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

Thanks! That's what I thought but I'd have certainly missed the comma.

I'm testing the addthis button now, too. It doesn't seem to format as nicely where I want it to the left of the edit/quote buttons. It also doesn't allow for comments with the "Like" button and the share utility is cumbersome and somewhat of a duplication of what I have in the vBulletin Bookmarks bar. It looks like Addthis uses the same FB application.

BirdOPrey5 · #**110** 10-21-2010, 01:00 AM

It certainly allows comments for me... when I click on Facebook on Add This it opens a new tab with a box that says "What's on your mind" with the image I set in the meta tags added by this mod. Whatever I type in that box is the 'comment" and it puts it on my wall with the comment and link.

carsafety · #**111** 10-21-2010, 01:55 AM

Quote:

Originally Posted by BirdOPrey5

It certainly allows comments for me... when I click on Facebook on Add This it opens a new tab with a box that says "What's on your mind" with the image I set in the meta tags added by this mod. Whatever I type in that box is the 'comment" and it puts it on my wall with the comment and link.

Oh I think you must have used a different Addthis bar. I just added the default one in a different spot (showthread first post start ad location template) and it looks fine there and works like you said.

Before I used the one with the Facebook Like on the left side, followed by tweet, followed by the share utility. The Like part will only "Like" a thread when I use it, it doesn't pop up a mouse-over comment box like this mod does. You could still go to the Share section and pop up the Facebook sharer app that's the same as the others, of course.

I like the hover comment box on the "Like" button of this mod and it plays nicer with the postbit legacy template in terms of formatting than Addthis does. I hope they fix the bug soon. I'm going to test it for a couple weeks then go live if I don't see any other issues. Perhaps just the Google/Yahoo exclusions and the url channel will suffice.

By the way you can see mine live at www.car-seat.org without registration. For now, you do have to select the "Facebook Test" style from the style selector to see the mod and Addthis.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06153 seconds Memory Usage 2,399KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (4)bbcode_code (10)bbcode_php (6)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (11)post_thanks_box (2)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (6)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

2 благодарности(ей) от:
sodasusu, ye22

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!