Cannot include facebook like button

Mauer Themes Support Bild Cannot include facebook like button

This topic contains 5 replies, has 2 voices, and was last updated by  Paul 1 year, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1612

    herman
    Participant

    Hello,

    Why can’t I include the facebook like button (or other plugins) in the content of a page? It does not display the facebook <div> tags correctly (seem to be hidden). And when I use the iframe solution of facebook, it renders a too large area…

    When I paste this code into a page for example, it doesn’t show anything…

    <div id=”fb-root”></div>
    (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 = ‘https://connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.12&appId=248365701863664&autoLogAppEvents=1’;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));
    <div class=”fb-like” data-href=”https://www.facebook.com/hermandesmetfotografie” data-layout=”button_count” data-action=”like” data-size=”large” data-show-faces=”true” data-share=”true”></div>

    Can you see what’s the problem?

    #1624

    Paul
    Keymaster

    Are you using text or visual mode of the WP post editor when you are inserting this code?

    Also, I’m not sure I understand what exact kind of the Facebook like button you want to add. Do you actually mean what Facebook calls ‘Page Plugin‘ (see screenshot)?

    #1630

    herman
    Participant

    Hello Paul,

    I am using the text editor, and the like button plugin is this one:

    https://developers.facebook.com/docs/plugins/like-button

    The code I copy paste into my page is the one in my initial question above.

    Kind regards,
    Herman

    #1637

    Paul
    Keymaster

    Hello Herman,

    Please use the following code:

    <div id="fb-root"></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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=280317272123045&autoLogAppEvents=1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div class="fb-like" data-href="http://bild.mauer.co/fb-like-button-test/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

    The code you posted above appears to be incorrect (e.g. the scripts are not inside script tags, etc).

    Make sure to copy the code I posted and directly insert it into WP’s editor in text mode (if it gets in an environment with formatting, some symbols will be substituted to incorrect ones).

    Replace http://bild.mauer.co/fb-like-button-test/ with your URL.

    Then, please use the following CSS code:

    .entry-full .fb_iframe_widget iframe {padding-top:0; padding-bottom:0;}

    You can add custom CSS with the Simple Custom CSS plugin. Once you install and activate it, in your Admin Panel please go to ‘Appearance’ > ‘Custom CSS’. There insert the code you see above and save.

    Here is a test page demonstrating the result:

    FB Like Button test

    Regards,
    Paul

    #1829

    herman
    Participant

    Thank you very much! Works excellent!!

    Awesome support!

    #1896

    Paul
    Keymaster

    You are very welcome, Herman.

    If you enjoy the theme (or the support), I would greatly appreciate if you could rate it on ThemeForest. This literally takes a moment but creates a huge difference. Thank you.

    Regards,
    Paul

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.