Facebook like button

Looking for a MOD? Have a MOD request? Post here for help. (Note: This forum is community supported; phpBB does not have official MOD authors)
Ideas Centre
Skinny Vinny
Registered User
Posts: 230
Joined: Tue Dec 01, 2009 7:10 pm

Re: Facebook like button

Post by Skinny Vinny » Wed Aug 11, 2010 3:54 pm

I did start to toy with it a bit ago (as seen on SVmods) as an extension from the connect hook, but I haven't released anything for the public yet.

The ideal use here would be to have them on the topics, etc, and a 'thanks/hugs/whatever' voting system on the individual posts. Many are requesting fb likes on every post, but it's a horrible idea imho as you end up splitting your fb 'votes' into 10, 20, whatever pieces on the page, plus your pages are going to dance and take longer to resolve in many cases.

In my release, you will be able to configure site wide, enable/disable on individual forums, configure like or recommend by individual forum, and option to dictate light or dark scheme for individual styles to override a default.

i will not be continuing the work on it until I have all of the connect hook documentation completed. I absolutely hate authoring pages of content, but it has to be done lol. I'm going to be away today and tonight, so everything skinny is on pause.

Soumik: what issues are you having running the xfbml likes along side connect features? I'm running them just fine: index page carries 2 like buttons (faces on bottom button) along side the fb:login button fine in fox, ie, safari, and chrome with async in latest version on demo site. Or was it some compatibility issue between the mod and one of the past connect attempts?
Last edited by Skinny Vinny on Wed Aug 11, 2010 3:57 pm, edited 1 time in total.

User avatar
heredia21
Registered User
Posts: 942
Joined: Sun Apr 18, 2010 6:14 pm
Contact:

Re: Facebook like button

Post by heredia21 » Wed Aug 11, 2010 3:56 pm

Skinny Vinny wrote:I did start to toy with it a bit ago (as seen on SVmods) as an extension from the connect hook, but I haven't released anything for the public yet.

The ideal use here would be to have them on the topics, etc, and a 'thanks/hugs/whatever' voting system on the individual posts. Many are requesting fb likes on every post, but it's a horrible idea imho as you end up splitting your fb 'votes' into 10, 20, whatever pieces on the page, plus your pages are going to dance and take longer to resolve in many cases.

In my release, you will be able to configure site wide, enable/disable on individual forums, configure like or recommend by individual forum, and option to dictate light or dark scheme for individual styles to override a default.

i will not be continuing the work on it until I have all of the connect hook documentation completed. I absolutely hate authoring pages of content, but it has to be done lol.

Soumik: what issues are you having running xfbml likes along side connect features? I'm running them just fine: index page carries 2 like buttons (faces on bottom button) along side the fb:login button fine in fox, ie, safari, and chrome with async in latest version on demo site.
Your facebook login mod was a success in my opinion. Cant wait till you release the Facebook like the "proper" way. Let me know if you need anything testing.
Best BlackBerry website for all users! BlackBerry News - http://blackberryempire.com

WWu777
Registered User
Posts: 601
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

Re: Facebook like button

Post by WWu777 » Wed Dec 15, 2010 7:58 pm

I've installed the facebook like button in my forum. But the button only shares the index of the forum so that no matter which thread you are in when you click it, you will only be sharing the forum index page on your Facebook account.

I have not figured out how some forums are able to adapt the Like button to every thread page, as the Facebook page that generates the code for it only allows you to enter one URL per code. If anyone has any idea how to get the code to apply to each page automatically, feel free to let me know. Here is the Facebook Like Button code generator if you want to try to figure it out:

http://developers.facebook.com/docs/ref ... ugins/like

User avatar
keitzy
Registered User
Posts: 359
Joined: Thu Nov 12, 2009 6:32 am
Location: Esperance, Western Australia
Contact:

Re: Facebook like button

Post by keitzy » Mon Feb 14, 2011 11:28 am

Been doing some major research and playing around with javascript. I will be fully doing a mod for all the FBJS stuff for phpbb. Just gotta get steam mod ouyta the way.

