How to show a Facebook Embedded Post through Button Click?

Asked

Viewed 124 times

0

I need to create a Embedded Post on a page through a Click event. I am using the following function:

<body>
<div id="fb-root"></div>
    <div id="myDiv"></div>
    <div id="myDiv2"></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/pt_BR/all.js";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    <div class="fb-post" data-href="https://www.facebook.com/michael/posts/046153"></div>

    <script>

        $(document).ready(function(){
            myLink = "https://www.facebook.com/michael/posts/045847";
            var embPost = '<div class="fb-post" data-href="' + myLink + '"></div>';
            $("#myDiv2").append(embPost);

            myLink = "https://www.facebook.com/michael/posts/045558";
            document.getElementById("myButton").onclick = function() {
                var embPost = '<div class="fb-post" data-href="' + myLink + '"></div>';
                $("#myDiv").append(embPost);
            }
        });

    </script>
</body>

The click of this button inserts this embPost in #myDiv, but does not generate the Embedded post, as expected, on the other hand the #myDiv2 presents the embPost fully rendered.

javascript jquery facebook

  • Is this just a snippet of code? The variable myLink is being raised where?

  • The myLink variable comes from a recovered list via FB.API, asynchronously. I put a.log console to make sure that your content is correct and, in fact, that’s not the problem.

  • The myLink it is generated dynamically?

  • Yes. The result comes from a FQL, via facebook Graph. This code is inside a loop to create the Embedded one by one...

  • Yes, but the variable myLink contains several embedded? Because if this code is inside a Loop, then the variables are rewritten. I’m not sure I understand very well. I believe more snippets of code could help.

  • There’s no point in turning this into a loop. The information in the question is few, and the code has probably been edited leaving something important out.

  • I put all the code. I left the loop out because it is not important for this study.

  • You’re testing it wrong. The code you posted now requires "onReady" or "setTimeout" or some way to wait for the Facebook script to load and run.

  • J. Bruni, already inserted the "onReady", according to his guidance.

  • Right... now change it $(document).ready(function(){ for $('#myButton').click(function(){ in your question - only so that the rest of the text of the question remains coherent without you having to rewrite everything (because it speaks of "click on the button"). ;-) Ok?

Show 5 more comments

1 answer

1


The Facebook code mounts the Embedded Posts that it finds on the page when running. A strategy is:

  • first mount the Divs
  • only then call the Facebook code

Sort of like this:

function incluiEmbedPost(indice, link) {
    var embPost = $('<div class="fb-post" data-href="' + link + '"></div>');
    $('#myDiv').append(embPost);
}

function rodaLanceDoFacebookConnect(){
    (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/pt_BR/all.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

$(function(){
    var myLinks = ['POST1', 'POST2', 'POST3'];
    $.each(myLinks, incluiEmbedPost);
    rodaLanceDoFacebookConnect();
});

Other alternative below.

In this case, we use the function FB.XFBML.parse of the SDK Javascript to render the HTML containing the Embedded post:

(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/pt_BR/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function incluiEmbedPost(seletor, link) {
    var embPost = $('<div class="fb-post" data-href="' + link + '"></div>');
    $(seletor).append(embPost);
    FB.XFBML.parse(embPost.get(0));
}

$(function(){
    // Chamar a seguinte função para incluir novo post a qualquer momento:
    incluiEmbedPost('#myDiv', 'https://www.facebook.com/michael/posts/045847');
});

  • The result was the same, unfortunately... the DIV is nested correctly, but the Embedded Post is not generated.

  • I completely rewritten the answer, after I "dropped out". : -) Please check if it helps you now.

  • Dude, it looks like plague! The result was exactly the same. A div receives the content, but does not render as embedded post.

  • I mean, your code is perfect and works great, but I don’t have the previous link list and the array is loaded asynchronously via FB.API...

  • OK. I researched further and included another alternative in the answer. Let’s see if now will...

  • J. Bruni, it worked perfectly and in all the situations I need. That FB.XFBML.parse() was exactly what I needed! Thanks for the insistence.

  • Since nothing is flowers in the integrations world, I just discovered that for a post to be Embedded, it is not enough to be public, but the user has to be able to be Followed by Everyone, too. I’m posting a new question to see if anyone knows how to solve this...

Show 2 more comments

Browser other questions tagged javascript jquery facebook

You are not signed in. Login or sign up in order to post.