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:
and add
to the end so it looks 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
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]](http://markwood.co.cc/donotdelete/mcompute-facebook-like-1.png)
postbit view (3 likes)
![[Image: mcompute-facebook-like-2.png]](http://markwood.co.cc/donotdelete/mcompute-facebook-like-2.png)
What it looks like on Facebook
![[Image: mcompute-facebook-like-3.png]](http://markwood.co.cc/donotdelete/mcompute-facebook-like-3.png)
You can add the button anywhere really, even the showthread template adding the code
Just under
for example.
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']}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.phpAnd 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)
postbit view (3 likes)
What it looks like on Facebook
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.