Question

i get my pagedata from an xml and i want this data to be shown when shared, below is my code:

$.ajax({
            type: "GET",
            url: "data/artikels.xml",
            dataType: "xml",
            success: function(xml){
                oArticle = $(xml).find('article:eq('+id+')');
                var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
                var match = oArticle.find('youtube').text().match(regExp);  
                $('head').append('<meta property="og:title" content="'+oArticle.find('title').text()+'" />'
                    +'<meta property="og:description" content="'+oArticle.find('shortcontent').text().replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;')+'" />'
                    +'<meta property="og:image" content="'+oArticle.find('image').text()+'" />').trigger('create');  
                $('#container').append('<div id="title_article">'+oArticle.find('title').text()+'</div>'
                    +'<div id="date_article">'+oArticle.find('date').text()+'</div>'
                    +'<iframe width="600" height="315" src='+'"'+'http://www.youtube.com/embed/'+match[1]
                    +'<div id="content_article">'+oArticle.find('fullcontent').text()+'</div>').trigger('create');

            }
        })

When i enter my url in facebook debugger other images/titles/descriptions are taken, the same happens when i just share. Is there any way to solve this?

Kind regards

Toon

Answer 1

Facebook generates the meta content of the link by fetching your plain HTML page. It won’t run your JavaScript code.

You are better off handling this in your back-end script and serving the meta tags when the page loads instead of loading it with AJAX. In general, if you have an AJAX request in your site that takes no input from the user, you are doing something wrong, as this could have been generated by the server before serving the HTML to the user. (thus reducing the amount of requests the user’s browser has to make)