How to share Pic with Post Data using facebook Application?

Question

I am using following code to share functionality:

HTML CODE is:

<div id="fb-root">
</div>
<img src="share_button.png" id="share_button">

My Jquery Code is:

<script>
window.fbAsyncInit = function () {
    FB.init({
        appId: '********',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true // parse XFBML
    });
};

(function () {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
} ());
</script>
<script type="text/javascript">
$(document).ready(function () {
    $('#share_button').live('click', function (e) {
        //var title = 'HyperArts Blog test test test';
        //var image = 'http://world.g-shock.com/us/en/ble/common/img/appIcon.png';
        //var Caption = 'test test test test';
        var description = 'my testing he HyperArts Blog provides tutorials for all things Facebook';
        //var link = 'http://hyperarts.com/blog';

        var image = $('[id$=imgAuthorAvatar]').attr("src");
        var title = $('[id$=lblTitle]').text();
        var Caption = 'Posted By ' + $('[id$=hlUserName]').text();
        var description = 'my testing he HyperArts Blog provides tutorials for all things Facebook';
        var link = document.URL;

        e.preventDefault();
        FB.ui(
                {
                    method: 'feed',
                    name: title,
                    link: link,
                    picture: image,
                    caption: Caption,
                    description: description,
                    message: ''
                });
    });
});

Everything is working fine, but when i share it to facebook, it does not show Image there.

.

Please help me how can i show the image here with post on facebook wall. I can see the pic in share pop up. but after sharing it does not visible in post.

Please help.

Answer 1

The image url for the picture parameter must be an absolute one (http/https), and has to be public. One other reason why it does not show up can be the aspect ratio and size, see this for more information: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images