librelist archives

« back to archive

Facebook Like button

Facebook Like button

From:
Bassam Ismail
Date:
2013-06-21 @ 02:39
Hey,

This has been bugging me for a while now, maybe I can get some help here.

Scenario
There is a Facebook like button on every article page.
You click the like button and it pops open a comment box, you can write a 
comment and post it on Facebook.

Requirements
There shouldn't be any comment box on mobile phones

I hid the comment box using CSS, however when you like something on mobile
it pops out your keyboard. This popup get loaded by the callback that get 
triggered on clicking the like button.
If you open the networks tab in your web inspector and click on the 
button, ajax request takes place and new content is loaded. I also checked
the Facebook JS SDK and an event (Fb.event.subscribe) is called as soon as
you close the comment box.

Here is a fiddle where I have hidden the comment box using css but the 
keyboard on mobile pops up http://jsbin.com/obaqum/3/edit 
Try it on your mobile phone and you will get a clear idea.

Best,
Bassam Ismail
--
Front-end Developer at Axelerant

Re: [hackerskashmir] Facebook Like button

From:
Owais Lone
Date:
2013-06-21 @ 04:41
Try removing focus from the comment box. 
—
Sent from Mailbox for iPhone

On Fri, Jun 21, 2013 at 8:10 AM, Bassam Ismail <skippednote@gmail.com>
wrote:

> Hey,
> This has been bugging me for a while now, maybe I can get some help here.
> Scenario
> There is a Facebook like button on every article page.
> You click the like button and it pops open a comment box, you can write 
a comment and post it on Facebook.
> Requirements
> There shouldn't be any comment box on mobile phones
> I hid the comment box using CSS, however when you like something on 
mobile it pops out your keyboard. This popup get loaded by the callback 
that get triggered on clicking the like button.
> If you open the networks tab in your web inspector and click on the 
button, ajax request takes place and new content is loaded. I also checked
the Facebook JS SDK and an event (Fb.event.subscribe) is called as soon as
you close the comment box.
> Here is a fiddle where I have hidden the comment box using css but the 
keyboard on mobile pops up http://jsbin.com/obaqum/3/edit 
> Try it on your mobile phone and you will get a clear idea.
> Best,
> Bassam Ismail
> --
> Front-end Developer at Axelerant

Re: [hackerskashmir] Facebook Like button

From:
Mir Nazim
Date:
2013-06-21 @ 06:47
Keyboard appears because the comment box, even though hidden, might
still have focus. So as Owais, mentioned you can force removing the
focus from the comment box. Also I do not see any CSS for hiding the
comment box. I don't understand how "overflow:hidden" and
"height:21px" will hide the comment box.

Just guessing. personally, I have not dealt with FB too much beyond
adding FB auth to apps.


On Fri, Jun 21, 2013 at 10:11 AM, Owais Lone <loneowais@gmail.com> wrote:
> Try removing focus from the comment box.
> —
> Sent from Mailbox for iPhone
>
>
> On Fri, Jun 21, 2013 at 8:10 AM, Bassam Ismail <skippednote@gmail.com>
> wrote:
>>
>> Hey,
>>
>> This has been bugging me for a while now, maybe I can get some help here.
>>
>> Scenario
>> There is a Facebook like button on every article page.
>> You click the like button and it pops open a comment box, you can write a
>> comment and post it on Facebook.
>>
>> Requirements
>> There shouldn't be any comment box on mobile phones
>>
>> I hid the comment box using CSS, however when you like something on mobile
>> it pops out your keyboard. This popup get loaded by the callback that get
>> triggered on clicking the like button.
>> If you open the networks tab in your web inspector and click on the
>> button, ajax request takes place and new content is loaded. I also checked
>> the Facebook JS SDK and an event (Fb.event.subscribe) is called as soon as
>> you close the comment box.
>>
>> Here is a fiddle where I have hidden th e comment box using css but the
>> keyboard on mobile pops up http://jsbin.com/obaqum/3/edit
>> Try it on your mobile phone and you will get a clear idea.
>>
>> Best,
>> Bassam Ismail
>> --
>> Front-end Developer at Axelerant
>>
>

