Facebook - share link not working properly - javascript / jquery

Question

I have implemented a facebook share link but have noticed that what is being posted is not as its displayed in the Facebook popup. The title and the description are missing on the actual post but are displayed on the popup preview. All that is posted is the message and a link. enter image description here

 $('body').on('click', '.social_media a', function(e) {

                var loc = $(this).attr('href');
                var action = $(this).attr('data-action');
                var title = $(this).attr('data-title');
                var desc = $(this).attr('data-desc');
                var img = $(this).attr('data-img');

    window.open('https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + encodeURIComponent(loc) + '&p[images][0]&p[title]=' + encodeURIComponent(title) + '&p[summary]=' + encodeURIComponent(desc), 'sharer', 'status=0,width=626,height=436, top=' + ($(window).height() / 2 - 225) + ', left=' + ($(window).width() / 2 - 313) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

Can anyone see what I'm doing wrong?

Oleg · Accepted Answer · 2014-01-15T12:04:21.480

I would suggest you to use meta tags instead of passing parameters to the popup. Insert these tags to the head section of a page you want to share:

<meta property="og:url" content="http://domain/url" />
<meta property="og:title" content="Your title" /> 
<meta property="og:description" content="Description" />
<meta property="og:image" content="http://image1" />
<meta property="og:image" content="http://image2" />

FB will parse it and show in the dialog. By doing this way you can also specify multiple images.

Then open this dialog window using this code:

var width = 626;
var height = 436;
var yourPageToShare = $(this).attr('href');
var sharerUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(yourPageToShare);
var l = window.screenX + (window.outerWidth - width) / 2;
var t = window.screenY + (window.outerHeight - height) / 2;
var winProps = ['width='+width,'height='+height,'left='+l,'top='+t,'status=no','resizable=yes','toolbar=no','menubar=no','scrollbars=yes'].join(',');
var win = window.open(sharerUrl, 'fbShareWin', winProps);

Here you can read more about Facebook Open Graph tags

Edit

Here is full page code that should work:

<!DOCTYPE html>
<html>
<head>
<meta property="og:title" content="Your title" /> 
<meta property="og:description" content="Your description" />
<script>
function share() {
    var width = 626;
    var height = 436;
    var yourPageToShare = location.href;
    var sharerUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(yourPageToShare);
    var l = window.screenX + (window.outerWidth - width) / 2;
    var t = window.screenY + (window.outerHeight - height) / 2;
    var winProps = ['width='+width,'height='+height,'left='+l,'top='+t,'status=no','resizable=yes','toolbar=no','menubar=no','scrollbars=yes'].join(',');
    var win = window.open(sharerUrl, 'fbShareWin', winProps);
}
</script>
</head>
<body>

    <input type="button" value="Share" onclick="share();">

</body>
</html>

It's worth to note that FB might cache this page's meta tags, so you probably will need to wait for a while.

The problem in your case may be because you add meta tags to the page that contains the links, not the pages those links are pointing to.

Thanks, I had seen this already and couldn't get it working. I have tried this again using your exact code but I have the same issue, it doesn't include the title, description or image even though I can see these are set in the source code. In fact, it doesn't even show this info on the preview like my existing code does — LeeTee, Jan 15 '14 at 10:50
In fact I can't see why this is any better than that what I had originally as it requires more code. Am I missing something? — LeeTee, Jan 15 '14 at 10:53
@LeeTee I dont know why this approach is better than yours. This is just an approach I always use, and it works well for me. — Oleg, Jan 15 '14 at 12:08
Thanks for your help, I have made the changes but its still not working for title and description. I have included the meta properties on the index page, which is the only page. The content is loaded in dynamically. ie. index.php?id=123. Therefore the meta tags are always present but the content can be different. — LeeTee, Jan 15 '14 at 14:51
@LeeTee try to enter your URL on this page: https://developers.facebook.com/tools/debug Do you see your meta tags there? — Oleg, Jan 15 '14 at 15:08
@LeeTee this http://stackoverflow.com/questions/5776567/facebook-open-graph-not-clearing-cache may help — Oleg, Jan 15 '14 at 15:12
Thank you the debug tool really helped. I had made a silly mistake by adding the og:URL without http. Thanks so much for your help with this. — LeeTee, Jan 15 '14 at 17:17

Facebook - share link not working properly - javascript / jquery

1 Answers1