SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Facebook like button. Problem in Opera

    Hello guys,

    Im having a big problem with Facebook Like button in Opera.. Look at this scr: 86097070456803243280.png
    It works perfectly on Chrome and FireFox while Opera does not like this button.... If the button is "not clicked yet" it shows a proper button but when I click on it, then it begins.. 86097070456803243280.png

    If you need any additional information, just let me know.
    Thanks!

    PS this is what I use,

    <div class="fb-like" data-href="{$config['site_path']}/{$post['sp_id']}/{$post['sp_slug']}" data-send="false" data-layout="button_count" data-width="auto" data-show-faces="false" data-font="arial"></div>

    and from body

    {FACEBOOK}
    <div id="fb-root"></div>
    <script>
    var fbappID = '{$config['site_fb_appId']}';
    var fbchannel = '//{$config['site_domain']}/channel.php';
    {literal}
    window.fbAsyncInit = function(){
    FB.init({
    appId : fbappID,
    channelUrl: fbchannel,
    status : true,
    cookie : true,
    xfbml : true
    });
    };

    (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/pl_PL/all.js";
    ref.parentNode.insertBefore(js, ref);
    }(document));
    {/literal}
    </script>
    {/FACEBOOK}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi superbk7, welcome to Sitepoint.

    Those 2 screenshots look the same to me unless I'm missing something

    Anyway it would probably be better if we had a link to the site so we could check it out and see if its a css question or not.

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi superbk7, welcome to Sitepoint.

    Those 2 screenshots look the same to me unless I'm missing something

    Anyway it would probably be better if we had a link to the site so we could check it out and see if its a css question or not.
    Hello,

    Thank you for your answer.
    Sorry for this late message.

    This is the address to my site: http://chill-time.pl/
    The problem exists only on Opera... Try to like any pic you want, you'll se what is the problem

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, so clicking the Like button in Opera opens a new page rather than just Liking the page. This presumably is a programming issue, so I'll move this to the JS forum.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The buttom seems to be working for me but I notice in Opera that once clicked it goes to double height. is that what you meant?

    If so try this fix:

    Code:
    .button_count .like_button_dark .like_button_no_like .liketext, 
    .button_count .connect_widget_like_button .liketext{margin-left:0!important}

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    is that what you meant?
    Hm, odd. For me, in browsers like Chrome, nothing happens except that it's confirmed I now "like" the page, whereas in Opera, a new blank page opens, without "liking" the content.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, odd. For me, in browsers like Chrome, nothing happens except that it's confirmed I now "like" the page, whereas in Opera, a new blank page opens, without "liking" the content.
    Yes that's odd! When I click the button in Opera (PC) it turns into a tick but the button height double unlike other browsers and matches the drawing in the first post. I have the Opera 12.1 installed.

  8. #8
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes that's odd! When I click the button in Opera (PC) it turns into a tick but the button height double unlike other browsers and matches the drawing in the first post. I have the Opera 12.1 installed.
    I'm really confused... It's really odd when that button works without any problem with Chrome, FF and does not want to work with Opera?
    Any suggestions how to fix it? Or any alternative code for like button?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    So what, in your opinion, is the actual problem? I just realized my mistake: A new window opens if you are not logged in to Facebook in a particular browser so that you can log in. If you are already logged in, the like just gets sent through.

    See if this code does anything different. It works fine for me in Opera:

    Code:
    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fczill.tajm&amp;layout=standard&amp;show_faces=false&amp;action=like&amp;colorscheme=light"
            scrolling="no" frameborder="0"
            style="border:none; height:21px; width: 450px;"></iframe>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    ok, sorry the fix I gave in post#5 was done using opera's dragonfly inspector but it didn't show it was in an iframe so the code won't work.

    I've tested this fix in css terminal and it seems to fix the issue.

    Code:
    .fb_ltr {width:94px!important}

  11. #11
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    ok, sorry the fix I gave in post#5 was done using opera's dragonfly inspector but it didn't show it was in an iframe so the code won't work.

    I've tested this fix in css terminal and it seems to fix the issue.

    Code:
    .fb_ltr {width:94px!important}
    Thank you for your help.
    This code works but... see this: 61233063484625229707.png

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try increasing the width:
    Code:
    .fb_ltr {width:401px!important}
    You may have to tweak it so suit all.

    Or as Ralph suggests above you would need to edit every iframe as required.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •