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:

[malakaikingston]

Originally Posted by BirdOPrey5

In your headinclude you should have several "og" meta lines... one of them is for title and should be :

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

That's what mine is and it uses only the thread title as the subject.

I have no og meta lines.

Should I add them?

If so where?

[BirdOPrey5]

Definitely everyone who uses the Like button should have these headers... Put them anywhere in your headinclude template.

<meta property="og:title" content="$threadinfo[title]"/> 
<meta property="og:site_name" content="$vboptions[bbtitle]"/>  
<meta property="og:image" content="http://www... path to image/logo.jpg">
<meta property="og:type" content="article" />

The og:image one is the only one you need to customize... make this a URL of an image you want to use when someone likes your page, usually the site logo- but it should be "roughly" square. Facebook will resize it as needed within reason though.

[malakaikingston]

Originally Posted by BirdOPrey5

Definitely everyone who uses the Like button should have these headers... Put them anywhere in your headinclude template.

<meta property="og:title" content="$threadinfo[title]"/> 
<meta property="og:site_name" content="$vboptions[bbtitle]"/>  
<meta property="og:image" content="http://www... path to image/logo.jpg">
<meta property="og:type" content="article" />

The og:image one is the only one you need to customize... make this a URL of an image you want to use when someone likes your page, usually the site logo- but it should be "roughly" square. Facebook will resize it as needed within reason though.

Cool I added all those and they work well, except for the image, I got it to work in the case of linking with urls (like posting links on the fan page) but it never showed up via the like button.

This is the code I am using

<meta property="og:image" content="http://www.silverfishlongboarding.com/images/logo.jpg">

Is there a way to fix it to use an image via the like button but still be able to choose the images when linking to it from offsite, such as on the fan page?

If I have to choose one or the other I would rather be able to choose but just thought I should ask.

Thanks for all the help, yer great.

[BirdOPrey5]

I don't think there's a way to choose, if so I haven't found it. You can remove the whole line to go back to how it was.

If you're using the iframe method the image won't ever show unfortunately.

[malakaikingston]

Originally Posted by BirdOPrey5

I don't think there's a way to choose, if so I haven't found it. You can remove the whole line to go back to how it was.

If you're using the iframe method the image won't ever show unfortunately.

ahhhhh okay.

good to know, thanks.

[malakaikingston]

Originally Posted by BirdOPrey5

I don't think there's a way to choose, if so I haven't found it. You can remove the whole line to go back to how it was.

If you're using the iframe method the image won't ever show unfortunately.

Can you clarify something for me, does adding this code in any way link up to my sites fan page? Is there a way to do that if it doesn't?

Thanks again.

[BirdOPrey5]

I believe the fan page is totally independent. I don't know of any way to "link" them. There is one additional "og" tag where you can add your facebook id to be the admin of the like button but I don't believe it really does anything for the like button as implemented in this mod.

<meta property="fb:admins" content="9999999999"/>

Replace 999999999999 with your facebook id number.

How to find your facebook ID

[malakaikingston]

Originally Posted by BirdOPrey5

I believe the fan page is totally independent. I don't know of any way to "link" them. There is one additional "og" tag where you can add your facebook id to be the admin of the like button but I don't believe it really does anything for the like button as implemented in this mod.

<meta property="fb:admins" content="9999999999"/>

Replace 999999999999 with your facebook id number.

How to find your facebook ID

Okay cool thanks.

[Mahoni999]

edit:

Anyone knows how we can get the Language changed in the IFrame Version?

Kind Regards

[Replicators]

I got sort of a request if anyone is willing to try, instead of having the like button inside the postbit, is it possible to have it in it's own box below the first post? I cannot get it situated right without it screwing up the postbit.

Also for the meta stuff, it doesn't seem to work for me. I put the stuff in the headinclude template with correct info, but when it gets to facebook it is as it was before. Maybe i am missing something though, i don't even know what it means by og or how the code would know that that meta is for facebook and not the site itself.