Will put up a couple of example forums with the new FBJS style like buttons and stuff in the near future.
:idea:
Image

User avatar
keitzy
Registered User
Posts: 359
Joined: Thu Nov 12, 2009 6:32 am
Location: Esperance, Western Australia
Contact:

Re: Facebook like button

Post by keitzy » Tue Mar 01, 2011 6:08 pm

I have the xfbml buttons working atm as facebook still have not released a true js type like to FB.ui as a method.

So here it is. Facebook like button for each individual posts.
http://www.ausgamingcore.com/alt/viewtopic.php?f=2&t=1
Image

bloomie
Registered User
Posts: 27
Joined: Sat Jan 29, 2011 3:11 pm

Re: Facebook like button

Post by bloomie » Tue Mar 01, 2011 7:10 pm

it looks beautiful!

where can it be downloaded or is it not available yet?

Shlomi
Registered User
Posts: 22
Joined: Tue Mar 01, 2011 9:01 am
Contact:

Re: Facebook like button

Post by Shlomi » Tue Mar 01, 2011 11:27 pm

It's looks great!
It works in iframe?
Thanks.

User avatar
rosdi
Registered User
Posts: 166
Joined: Wed May 14, 2008 10:26 am
Contact:

Re: Facebook like button

Post by rosdi » Tue Mar 01, 2011 11:32 pm

keitzy wrote:I have the xfbml buttons working atm as facebook still have not released a true js type like to FB.ui as a method.

So here it is. Facebook like button for each individual posts.
http://www.ausgamingcore.com/alt/viewtopic.php?f=2&t=1
nice. let us know where to download the mod file

User avatar
keitzy
Registered User
Posts: 359
Joined: Thu Nov 12, 2009 6:32 am
Location: Esperance, Western Australia
Contact:

Re: Facebook like button

Post by keitzy » Tue Mar 01, 2011 11:49 pm

I have to add some admin switches to it yet.
  • turn faces on and off
  • change the size of the width
  • change the style of either light or dark
  • switch it from single topic to multiple post or both
  • change like button from like button to fb:comments
  • facebook appId and secret in the required fields
  • then package it all in automod
Watch this space :)
Image

Fredalone
Registered User
Posts: 18
Joined: Wed Oct 13, 2010 8:48 am

Re: Facebook like button

Post by Fredalone » Wed Apr 13, 2011 7:57 am

hmmm... very cool...

but I just want to put in every message/topic an "like" button from facebook..

can someone give me the code and were I put it?

thanks ;)

porpoisemuffins
Registered User
Posts: 9
Joined: Sun Jun 12, 2011 3:02 am

Re: Facebook like button

Post by porpoisemuffins » Sun Jun 12, 2011 3:10 am

I used the "Thanks for Posts" mod and tweaked the language files, CSS, and some of the code to create a "like" button very similar to Facebook's. You can see my implementation here: http://www.saturdaymorningsonic.com/for ... =10&t=3887

I removed some of the functionality of the "Thanks for Posts" mod which didn't seem necessary for my application (i.e. the whole ratings display, which didn't make much sense to me).

Let me know if you have any questions about what I did. Feel free to use the custom like button I made.

User avatar
keitzy
Registered User
Posts: 359
Joined: Thu Nov 12, 2009 6:32 am
Location: Esperance, Western Australia
Contact:

Re: Facebook like button

Post by keitzy » Sun Jun 12, 2011 12:32 pm

Image

bloomie
Registered User
Posts: 27
Joined: Sat Jan 29, 2011 3:11 pm

Re: Facebook like button

Post by bloomie » Sun Jun 12, 2011 10:19 pm

porpoisemuffins wrote:I used the "Thanks for Posts" mod and tweaked the language files, CSS, and some of the code to create a "like" button very similar to Facebook's. You can see my implementation here: http://www.saturdaymorningsonic.com/for ... =10&t=3887

