How to show a Facebook Embedded Post through Button Click?

Question

How to show a Facebook Embedded Post through Button Click?

Navigation

#1 by (1 votes)

0

I need to create an 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 into #myDiv , but does not generate embedded post , as expected, on the other hand #myDiv2 displays embPost completely rendering.

javascript jquery facebook

asked by anonymous 12.02.2014 / 18:25

1 answer

How to perform the parallelization of this code snippet using OpenMp Versions of constants according to BuildType

score 1 · Accepted Answer

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

first mount the divs
Only then call the Facebook code

More or less 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();
});

Another alternative below.

In this case, we use FB.XFBML.parse of Javascript SDK function to render the HTML that contains 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');
});