Re: [hackerskashmir] Facebook Like button

From:
Bassam Ismail
Date:
2013-06-21 @ 13:18
Tried removing the focus on the comment box but due to policy thingy 
chrome doesn't allow you to change the content in the iFrame. No solutions
as of now. Will post if I find in solution.

Best,
Bassam Ismail
--
Front-end Developer at Axelerant


On Friday, June 21, 2013 at 12:17 PM, Mir Nazim wrote:

> Keyboard appears because the comment box, even though hidden, might
> still have focus. So as Owais, mentioned you can force removing the
> focus from the comment box. Also I do not see any CSS for hiding the
> comment box. I don't understand how "overflow:hidden" and
> "height:21px" will hide the comment box.
>  
> Just guessing. personally, I have not dealt with FB too much beyond
> adding FB auth to apps.
>  
>  
> On Fri, Jun 21, 2013 at 10:11 AM, Owais Lone <loneowais@gmail.com 
(mailto:loneowais@gmail.com)> wrote:
> > Try removing focus from the comment box.
> > —
> > Sent from Mailbox for iPhone
> >  
> >  
> > On Fri, Jun 21, 2013 at 8:10 AM, Bassam Ismail <skippednote@gmail.com 
(mailto:skippednote@gmail.com)>
> > wrote:
> > >  
> > > Hey,
> > >  
> > > This has been bugging me for a while now, maybe I can get some help here.
> > >  
> > > Scenario
> > > There is a Facebook like button on every article page.
> > > You click the like button and it pops open a comment box, you can write a
> > > comment and post it on Facebook.
> > >  
> > > Requirements
> > > There shouldn't be any comment box on mobile phones
> > >  
> > > I hid the comment box using CSS, however when you like something on mobile
> > > it pops out your keyboard. This popup get loaded by the callback that get
> > > triggered on clicking the like button.
> > > If you open the networks tab in your web inspector and click on the
> > > button, ajax request takes place and new content is loaded. I also checked
> > > the Facebook JS SDK and an event (Fb.event.subscribe) is called as soon as
> > > you close the comment box.
> > >  
> > > Here is a fiddle where I have hidden th e comment box using css but the
> > > keyboard on mobile pops up http://jsbin.com/obaqum/3/edit
> > > Try it on your mobile phone and you will get a clear idea.
> > >  
> > > Best,
> > > Bassam Ismail
> > > --
> > > Front-end Developer at Axelerant
> > >  
> >  
> >  
>  
>  
>  

Re: [hackerskashmir] Facebook Like button

From:
Mir Nazim
Date:
2013-06-21 @ 14:28
On Fri, Jun 21, 2013 at 6:48 PM, Bassam Ismail <skippednote@gmail.com> wrote:
> Tried removing the focus on the comment box but due to policy thingy chrome
> doesn't allow you to change the content in the iFrame. No solutions as of
> now. Will post if I find in solution.

Doesn't facebook have any different type of widget where you can just
have a like button without the comment box