I removed some of the functionality of the "Thanks for Posts" mod which didn't seem necessary for my application (i.e. the whole ratings display, which didn't make much sense to me).

Let me know if you have any questions about what I did. Feel free to use the custom like button I made.
Is there a place to download your version or a place that explains your tweaks for us non programmers? I like the changes you made, would just love a "like" button with no other frills. Not sure I would know how to modify the "thanks for posts" mod myself.

It LOOKS great!

porpoisemuffins
Registered User
Posts: 9
Joined: Sun Jun 12, 2011 3:02 am

Re: Facebook like button

Post by porpoisemuffins » Mon Jun 13, 2011 3:37 pm

bloomie wrote:Is there a place to download your version or a place that explains your tweaks for us non programmers? I like the changes you made, would just love a "like" button with no other frills. Not sure I would know how to modify the "thanks for posts" mod myself.

It LOOKS great!
Thanks. I'll try and get a step-by-step explanation together when I get a few moments.

porpoisemuffins
Registered User
Posts: 9
Joined: Sun Jun 12, 2011 3:02 am

Re: Facebook like button

Post by porpoisemuffins » Wed Jun 15, 2011 6:46 pm

Okay, here we go.

This is for the thanks_for_posts_1_3_0 mod to make it look and behave more like the Facebook "like" button.

1. Install the original mod as described in the install_thanks_mod.xml file (open the xml file in your web browser). MAKE SURE to back up both your database and your files. If you've made any CSS or imageset edits from within the Admin Control Panel (ACP), you will lose them after installing this mod!!!! I found this out the hard way. If nothing else, copy and paste your CSS changes from the ACP to a text document. This way you can paste it back in and restore it after the mod.

2. After the standard mod installation is complete and you've restored any lost CSS from the ACP, open language/en/mods/thanks_mod.php and replace everything that's there with the following. This will edit all the language to make it more Facebooky:

Code: Select all

<?php
/**
*
* thanks_mod[English]
*
* @package language
* @version $Id: thanks.php,v 127 2010-04-17 10:02:51Палыч $
* @copyright (c) 2008 phpBB Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
* DO NOT CHANGE
*/
if (!defined('IN_PHPBB'))
{
   exit;
}

if (empty($lang) || !is_array($lang))
{
	$lang = array();
}

// DEVELOPERS PLEASE NOTE
//
// All language files should use UTF-8 as their encoding and the files must not contain a BOM.
//
// Placeholders can now contain order information, e.g. instead of
// 'Page %s of %s' you can (and should) write 'Page %1$s of %2$s', this allows
// translators to re-order the output of data while ensuring it remains correct
//
// You do not need this where single placeholders are used, e.g. 'Message %d' is fine
// equally where a string contains only two placeholders which are used to wrap text
// in a url you again do not need to specify an order e.g., 'Click %sHERE%s' is fine
//
// Some characters you may want to copy&paste:
// ’ » “ ” …
//

