Search code examples
asp.netfacebookfacebook-likemeta-tags

Facebook share button shows irrelevant title,description and image

I know there are a lot of questions like these but I am not able to an answer. So decided to ask a new one. I have a website which shows Events and I want to share the event on facebook so it should create a share box with the current events Title, Description and Image.

I have included my facebook SDK in the body section:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
        FB.init({
            appId: '843460125752678',
            xfbml: true,
            version: 'v2.5'
        });
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and I have included the facebook like button somewhere as :

<div class="fb-like" data-href="http://mywebsite.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

I want to add meta tags from code-behind as below in Page_Load

        HtmlMeta hm7 = new HtmlMeta();
        hm7.Attributes.Add("property", "fb:app_id");
        hm7.Content = "my id here";
        this.Header.Controls.Add(hm7);

        HtmlMeta tag = new HtmlMeta();
        tag.Attributes.Add("property", "og:title");
        tag.Content = lblTitle.Text;
        Page.Header.Controls.Add(tag);

        HtmlMeta tag1 = new HtmlMeta();
        tag1.Attributes.Add("property", "og:description");
        tag1.Content = "Click for more info";
        Page.Header.Controls.Add(tag1);

        HtmlMeta tagurl = new HtmlMeta();
        tagurl.Attributes.Add("property", "og:url");
        tagurl.Content = "http://www.mywebsite.com";
        Page.Header.Controls.Add(tagurl);

        HtmlMeta tagimg = new HtmlMeta();
        tagimg.Attributes.Add("property", "og:image");
        tagimg.Content = "some image url";
        Page.Header.Controls.Add(tagimg);

But when I click on the share button, title comes up as "Enter your title here",description as "Your description comes here" and it takes my website logo as the image all the time.

What could be the problem? Looks like I am setting the meta tags twice..first in html and then in code-behind. But even when I remove the tags from html, it stills gives the same output.

Update: I tried debugging the code in facebook and I get the below warning messages

1.The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags. 2.The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags. 3.The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags. 4.The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

and error message as below:

fb:app_id hasn't been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( 966242223397117 ) will be assigned.

Solution

  • First of all, delete meta tag for OpenGraph (og:title, og:description, so on) from your design code. Then try to change Page.Header.Controls to this.Header.Controls.

    Make sure that you inserted javascript code as soon as body section begins. If still does not working, try to use the next code to make a link to share:

    Share via:&nbsp;<a class="text-capitalize" href="http://www.facebook.com/share.php?u=your_site.com">Facebook</a>

    Hope it helps. If still will not work, make a comment to this answer, we will check again.