Ticket Q428701
Visible to All Users

Facebook like button does not work in IE

created 13 years ago

The following code works in all browsers except IE9 where the Facebook code fails to display anything or react to the mouseover. Any thoughts?

Thanks

HTML
<div style="width: 130px; float: right"> <dx:ASPxMenu ID="mnuSocial" runat="server" EnableDefaultAppearance="False" EnableTheming="False" CssClass="floatRight"> <Items> <dx:MenuItem Text="" Name="miSocial"> <Items> <dx:MenuItem> <Template> <div class="socialMenuItem"> <div class="" style="width: 70px; padding-top: 3px;"> <a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" href="https://twitter.com/FFPromoExams" target="_blank">Follow @FFPromoExams</a> </div> <script> !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs"); </script> </div> </Template> <Image Url="~/Images/twitter_sm.png"> </Image> </dx:MenuItem> <dx:MenuItem> <Template> <div class="socialMenuItem"> <div class="fb-like" style="width: 115px" data-href="http://firefighterpromotionalexams.com" data-send="true" data-layout="button_count" data-width="115" data-show-faces="true" data-font="arial"> </div> <script> (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); } (document, 'script', 'facebook-jssdk')); </script> </div> </Template> <Image Url="~/Images/facebook_sm.png"> </Image> </dx:MenuItem> <dx:MenuItem> <Template> <div class="socialMenuItem"> <a href="http://www.youtube.com/user/FFPromoExams/videos" target="_blank"> <img src="../Images/youtube_60x24.png" alt="Subscribe to me on YouTube" /></a> </Template> <Image Url="~/Images/youtube_24x24.png"> </Image> </dx:MenuItem> <dx:MenuItem> <Template> <div class="socialMenuItem"> <a href="http://www.linkedin.com/company/2662995?trk=tyah" target="_blank"> <img src="../Images/LinkedIn-Logo long.png" alt="Subscribe to me on YouTube" /></a> </Template> <Image Url="~/Images/linkedin-logo24x24.png"> </Image> </dx:MenuItem> </Items> <Image Url="~/Images/social.png"> </Image> </dx:MenuItem> </Items> <SubMenuStyle GutterColor="#0066CC" GutterWidth="20px" /> </dx:ASPxMenu> </div>

Comments (2)
DevExpress Support Team 13 years ago

    Hello Scott,
    I have tried to reproduce the issue on our side using your code snippet, but failed (see the attached video).
    It looks like some other things are involved in this issue, which I have not taken into account. Would you please check how the attached project operates on your side? If it works well, try to modify it to reproduce this issue and send the project back to us. Otherwise, please provide us with a reduced version of the problematic project, so that we can easily examine it on our side.
    In addition, please clarify the following browser-specific information:
        - Detailed information about the browser: make a screenshot of the "Help -> About Internet Explorer" dialog;
        - Browser/Document mode settings - press the F12 key to invoke the Dev Toolbar.
    We will do our best to help you.

      I have attached a video of both ie9 (doesn't work) and chrome (works fine). Not sure what you wanted to do with the Dev Toolbar, but you can view the actual site at: http://firefighterpromotionalexams.com.

      Answers

      created 13 years ago (modified 13 years ago)

      Hello Scott,
      The issue occurs, because facebook's javascript code loads itself in the page initialization. While the submenu is not open, IE does not properly calculate the width and height of the buttons and sets their width and height as 0.
      To solve this, handle the client-side PopUp event and call the function there. I have attached a project and video with this approach.

        Show previous comments (1)

          As an interesting note I decided to see what happens with a simple jquery menu and found that the problem still occurs unless I begin with the menu open then the code loads properly and displays on each subsequent mouseover.

          Anthony (DevExpress Support) 13 years ago

            Hello Scott,
            We are investigating this issue now and will inform you as soon as we have any result.

            Anthony (DevExpress Support) 13 years ago

              Hi,
              The issue occurs, because facebook's javascript code loads itself in the page initialization. While the submenu is not open, IE does not properly calculate the width and height of the buttons and sets their width and height as 0.
              To solve this, handle the client-side PopUp event and call the function there. I have attached a project and video with this approach.
              I have modified my answer accordingly.

              Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

              Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.