$lang = array_merge($lang, array(
	'GIVEN'						=> 'Likes&nbsp;given',
	'GRATITUDES'				=> 'Likes',
	
	'INCORRECT_THANKS'			=> 'Invalid Like',
	
	'JUMP_TO_FORUM'				=> 'Jump to forum',
	'JUMP_TO_TOPIC'				=> 'Jump to topic',

	'FOR_MESSAGE'				=> ' for post',
	'FURTHER_THANKS'     	    => ' and one more user',
	'FURTHER_THANKS_PL'         => ' and %d more users',
	
	'NO_VIEW_USERS_THANKS'		=> 'You are not authorised to view the Likes list.',

	'RECEIVED'					=> 'Likes&nbsp;received',
	'REMOVE_THANKS'				=> '\'Unlike\' this post by ',
	'REMOVE_THANKS_CONFIRM'		=> 'Are you sure you want to unlike this post?',
	'REPUT'						=> 'Rating',
	'REPUT_TOPLIST'				=> 'Toplist',
	'RETING_LOGIN_EXPLAIN'		=> 'You are not authorised to view the toplist.',
	'RATING_NO_VIEW_TOPLIST'	=> 'You are not authorised to view the toplist.',
	'RATING_VIEW_TOPLIST_NO'	=> 'Toplist is empty or disabled by administrator',
	'RATING_FORUM'				=> 'Forum',
	'RATING_POST'				=> 'Post',
	'RATING_TOP_FORUM'			=> 'Rating forums',
	'RATING_TOP_POST'			=> 'Rating posts',
	'RATING_TOP_TOPIC'			=> 'Rating topics',	
	'RATING_TOPIC'				=> 'Topic',
	'RETURN_POST'				=> 'Return',

	'THANK'						=> 'time',
	'THANK_FROM'				=> 'from',
	'THANK_TEXT_1'				=> 'liked ',
	'THANK_TEXT_2'				=> '\'s post.',
	'THANK_TEXT_2pl'			=> '\'s post. (%d in total)',
	'THANK_POST'				=> '\'Like\' this post by ',
	'THANKS'					=> '',
	'THANKS_BACK'				=> 'Return',
	'THANKS_INFO_GIVE'			=> 'You have liked this post.',
	'THANKS_INFO_REMOVE'		=> 'You have unliked this post.',
	'THANKS_LIST'				=> 'View/Close list',
	'THANKS_PM_MES_GIVE'		=> 'Someone liked one of your posts',
	'THANKS_PM_MES_REMOVE'		=> 'Someone unliked one of your posts',
	'THANKS_PM_SUBJECT_GIVE'	=> 'Someone liked your post',
	'THANKS_PM_SUBJECT_REMOVE'	=> 'Someone unliked your post',
	'THANKS_USER'				=> '\'Likes\' Statistics',
// Install block
	'THANKS_INSTALLED'			=> 'Thanks for the message',
	'THANKS_INSTALLED_EXPLAIN'  => '<strong>CAUTION!<br />Strongly recommend to run this installation only after following the instructions on changes to the code files conference (or perform the installation using AutoMod)!<br />Also strongly recommend select Yes to Display Full Results (below)!</strong>',
	'THANKS_CUSTOM_FUNCTION'	=> 'Update values table _thanks',
));
?>
3. Open styles/prosilver/template/forumlist_body.html

FIND

Code: Select all

<!-- BEGIN reput -->
					<!-- IF forumrow.reput.S_THANKS_FORUM_REPUT_VIEW and forumrow.reput.FORUM_REPUT and not S_IS_BOT -->
					<span style="display: block;">
						<!-- IF forumrow.reput.S_THANKS_REPUT_GRAPHIC -->
						<span style="display: block; float: left; width: {forumrow.reput.THANKS_REPUT_GRAPHIC_WIDTH}; height: {forumrow.reput.THANKS_REPUT_HEIGHT}; background: URL({forumrow.reput.THANKS_REPUT_IMAGE_BACK});"><span style="display: block; height: {forumrow.reput.THANKS_REPUT_HEIGHT}; width: {forumrow.reput.FORUM_REPUT}; background: URL({forumrow.reput.THANKS_REPUT_IMAGE});"></span></span>&nbsp;
						<!-- ENDIF -->
					{L_REPUT}:&nbsp;{forumrow.reput.FORUM_REPUT}	
					</span>
					<!-- ENDIF -->
					<!-- END reput -->
REPLACE WITH

Code: Select all

<!-- BEGIN reput -->
					<!-- IF forumrow.reput.S_THANKS_FORUM_REPUT_VIEW and forumrow.reput.FORUM_REPUT and not S_IS_BOT -->
					<span class="likes-forum-view">
						<!-- IF forumrow.reput.S_THANKS_REPUT_GRAPHIC -->
						<span style="display: block; float: left; width: {forumrow.reput.THANKS_REPUT_GRAPHIC_WIDTH}; height: {forumrow.reput.THANKS_REPUT_HEIGHT}; background: URL({forumrow.reput.THANKS_REPUT_IMAGE_BACK});"><span style="display: block; height: {forumrow.reput.THANKS_REPUT_HEIGHT}; width: {forumrow.reput.FORUM_REPUT}; background: URL({forumrow.reput.THANKS_REPUT_IMAGE});"></span></span>&nbsp;
						<!-- ENDIF -->
					{L_REPUT}:&nbsp;{forumrow.reput.FORUM_REPUT}	
					</span>
					<!-- ENDIF -->
					<!-- END reput -->
