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:

[cdoyle]

has anyone came up with a way to fix the button not showing in IE?

[ckelley]

IDK, but I tried to install this exactly as the instructed, and absolutely nothing happened. I added it directly after <controls> and nothing happened, I tried the first two codes presented, and then tried the facebook generated code that cdoyle found and nothing happened. I then went to </controls> and entered them there just above that thinking maybe I misunderstood the instructions and still nothing at all happened.

I AM running 3.8.5. Here www.syntheticmotorsports.org, although that won;t due much good as it still has not effected the appearance of the site in any way after installation attempts.

[t.uzuner]

thanks thats work

[ARSamo]

Originally Posted by kall

I've not installed this mod, but.. have you defined the og: stuff?

Try: http://www.nzboards.com/new-zealand-...t-3-5-a-90512/ (it's under the Reply to Thread/Thread Title), then check my FB profile.

i want to add button like u say....
what do i do...
further more i want to add book mark, recent activity and members helpful post to every post in my forum .... define plz....
thnx in advance.......

[cdoyle]

So is this working in IE for everyone else?

[ckelley]

I can't get it to work at all, according to everything I see, it is fully installed but nothing happens. This is in FF, IMHO, no need to test IE until I get it in FF.

[Brandon Sheley]

Originally Posted by kall

I've not installed this mod, but.. have you defined the og: stuff?

Try: http://www.nzboards.com/new-zealand-...t-3-5-a-90512/ (it's under the Reply to Thread/Thread Title), then check my FB profile.

That's pretty slick, how did you do that?

[UnganWeb]

Originally Posted by Loco.M

That's pretty slick, how did you do that?

+1.

[cdoyle]

Originally Posted by ckelley

I can't get it to work at all, according to everything I see, it is fully installed but nothing happens. This is in FF, IMHO, no need to test IE until I get it in FF.

Not sure why FF wouldn't work, could you post the code you're currently using?

[hubie]

Here's a fix of IE issue changing some code. With this code the button is now displayed in IE browser.

Please let me know if it's working properly.

<div id="fb-root"></div> <script> 
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '100673979977717',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };
 
  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script> <fb:like layout="standard" show_faces="true" width="300" action="like" colorscheme="light" />

*Note: If you use the appId that appears in the code above, you'll get an interesting effect 'onmouseover' with the title of thread.