Add-On Releases - Add Facebook "Like" button to your threads [vB 3.8.x]

This mod is based on this, but working on vB 3.8.x.

As was said there: Facebook has just launched their latest "Like" button to developers to use on any site. What this does is utilizes the Advertising module to add the "Like" button to the first post of each thread. Please see screenshots to get an idea.

DEMO

IFrame Method

There is two kind of "Like" button (IFrame Method):

- With a smallest counter at his side *

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.YOURSITE.com/showthread.php$session[sessionurl]?p=$post[postid]&amp;layout=button_count&amp;show_faces=true&amp;width=&amp;action=like&amp;colorscheme=light" 
scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:20px"></iframe>

- With a largest counter (and names of people who have clicked) *

<iframe src="http://www.facebook.com/widgets/like.php?href=http://www.YOURSITE.com/showthread.php$session[sessionurl]?p=$post[postid]&amp;show_faces=false&amp
        scrolling="no" frameborder="0" 
        style="border:none; width:450px; height:25px"></iframe>

*Change show_faces=false for true if you want to see faces

Installation:

Go to your Postbit/Postbit Legacy template and search for:

<!-- controls -->

And add below the code that you previously selected according your favorite button style.

If you want that the button only appears in first post of a thread, add this variables at the beginning and end of the code that you previously selected:

<if condition="$post[postcount] == 1">YOUR CODE</if>

*You should add these variables, otherwise the button will be displayed in every post, which makes no sense.



XFBML Method (recommended)
This is a richer way to send the contents of your board to Facebook, because it gives to users the possibility to add more information and also an image of your site is displayed on their FB wall (see the screenshots below).

Installation: (provided by cdoyle, thanks mate :up

You'll need to register your app here: http://developers.facebook.com/setup/, and get an ID to place into the code below.

<if condition="$post[postcount] == 1 AND !in_array($GLOBALS[forumid], array(40, 39))">


<p><fb:like></fb:like></p>

<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: 'yourappID', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>


</if>

-----------------------------------------------------------------------------------------------------

Internet Explorer browser fix: https://vborg.vbsupport.ru/showpost....5&postcount=70

-----------------------------------------------------------------------------------------------------

For additional information on this button and different parameters please visit http://developers.facebook.com/docs/...e/plugins/like

Remember to click Mark as Installed if you use this modification :up:

[alehawk]

Ah yes, I got it, it may be that... tnx 4 the reply!

[ram94401]

Thank you hubie. I added like button next to Post Reply button in each thread. I like it this way instead of placing the like button after first post. Like button is more prominent if you place it in the top of thread -- just my thought.

I modfied showthread template. Find

<td class="smallfont"><a 

href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" 

rel="nofollow">

and create another td element after this td; place the iframe tag between the new td tags.

To see how it looks, see http://www.digitalbhoomi.in/forums/.

Complete code:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
	<if condition="$show['largereplybutton']">
	<td width="120px;" valign="top" class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></a>
        </td>
        <td>
        <iframe scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.digitalbhoomi.in/forums/showthread.php?t=$thread[threadid]&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=30" style="border: medium none; overflow: hidden; width: 450px; height: 30px;" allowtransparency="true"></iframe>
        </td>	
	
        <else />

I used iframe instead of xfbml. The reason is that xfbml needs Javascript SDK which mess up with flash ads in the page. Facebook has a solution for this, but it's not working. Moreover, I don't want to add too many javascripts in the forum page that will slow down the page loading.

[soundbarrierpro]

Anybody knows how this will work with vbSEO? How would you change standard URL format to SEO urls?

ex. http://www.mysite.com/forum-name/topic-name.html

?

Thank you

[ram94401]

Originally Posted by soundbarrierpro

Anybody knows how this will work with vbSEO? How would you change standard URL format to SEO urls?

ex. http://www.mysite.com/forum-name/topic-name.html

?

Thank you

For Like URL, you dont need to optimize it for SEs. If you want to do it, I guess it may not be too difficult. Find the variable for forum name and topic name and format it the way you want it.

[soundbarrierpro]

Originally Posted by ram94401

For Like URL, you dont need to optimize it for SEs. If you want to do it, I guess it may not be too difficult. Find the variable for forum name and topic name and format it the way you want it.

The URL added to my FB page isn't a direct link to the topic I "like". Instead since my URL's are SEO'd, the link added on facebook is just my domain name. If a facebook friend clicks the link that was liked, it just goes to my base domain URL, not the topic.

I need to know how I can code http://www.YOURSITE.com/showthread.php$session[sessionurl]?p=$post[postid]&show_faces=false&amp

To be an SEO’d URL

[kall]

Originally Posted by ram94401

For Like URL, you dont need to optimize it for SEs. If you want to do it, I guess it may not be too difficult. Find the variable for forum name and topic name and format it the way you want it.

That's not true. If vB says one URL, but when Facebook's spider hits it, it sees the vBSEO URL (or vice-versa), the Like will not work.

@soundbarrierpro: There is a thread at vbseo.com that deals with this, just search for Facebook over there.

[paradoxx109]

Hi, excellent mod, but I have 2 issues, I have already read every post here but nothing worked.

First: im using FF 3.5.10 and when I hit the like button, the pop up loops between like and unlike and wont stop.

Second: When you use it in IE, it works fine, but when you go to your FB wall the link redirects to a page not found, because is not including the post number.

Im using the IFrame code and vB 3.8.6PL1

Any tips?

[paradoxx109]

my second issue above has been already fixed.

Now i wonder, is there any way I can locate the like button just aside the twitter as in this mod

https://vborg.vbsupport.ru/showthread.php?t=248568

Any help will be appreciated.

[hubie]

Originally Posted by paradoxx109

my second issue above has been already fixed.

Now i wonder, is there any way I can locate the like button just aside the twitter as in this mod

https://vborg.vbsupport.ru/showthread.php?t=248568

Any help will be appreciated.

Post #4 of that thread explains how to locate the like button. Take a look to his code.

[Carlos X]

I have vbSEO installed, so does this work with the facebook like? o_O

And, I'm english spoken, I see another language in your ScreenCaps.