This just adds a CSS class (likes-forum-view) to the ratings (stars) that show up below each title in the the forum view. Allows you to get rid of them through the CSS later if you don't want them to show up (I didn't want this feature and assume you don't either).

4. Open: styles/prosilver/template/viewforum_body.html

FIND

Code: Select all

					<!-- BEGIN reput -->
					<!-- IF topicrow.reput.S_THANKS_TOPIC_REPUT_VIEW and topicrow.reput.TOPIC_REPUT and not S_IS_BOT -->
					<span style="display: block;">
						<!-- IF topicrow.reput.S_THANKS_REPUT_GRAPHIC -->
						<span style="display: block; float: left; width: {topicrow.reput.THANKS_REPUT_GRAPHIC_WIDTH}; height: {topicrow.reput.THANKS_REPUT_HEIGHT}; background: URL({topicrow.reput.THANKS_REPUT_IMAGE_BACK});"><span style="display: block; height: {topicrow.reput.THANKS_REPUT_HEIGHT}; width: {topicrow.reput.TOPIC_REPUT}; background: URL({topicrow.reput.THANKS_REPUT_IMAGE});"></span></span>&nbsp;
						<!-- ENDIF -->
					{L_REPUT}:&nbsp;{topicrow.reput.TOPIC_REPUT}
					</span>
					<!-- ENDIF -->
					<!-- END reput -->
REPLACE WITH

Code: Select all

<!-- BEGIN reput -->
					<!-- IF topicrow.reput.S_THANKS_TOPIC_REPUT_VIEW and topicrow.reput.TOPIC_REPUT and not S_IS_BOT -->
					<span class="likes-forum-view">
						<!-- IF topicrow.reput.S_THANKS_REPUT_GRAPHIC -->
						<span style="display: block; float: left; width: {topicrow.reput.THANKS_REPUT_GRAPHIC_WIDTH}; height: {topicrow.reput.THANKS_REPUT_HEIGHT}; background: URL({topicrow.reput.THANKS_REPUT_IMAGE_BACK});"><span style="display: block; height: {topicrow.reput.THANKS_REPUT_HEIGHT}; width: {topicrow.reput.TOPIC_REPUT}; background: URL({topicrow.reput.THANKS_REPUT_IMAGE});"></span></span>&nbsp;
						<!-- ENDIF -->
					{L_REPUT}:&nbsp;{topicrow.reput.TOPIC_REPUT}
					</span>
					<!-- ENDIF -->
					<!-- END reput -->
Same idea as in step 3.

5. Open: styles/prosilver/template/viewtopic_body.html

FIND

Code: Select all

		<!-- IF postrow.THANKS and postrow.THANKS_POSTLIST_VIEW -->
			<hr />
			<div class="content">
				<!-- IF not postrow.S_POST_ANONYMOUS and not S_IS_BOT-->
				<dl class="postbody small">
					<dt>{postrow.THANK_TEXT}{postrow.POST_AUTHOR_FULL}{postrow.THANK_TEXT_2}</dt>
					<dd>{postrow.THANKS}</dd>
				</dl>
				<!-- ENDIF -->	
			</div>
		<!-- ENDIF -->
		<!-- IF postrow.S_THANKS_POST_REPUT_VIEW and postrow.POST_REPUT and not postrow.S_POST_ANONYMOUS and not S_IS_BOT -->
			<div class="content">
				<dl class="postbody">
					<dt class="small"><strong>{L_REPUT}:</strong>&nbsp;{postrow.POST_REPUT}</dt>
					<dd>
					<!-- IF postrow.S_THANKS_REPUT_GRAPHIC -->
					<div style="width: {postrow.THANKS_REPUT_GRAPHIC_WIDTH}; height: {postrow.THANKS_REPUT_HEIGHT}; background: URL({postrow.THANKS_REPUT_IMAGE_BACK});"><div style="height: {postrow.THANKS_REPUT_HEIGHT}; width: {postrow.POST_REPUT}; background: URL({postrow.THANKS_REPUT_IMAGE});"></div></div>&nbsp;
					<!-- ENDIF -->
					</dd>
				</dl>
			</div>
		<!-- ENDIF -->
