How to Clear Facebook Cache while sharing Image and text

Question

I am using Wordpress and a strenge thing is happening. I have shared a link earlier which has a different image now after the image changed The facebook is taking the same previous image when it shared. Let me tell you what procedure I have tried

Head Section

<meta property="og:title" content="<?php echo $blogArray['post_heading'];?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $blogArray['image_url'];?>" />
<meta property="og:url" content="<?php echo site_url().'?page_id=3205&id='.base64_encode($blogArray['ID']);?>" />
<meta property="og:description" content="<?php echo $blogArray['post_sort_details'];?>" />

And HTML

http://www.facebook.com/sharer.php?s=100;&amp;p[title]=<?php echo $blogArray['post_heading'];?>&amp;p[summary]=<?php echo $blogArray['post_sort_details'];?>&amp;p[url]=<?php echo 'http://'.str_replace('http://','',str_replace('www.','',site_url()));?>/?p=<?php echo $blogArray['share_post_id'];?>&amp;p[images][0]=<?php echo $blogArray['image_url'];?>" target="_blank"><img src="<?php bloginfo('template_url');?>/images/fb_static.png" border="0" class="fb"  title="Share via Facebook" width="24" height="24" /></a>

But when I am trying from the same site on a beta folder it is coming absolutely fine.

I am attaching screenshots with this.

What I want to share

What is getting shared from the Main Site

What is getting shared from the Beta site and the right one

I have seen once a post is shared on the facebook. Facebook keep the images and text to their cache and even on changing images and the texts, facebook share keeps the previous identity. That is the main thing I am facing and want to solve by reloading Facebook cache with current text and image after share.

Answer 1

林果皞 is right. You may refresh the cache by Debugger tool of Facebook. Just Put the URL on the Debugger tool which you are sharing.

You may also use this script on site as you don't need to go to Debugger tools and refresh the page manually. The following code with automatically refresh Facebook Page.

$.post(
    'https://graph.facebook.com',
    {
        id: '[PAGE_URL]',
        scrape: true
    },
    function(response){
       console.log(response);
    }
);

Answer 2

I was pulling my hair out trying to fix this issue. Hours and hours of troubleshooting to no avail. After speaking with one of our programmers about a topic unrelated I thought of something to try as a long shot.

Much to my surprise, it worked!!!

This is the reason behind the problem and my solution for it:

When you draft a post in WordPress it generates a link based on your article's title (unless you manually change it). The title of my article included special characters, however the auto-generated link didn't display these special characters, only hyphens to replace the spaces. Should be fine right? Wrong! Somewhere embedded in metadata and code in the WordPress platform are those special characters and they mess up the way Facebook pulls info from the article being linked to. This is a problem because certain special characters invalidate hyperlinks.

For example:

Article Title: R[eloaded] Auto-generated hyperlink DISPLAYED in WordPress "Permalink" field: http://www.example.com/reloaded Actual WordPress Auto-generated hyperlink: http://www.example.com/r[eloaded]

Those brackets will invalidate the link and Facebook will be unable to pull any information (ie pictures) from it.

Solution:

(1) Simply, manually change the WordPress hyperlink address to something that doesn't include any special characters (this will not change the title of your article).

(2) Click "Update" to change the post to include the new hyperlink.

(3) Click "Purge from Cache" in the WordPress window

(4) Refresh your Facebook browser window

(5) Paste the new hyperlink for your article

(6) Enjoy your Facebook post with a preview image and information

Sidenote: Don't pull your hair out over Facebook, it's not worth it. =)

Answer 3

I tried a lot to clear the cache programatically. We can clear the cache manually using facebook debugger. But, It worked when we keep any parameter after the url like http://myurl.com/?fbrefresh=xyz. But, clearing the cache manually is not simple thing and we cant do every time.

Finally, It has worked with javascript. This has worked when I put paramter after the url like I mentioned above.

if(window.location.search.indexOf("facebook_refresh") >= 0) {
    //Feature check browsers for support
    if(document.addEventListener && window.XMLHttpRequest && document.querySelector) {
        //DOM is ready
        document.addEventListener("DOMContentLoaded", function() {
            var httpRequest = new XMLHttpRequest();
            httpRequest.open("POST", "https://graph.facebook.com", true);

            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4) { 
                    console.log("httpRequest.responseText", httpRequest.responseText); 
                }
            };

            //Default URL to send to Facebook
            var url = window.location;

            //og:url element
            var og_url = document.querySelector("meta[property='og:url']");

            //Check if og:url element is present on page
            if(og_url != null) {
                //Get the content attribute value of og:url
                var og_url_value = og_url.getAttribute("content");

                //If og:url content attribute isn't empty
                if(og_url_value != "") {
                    url = og_url_value;
                } else {
                    console.warn('<meta property="og:url" content=""> is empty. Falling back to window.location');
                }               
            } else {
                console.warn('<meta property="og:url" content=""> is missing. Falling back to window.location');
            }

            //Send AJAX
            httpRequest.send("scrape=true&id=" + encodeURIComponent(url));
        });
    } else {
        console.warn("Your browser doesn't support one of the following: document.addEventListener && window.XMLHttpRequest && document.querySelector");
    }
}