[TUT] Adding a Facebook share button to your forum

[Mark]

[TUT] Adding a Facebook share button to your forum

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

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


Steps

1) Here is the button that i created, the code is below.

Code:

<script>
function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436' ​);
return false;
}
</script>

<style>
html .fb_share_button {
padding-top: 7px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 63px;
background:url(http://mcompute.co.uk/images/mcomputemark/facebook_share_button.png)no-repeat top right;
}
</style>

<a href="http://www.facebook.com/share.php?u=<url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;"></a>

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_share']}

to the end so it looks like

Code:

{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_rep']}{$post['button_facebook_share']}

Save the template.

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

Template name: postbit_facebook_share

And add the code in step 1 then save the template.


4) Download and open the file

Code:

inc/functions_post.php

And add the following

[code=php]
eval("\$post['button_facebook_share'] = \"".$templates->get("postbit_facebook_share")."\";");
[/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


pop out view (When the button is pressed)


End result, what it looks like on Facebook.