Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 1, 2014 at 9:56 am #327924
    Mesheu

    Hi there,

    I am trying to add Facebook follow button on my website.

    So, I went on this here and got the code. But I don’t know where to install the code in appearance –> editor section.

    Then when I go to enfold layout builder, I don’t know if I should just insert code block.

    Could you explain me the steps please?

    Thank you!
    Ali

    October 1, 2014 at 2:32 pm #328107
    Yigit

    Hey Ali

    Code block element should work fine. Do you mind sharing the code you got with us? If you do not, please paste it here http://pastebin.com/ and post the link here

    Best regards,
    Yigit

    October 2, 2014 at 2:25 am #328611
    Mesheu

    Hi Yigit,

    so it says:

    Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.

    <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 = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0″;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));</script>

    Place the code for your plugin wherever you want the plugin to appear on your page.
    <div class=”fb-follow” data-href=”https://www.facebook.com/alimeseu&#8221; data-colorscheme=”light” data-layout=”standard” data-show-faces=”true”></div>

    I tried inserting it into the code block element but it doesn’t appear. Let me know what you think I should do exactly.

    Thank you!
    Ali

    October 2, 2014 at 6:31 am #328662
    Josue

    Hey!

    Try adding this at the very end of your theme / child theme functions.php file:

    function add_facebook_sdk() {
	?>
	<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<?php
}
add_action('wp_footer', 'add_facebook_sdk');

    Then the only code you put on the page content would be this:

    <div class="fb-follow" data-href="https://www.facebook.com/alimeseu" data-colorscheme="light" data-layout="standard" data-show-faces="true"></div>

    Cheers!
    Josue

    October 2, 2014 at 7:17 am #328691
    Mesheu

    Hi there,

    i did but it doesn’t work. It is still invisible, fb follow button doesn’t appear.

    I inserted the code at the very very end of functions.php.

    Then I added the second line on the “code block” on the content layout editor.

    Let me know what is missing?
    Thanks!
    Ali

    October 2, 2014 at 7:40 am #328701
    Josue

    Hey!

    Can you post a link to the page where you are trying this?

    Best regards,
    Josue

    October 2, 2014 at 7:51 am #328704
    Arvish

    Hi!

    1. Go to the code generator here
    2. Click Get code and select the iframe tab
    3. Copy the code and add it to a code block in your page
    Example code

    
<iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck&width&height=80&colorscheme=light&layout=standard&show_faces=true&appId=682368698498023" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

    4. Check the “Output the code without any additional wrapper elements.” in the code block settings

    Regards,
    Arvish

    October 2, 2014 at 8:50 am #328735
    Mesheu

    Hi,

    I did what you said but it still doesn’t work. See here

    I am trying to place it on the white section under the top bar with the twitter button.

    Could you check?

    Thanks!
    Ali

    October 2, 2014 at 9:53 am #328788
    Arvish

    Hey!

    It is working. It is hidden behind hellobar iframe.

    See below

    If you want to make it appear over the hellobar, perhaps try positioning the fb iframe absolutely and play with the z-index.

    Regards,
    Arvish

    October 2, 2014 at 10:19 am #328805
    Mesheu

    Oh, thanks for that!!

    Sorry for being such a pain. One last thing, how i can place this follow button at the centre of this section (both horizontally and vertically, without it being folded in 2 lines)?

    Thank youuu!
    Ali

    October 2, 2014 at 11:09 am #328831
    Arvish

    Hi!
    I believe you need to increase the width of the iframe.
    Then specify
    margin: 0 auto;
    to shift the iframe in the middle.
    Cheers!
    Arvish

    October 2, 2014 at 11:22 am #328835
    Arvish

    Hi!
    Just realised that iframe won’t support these margin changes.

    Try this instead:

    In clode block settings
    1. Add “div” to “Code Wrapper Element”
    2. Add “class=”test” to “Code Wrapper Element Attributes”
    3. The Add the following to your custom.css or Quick CSS in Enfold theme options

    .test {
    width: 300px;
    margin: 0px auto;
}

    Cheers!
    Arvish

    October 3, 2014 at 4:37 am #329436
    Mesheu

    Thank you so much, Arvish! So kind of you!! You guys rock!

    It is working now. The only problem is on Internet Explorer, it looks like this

    The top header is disproportionately big. Any clue?

    Thank you!
    Ali

    October 4, 2014 at 2:13 am #330012
    Ismael

    Hi!

    I checked the site on IE9 – IE11 and it looks the same with Chrome.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.