REPLACE WITH

Code: Select all

<!-- IF postrow.THANKS and postrow.THANKS_POSTLIST_VIEW -->
			<hr />
			<div class="content">
				<!-- IF not postrow.S_POST_ANONYMOUS and not S_IS_BOT-->
				<dl class="postbody small">
					<dd class="like"><span class="thumbs-up"><img src="/forums/styles/prosilver/imageset/thumbs-up.png"></span>{postrow.THANKS}</dd>
					<dt class="like-text">{postrow.THANK_TEXT}{postrow.POST_AUTHOR_FULL}{postrow.THANK_TEXT_2}</dt>
				</dl>
				<!-- ENDIF -->	
			</div>
		<!-- ENDIF -->
		<!-- IF postrow.S_THANKS_POST_REPUT_VIEW and postrow.POST_REPUT and not postrow.S_POST_ANONYMOUS and not S_IS_BOT -->
			<div class="like-rating">
				<dl class="postbody">
					<dt class="small"><strong>{L_REPUT}:</strong>&nbsp;{postrow.POST_REPUT}</dt>
					<dd>
					<!-- IF postrow.S_THANKS_REPUT_GRAPHIC -->
					<div style="width: {postrow.THANKS_REPUT_GRAPHIC_WIDTH}; height: {postrow.THANKS_REPUT_HEIGHT}; background: URL({postrow.THANKS_REPUT_IMAGE_BACK});"><div style="height: {postrow.THANKS_REPUT_HEIGHT}; width: {postrow.POST_REPUT}; background: URL({postrow.THANKS_REPUT_IMAGE});"></div></div>&nbsp;
					<!-- ENDIF -->
					</dd>
				</dl>
			</div>
		<!-- ENDIF -->
This rearranges some of the text output at the bottom of each post and adds some classes so we can style it in the CSS. Also adds in our little thumbs up image. Make sure that the image path ("/forums/styles/prosilver/imageset/thumbs-up.png") has the correct root directory name (yours might not be "forums"). I don't know the correct way to avoid having to specify this.

6. Go to styles/prosilver/imageset and add these images:

http://saturdaymorningsonic.com/forums/ ... t/like.png
http://saturdaymorningsonic.com/forums/ ... unlike.png
http://saturdaymorningsonic.com/forums/ ... mbs-up.png

7. Open styles/prosilver/imageset/imageset.cfg

FIND

Code: Select all

img_thankposts = thankposts.gif*20*20
img_removethanks = removethanks.gif*20*20
REPLACE WITH

Code: Select all

img_thankposts = like.png*43*40
img_removethanks = unlike.png*43*40
8. Go into the Admin Control Panel (ACP) > Styles > Themes > prosilver Edit and add this to the bottom of your CSS:

Code: Select all

.like, .like-text {
       display: inline;
}

.likes-forum-view, .like-rating, .icon-thanks_toplist {
        display: none;
}

.thumbs-up {
        padding-right: 5px;
}
This hides all the ratings features and formats the likes at the bottom of your posts in a nice Facebooky fashion.

9. In the ACP, Go to the Styles tab > Templates > prosilver Refresh

This will apply all of your changes to your forum.

10. You may also want to check the "Thanks Settings" under the .Mods tab in the ACP. For example, I disabled "thanks time" and "counters of thanks" in my implementation.

Hopefully that covers everything. If something doesn't look right, let me know.

Locked

Return to “[3.0.x] MOD Requests”