Dynamically reparse sharing buttons on ajax generated page

  • Resolved apedog

    (@apedog)


    6 years, 8 months ago

    I am using a custom ajax single-page app to browse my wordpress website.
    The website has ngfb/ngfb-pro plugin installed.

    The initial page (loaded without ajax) displays the sharing buttons correctly. The ngfb script runs asynchronously and prints out linedin, g+, twitter and fb like/sharing button iframes correctly.

    However when I reload page fragments through ajax the sharing button iframes do not get reparsed.

    How do I dynamically reparse sharing buttons when loading pages with an ajax request?
    ngfb generates the buttons just fine on the initial load.
    But not on any pages loaded through ajax.

    I found these solutions/hacks for fb and gplus:

    FB.XFBML.parse(document.getElementById(‘facebook-content-buttons-post-XXX’));
gapi.plusone.go();

    which I can run on any successful ajax request, But couldn’t find any for twitter and linkedIN

    Is there a way to achieve this using the plugin?
    And if not could you tell me which scripts to run for the other networks?

    Thank you,
    apedog

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author JS Morisset

    (@jsmoriss)

    The javascript of most buttons (if not all) would execute on page load and would not execute again. If you’re adding buttons to the content, etc., then NGFB would include the javascript in the webpage header / footer, which would be executed once. Instead of doing that, you could try using the ngfb_get_sharing_buttons() function in the template your ajax call is using. The function will include both button scripts and button HTML.

    js.

    Thread Starter apedog

    (@apedog)

    Thanks but this doens’t solve the problem.

    The template fragments inserted by the ajax call already have the following code in it:

    <!-- ngfb content-buttons begin -->
<!-- generated on 2018-03-08T09:58:20+00:00 -->
<div class="ngfb-content-buttons">
<div class="ngfb-buttons">
<!-- Facebook Like / Send Button (XFBML) --><div class="fb-like facebook-button"><fb:like></fb:like></div>
<!-- GooglePlus Button --><div class="gplusone-button"><span class="g-plusone" ></span></div>
<!-- Twitter Button --><div class="twitter-button" ><a></a></div>
<!-- LinkedIn Button --><div class="linkedin-button"><script></script></div></div><!-- .ngfb-buttons -->
</div><!-- .ngfb-content-buttons -->
<!-- ngfb content-buttons end -->

    The ngfb plugin inserts that to the_content just fine.
    I get new buttons with new id’s and new urls on every ajax reload.
    I’m asking for a way to re-execute the javascript from the header and footer (both are unchanged by the ajax function) once the new content (and the new buttons) are loaded.

    the javascript only inserts iframes into those buttons on the initial (non-ajax) page load.

    thanks,
    apedog

    Plugin Author JS Morisset

    (@jsmoriss)

    The function includes both the script and the button HTML.

    If you need to re-execute the javascript, then you’ll have to check with each javascript provider to see which javascript function to call – I know this is possible with the Facebook SDK for example, and may be possible with others.

    js.

    Thread Starter apedog

    (@apedog)

    ok,

    I tried inserting ngfb_get_sharing_buttons() into my template fragment.
    It prints nothing. empty. No new buttons.
    (The buttons generated by the plugin itself and appended to the_content are still there though)

    Even so,
    I’m only loading one single DOM element into the html body via ajax. So scripts added by ngfb_get_sharing_buttons() to the header and footer do not get refreshed on ajax loads.

    Thread Starter apedog

    (@apedog)

    I see this has been marked as resolved.
    The solution suggested does not work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Dynamically reparse sharing buttons on ajax generated page’ is closed to new replies.