Responsive Facebook comments

Phoca modules - support for all Phoca modules except Phoca Gallery modules
peterchris1986
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 21 Mar 2015, 18:47

Re: Responsive Facebook comments

Post by peterchris1986 »

Okay.

Can you see what is wrong if you get a link to the page?

The link is http://www.luksuste.dk/index.php/ugens-te-fra-cakao

The problem is when a see my page from a mobile, then the box is way to wide:0...
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Responsive Facebook comments

Post by Jan »

Hi, in the settings (see html source code), there is:

style="width:40"

which means, that the fixed width is set there. Such cannot be responsive :idea:

Jan
If you find Phoca extensions useful, please support the project
peterchris1986
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 21 Mar 2015, 18:47

Re: Responsive Facebook comments

Post by peterchris1986 »

I have changed the width from 40 to 100% under the module manager - but this has not changed anything.

Do you have any ideas as to what might be wrong?
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Responsive Facebook comments

Post by Jan »

Hi, in the html code is: style="width:100" which means px, the percentage is not there :idea: The percentage needs to be set directly in the code:

modules/mod_phocafacebook_comments/tmpl/default.php and you need to add the % there - just search for the "width"

Jan
If you find Phoca extensions useful, please support the project
User avatar
buddybradley
Phoca Newbie
Phoca Newbie
Posts: 1
Joined: 18 May 2015, 00:25

Re: Responsive Facebook comments

Post by buddybradley »

Hi Jan, sorry to bother you

I modified the CSS file like you said, but I think I did something wrong because the module doesn´t change size:

Code: Select all

echo '<fb:comments href="'.  $tmpl['uri'] .'" '.$cCount.' style="width:100%"'.  (int)$tmpl['fb_comment_width'] .'" '.$colorScheme.'></fb:comments>';
Is this code OK? Do I have to put the "100" or just the "%", or both, like I did?

Thanks a lot!!
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Responsive Facebook comments

Post by Jan »

Hi, it is OK: width:100%

Jan
If you find Phoca extensions useful, please support the project
phmedia
Phoca Newbie
Phoca Newbie
Posts: 1
Joined: 26 May 2015, 12:12

Re: Responsive Facebook comments

Post by phmedia »

i dig into this problem because i needed it for my site, and did those changes dont know if they are properly made but they work so no garantuee

1) /modules/mod_phoca_facebook_comments/tmpl/default.php replace the line 112 with this

Code: Select all

echo '<fb:comments href="'.  $tmpl['uri'] .'" '.$cCount.' style="width:100%'.'" '.$colorScheme.' data-width="100%"></fb:comments>';
2) to your custom css add this

Code: Select all

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}

.fb_iframe_widget span[style] {width: 100% !important;}
3) and in the modules/mod_phoca_facebook_comments/assets/style.css change all the fixed width to width: 100% !important; just to be sure so you will get something like this

Code: Select all

#phoca-facebook-comments {
	position:relative;
	width: 100% !important;
}
/* Twitter */
#phoca-facebook-comments .pfbct {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* PlusOne */
#phoca-facebook-comments .pfbcp {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Send */
#phoca-facebook-comments .pfbcs {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Like */
#phoca-facebook-comments .pfbcl {
	clear:both;
	position:relative;
	display:block;
	padding: 2px;
	text-align:left;
}
/* FB Comments */
#phoca-facebook-comments .pfbcc {
	float: left;
	width: 100% !important;
	clear:both;
	padding: 2px;
}
/* LinkedIn */
#phoca-facebook-comments .pfbci {
	float: left;
	width: 100% !important;
	padding: 2px;
}

/* MySpace */
#phoca-facebook-comments .pfbcm {
	float: left;
	width: 100% !important;
	padding: 2px;
}

#phoca-facebook-comments .cb {
	clear:both;
}
5) put with into the module in format 100% dont know if this is necesary but all together it works ;-)

tested on android phone and tablet, chrome, firefox worked beautifully with responsive template from rockettheme
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Responsive Facebook comments

Post by Jan »

Hi, thank you for the guide.

Jan
If you find Phoca extensions useful, please support the project
madona
Phoca Newbie
Phoca Newbie
Posts: 1
Joined: 08 Jan 2016, 17:31

Re: Responsive Facebook comments

Post by madona »

Thanks very much Phmedia, it worked for me. Please my question is on #2, where do I locate my "Custom CSS"?
i dig into this problem because i needed it for my site, and did those changes dont know if they are properly made but they work so no garantuee

1) /modules/mod_phoca_facebook_comments/tmpl/default.php replace the line 112 with this

Code: Select all

echo '<fb:comments href="'.  $tmpl['uri'] .'" '.$cCount.' style="width:100%'.'" '.$colorScheme.' data-width="100%"></fb:comments>';
2) to your custom css add this

Code: Select all

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}

.fb_iframe_widget span[style] {width: 100% !important;}
3) and in the modules/mod_phoca_facebook_comments/assets/style.css change all the fixed width to width: 100% !important; just to be sure so you will get something like this

Code: Select all

#phoca-facebook-comments {
	position:relative;
	width: 100% !important;
}
/* Twitter */
#phoca-facebook-comments .pfbct {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* PlusOne */
#phoca-facebook-comments .pfbcp {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Send */
#phoca-facebook-comments .pfbcs {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Like */
#phoca-facebook-comments .pfbcl {
	clear:both;
	position:relative;
	display:block;
	padding: 2px;
	text-align:left;
}
/* FB Comments */
#phoca-facebook-comments .pfbcc {
	float: left;
	width: 100% !important;
	clear:both;
	padding: 2px;
}
/* LinkedIn */
#phoca-facebook-comments .pfbci {
	float: left;
	width: 100% !important;
	padding: 2px;
}

/* MySpace */
#phoca-facebook-comments .pfbcm { :D 
	float: left;
	width: 100% !important;
	padding: 2px;
}

#phoca-facebook-comments .cb {
	clear:both;
}
5) put with into the module in format 100% dont know if this is necesary but all together it works ;-)

tested on android phone and tablet, chrome, firefox worked beautifully with responsive template from rockettheme
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Responsive Facebook comments

Post by christine »

Hi madona,
madona wrote:Thanks very much Phmedia, it worked for me. Please my question is on #2, where do I locate my "Custom CSS"?
it depends on your template. e.g. in standard Protostar you can active a custom.css.

So, if you don't use custom.css, may be you have a template.css. Put relevant CSS Codes at the end of your e.g. template.css

Kind regards, Christine
Post Reply