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:

[dr1]

It's relates to using the latest version of Facebook’s JavaScript SDK

http://www.allfacebook.com/2010/04/o...connect-sites/

[cdoyle]

I've been playing around with this a little more using the XFBML method instead of the IFrame. This allows users to enter a comment that appears on their wall, and it also enters a better description on the wall too, with your forum banner thumbnail. I've attached a screenshot of how it looks on the wall.

You'll need to register your ap, and get an ID to place into the code below.

http://developers.facebook.com/setup/

You can try it out http://www.caraudiocentral.net/forums

The thing I'm still unsure of is, sometimes I'll go back to a post and where I clicked like before, it's now saying 'be the first' when I know I clicked it earlier. So I'm not sure if FB is doing stuff on their end that is messing it up or what.

<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>

[cdoyle]

Since I can't seem to create an account at the facebook developers forum, I'm hoping someone here will know.

Is there a way to see who clicked the like button?
Right now if a button says 3 people clicked this, who are the 3 people?

[Gamelobby]

Originally Posted by hubie

Fix for private messages and first post on every first page issues:

Replace:

<if condition="!$GLOBALS['FIRSTPOSTID']">

by:

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

I dont mind it being on every post, but i would like it to not show on PM's.

Originally Posted by cdoyle

Since I can't seem to create an account at the facebook developers forum, I'm hoping someone here will know.

Is there a way to see who clicked the like button?
Right now if a button says 3 people clicked this, who are the 3 people?

Use the code for this one instead..

[cdoyle]

Originally Posted by Gamelobby

Use the code for this one instead..

The problem with the Iframe version is it doesn't allow the user to add a comment when they click on it. So on their wall it only shows a small recent activity link.

If they add a comment, it show more on their wall. See my screenshot above.

Is there a way to use the xfbml version, and still get a count and friends who clicked with faces etc.

[Stubbed]

Changed mine to "Recommend"

I <3 Facebook.

[bplinson]

Works great.

I like this but, like other have said, it would be much better if the person could comment on the link. The way it is now it only produces a small link on the persons personal wall as "Recent Activity".

It needs to be modified so that the link appears in the "News Feed"

[marshal_ramdev]

thanks for this one mate

[hubie]

Originally Posted by cdoyle

I've been playing around with this a little more using the XFBML method instead of the IFrame. This allows users to enter a comment that appears on their wall, and it also enters a better description on the wall too, with your forum banner thumbnail. I've attached a screenshot of how it looks on the wall.

You'll need to register your ap, and get an ID to place into the code below.

http://developers.facebook.com/setup/

You can try it out http://www.caraudiocentral.net/forums

The thing I'm still unsure of is, sometimes I'll go back to a post and where I clicked like before, it's now saying 'be the first' when I know I clicked it earlier. So I'm not sure if FB is doing stuff on their end that is messing it up or what.

<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>

Thanks mate!, i put it in the first post :up:

[efil]

Hello,
Is the Add-on working with a vb 3.6?