CODEWITHSUNDEEP
javascriptjqueryfacebook
LeeTee
LeeTee

Reputation: 6601

Facebook - share link not working properly - javascript / jquery

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?

Upvotes: 1

Views: 4037

Answers (1)

Oleg
Oleg

Reputation: 23268

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.

Upvotes: 2

Related Questions