>
> Best,
> Bassam Ismail
> --
> Front-end Developer at Axelerant
>
> On Friday, June 21, 2013 at 12:17 PM, Mir Nazim wrote:
>
> Keyboard appears because the comment box, even though hidden, might
> still have focus. So as Owais, mentioned you can force removing the
> focus from the comment box. Also I do not see any CSS for hiding the
> comment box. I don't understand how "overflow:hidden" and
> "height:21px" will hide the comment box.
>
> Just guessing. personally, I have not dealt with FB too much beyond
> adding FB auth to apps.
>
>
> On Fri, Jun 21, 2013 at 10:11 AM, Owais Lone <loneowais@gmail.com> wrote:
>
> Try removing focus from the comment box.
> —
> Sent from Mailbox for iPhone
>
>
> On Fri, Jun 21, 2013 at 8:10 AM, Bassam Ismail <skippednote@gmail.com>
> wrote:
>
> Hey,
>
> This has been bugging me for a while now, maybe I can get some help here.
>
> Scenario
> There is a Facebook like button on every article page.
> You click the like button and it pops open a comment box, you can write a
> comment and post it on Facebook.
>
> Requirements
> There shouldn't be any comment box on mobile phones
>
> I hid the comment box using CSS, however when you like something on mobile
> it pops out your keyboard. This popup get loaded by the callback that get
> triggered on clicking the like button.
> If you open the networks tab in your web inspector and click on the
> button, ajax request takes place and new content is loaded. I also checked
> the Facebook JS SDK and an event (Fb.event.subscribe) is called as soon as
> you close the comment box.
>
> Here is a fiddle where I have hidden th e comment box using css but the
> keyboard on mobile pops up http://jsbin.com/obaqum/3/edit
> Try it on your mobile phone and you will get a clear idea.
>
> Best,
> Bassam Ismail
> --
> Front-end Developer at Axelerant
>
>

Re: [hackerskashmir] Facebook Like button

From:
Bassam Ismail
Date:
2013-06-21 @ 15:51
Nope, haven't come across any.
Lets kill this thread here. Will continue if anything worth the attention 
comes around. 

Sent from my iPad

On 21-Jun-2013, at 7:58 PM, Mir Nazim <me@mirnazim.org> wrote:

> On Fri, Jun 21, 2013 at 6:48 PM, Bassam Ismail <skippednote@gmail.com> wrote:
>> Tried removing the focus on the comment box but due to policy thingy chrome
>> doesn't allow you to change the content in the iFrame. No solutions as of
>> now. Will post if I find in solution.
> 
> Doesn't facebook have any different type of widget where you can just
> have a like button without the comment box
> 
>> 
>> Best,
>> Bassam Ismail
>> --
>> Front-end Developer at Axelerant
>> 
>> On Friday, June 21, 2013 at 12:17 PM, Mir Nazim wrote:
>> 
>> Keyboard appears because the comment box, even though hidden, might
>> still have focus. So as Owais, mentioned you can force removing the
>> focus from the comment box. Also I do not see any CSS for hiding the
>> comment box. I don't understand how "overflow:hidden" and
>> "height:21px" will hide the comment box.
>> 
>> Just guessing. personally, I have not dealt with FB too much beyond
>> adding FB auth to apps.
>> 
>> 
>> On Fri, Jun 21, 2013 at 10:11 AM, Owais Lone <loneowais@gmail.com> wrote:
>> 
>> Try removing focus from the comment box.
>> —
>> Sent from Mailbox for iPhone
>> 
>> 
>> On Fri, Jun 21, 2013 at 8:10 AM, Bassam Ismail <skippednote@gmail.com>
>> wrote:
>> 
>> Hey,
>> 
>> This has been bugging me for a while now, maybe I can get some help here.
>> 
>> Scenario
>> There is a Facebook like button on every article page.
>> You click the like button and it pops open a comment box, you can write a
>> comment and post it on Facebook.
>> 
>> Requirements
>> There shouldn't be any comment box on mobile phones
>> 
>> I hid the comment box using CSS, however when you like something on mobile
>> it pops out your keyboard. This popup get loaded by the callback that get
>> triggered on clicking the like button.
>> If you open the networks tab in your web inspector and click on the
>> button, ajax request takes place and new content is loaded. I also checked
>> the Facebook JS SDK and an event (Fb.event.subscribe) is called as soon as
>> you close the comment box.
>> 
>> Here is a fiddle where I have hidden th e comment box using css but the
>> keyboard on mobile pops up http://jsbin.com/obaqum/3/edit
>> Try it on your mobile phone and you will get a clear idea.
>> 
>> Best,
>> Bassam Ismail
>> --
>> Front-end Developer at Axelerant
>> 
>>