WordPress.org

Ready to get started?Download WordPress

Forums

AJAX Read More
[resolved] Refresh Facebook Comments after Ajax is Loaded (6 posts)

  1. oturia
    Member
    Posted 2 years ago #

    First off, this is a great plugin.

    One issue I'm having is that items like the Facebook Like button and especially Facebook Comments are not loaded when they show up in the content that is called via Ajax.

    There are several blog and forum posts out there with similar issues, and it seems as though you need to recall FB.XFBML.parse(); after the Ajax is completely loaded in order to populate the Facebook Comments DIV with actual comments.

    My question would be where can I place this in the plugin file so that it will be called after the Ajax request is complete?

    http://wordpress.org/extend/plugins/ajax-read-more/

  2. oturia
    Member
    Posted 2 years ago #

    Well, I spent three days trying to figure this out, and thirty minutes after posting this I got it to work. Go figure :)

    What I had to do was get FB.XFBML.parse(); to run inside of the plugin, but it was being stripped from the template file that reloads the content.

    What I did was create a separate file called fbreload.php. Then, in this file I added the following code:

    <script type="text/javascript">
    jQuery('#content').ajaxComplete(function(){
       //re-render the facebook icons (in a div with id of 'content')
       FB.XFBML.parse();
     });
    </script>

    Please note that the DIV I am using (#content) may not be the same DIV for you, but it's a pretty universal part of WP's theming structure so it should be.

    Go ahead and upload this file into ajax-read-more/inc/ajax-response-templates/. There should be only one other file in their, the single.php which is the template the plugin uses to format the content pulled after the more tag.

    Then you'll need to open ajax-read-more/ajax-read-more-core.php. Scroll down near the bottom and you'll see this code:

    function ajax_read_more_template_redirect() {
    	if (have_posts()) {
    		include('inc/ajax-response-templates/single.php');
    	};
    	exit();
    };

    What you going to want to do is include that new file you created, so replace that with this:

    function ajax_read_more_template_redirect() {
    	if (have_posts()) {
    		include('inc/ajax-response-templates/single.php');
    		include('inc/ajax-response-templates/fbreload.php');
    	};
    	exit();
    };

    Now go back and refresh your page and you'll see that the contents of the FB Comments are now loading!

  3. Sergey.S.Betke
    Member
    Plugin Author

    Posted 2 years ago #

    Please, read http://sergey-s-betke.blogs.novgaro.ru/web/wordpress/ajax/yandex-metrika/ajax-wordpress-i-schyotchiki-pishem-svoj-plagin-ajax-yandeks-metrika-otrazhaem-ajax-perexody-v-schyotchike. You can use 'hit.counter' event without plugin code modifications. Then i will add special event for your purpose.

  4. Sergey.S.Betke
    Member
    Plugin Author

    Posted 2 years ago #

    My plugin fires after AJAX query 'onupdate' event. You can do this:

    jQuery('#content').delegate('', 'onupdate.ajaxReadMore', function(e) {
    	FB.XFBML.parse();
    });

    or just 'onupdate'.

    It is not necessary to change plugin's files, You can catch 'onupdate' event.

  5. oturia
    Member
    Posted 2 years ago #

    Thanks. So I would just place that in the head of the document and it would automatically run when the Ajax is called?

  6. Sergey.S.Betke
    Member
    Plugin Author

    Posted 2 years ago #

    Not so simple :-)

    <script>
    jQuery(function() {
    	jQuery('#content').delegate('', 'onupdate', function(e) {
    		FB.XFBML.parse();
    	});
    });
    </script>

    - this code - just wrapper for document.ready event.
    Example - ajax-read-more.js file of my plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic