howtothings.co.uk   ›   Computing   ›   Website Development, Implementation and General Webmaster Support   ›   [TUT] How to add a Facebook "Like" button to your forum

  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[TUT] How to add a Facebook "Like" button to your forum
Mark
Tech Support
*******
Joined: May 2010
Posts: 1,995

Reputation: 0
#1
04-12-2010, 09:17 PM
[TUT] How to add a Facebook "Like" button to your forum

This is a tutorial on how to add a Facebook "Like" button to your forum's postbit, this means that it'll appear at the bottom of every post including the initial one.

Note: Any member that wishes to "Like" the post on Facebook must have their own Facebook account.


Steps

1) Go to http://developers.facebook.com/docs/refe...ugins/like and design your button, the code will be similar to below. The code below is what i used.

[code=html]
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="button_count" show_faces="false" width="450"></fb:like>
[/code]

2) Log into your forum and go to

Admin CP > Templates & Style > Templates > *your template* > Post Bit Templates > postbit

Find:
Code:
{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_rep']}

and add

Code:
{$post['button_facebook_like']}

to the end so it looks like

Code:
{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_rep']}{$post['button_facebook_like']}
Save the template.

3) Now, go to Admin CP > Templates & Style > Templates > *your template* > Post Bit Templates > Add Template

Template name: postbit_facebook_like

Add the folling code into the large white text area

[code=html]
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="button_count" show_faces="false" width="450"></fb:like>
[/code]

Save the template.


4) Download and open the file

Code:
inc/functions_post.php

And add the following

[code=php]
eval("\$post['button_facebook_like'] = \"".$templates->get("postbit_facebook_like")."\";");
[/code]

Save and re-upload the file, replacing the old one.


Further Explanation

So you've finished or.. you want to know what it looks like before you start changing things.

Live demo: http://mcompute.co.uk

postbit view (no likes)
[Image: mcompute-facebook-like-1.png]

postbit view (3 likes)
[Image: mcompute-facebook-like-2.png]

What it looks like on Facebook
[Image: mcompute-facebook-like-3.png]



You can add the button anywhere really, even the showthread template adding the code

Code:
<!-- Facebook like button (start) -->
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<style>
.facebooklikestyle {
float: left;
padding-right:1400px;
}
</style>

<fb:like class="facebooklikestyle" layout="button_count" show_faces="false" width="450"></fb:like>
<!-- Facebook like button (end) -->

Just under

Code:
<body>
    {$header}
    {$pollbox}

for example.
  Reply
Mark
Tech Support
*******
Joined: May 2010
Posts: 1,995

Reputation: 0
#2
27-10-2012, 03:16 PM
(26-10-2012, 07:32 PM)tamnguyen949 Wrote: Save and re-upload the file, replacing the old one.??
where is the file?

Oops... messed up the thread layout a bit and had that all in one coding [], the file is in /public_html/inc/ and is called functions_post.php
  Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  [TUT] Adding a Facebook share button to your forum Mark 1 16,168 14-05-2011, 01:12 AM
Last Post: Mark
  [TUT] Adding a twitter button to your forum Mark 0 9,822 04-12-2010, 06:48 PM
Last Post: Mark

Forum Jump: