I have a specific page in my application where I want a user to be able to share certain selections they have made on a previous page, selection which I am receiving from my database.
So, for example - I have a user - Barry. I can access his name using ${user}.
He have been asked a question:
What is the first thing that comes to your mind when I ask about ${animals}
The answers they have chosen have been submitted to the DB, and I now want the answers to appear as the sharing description for Facebook. Obviously, the answer for each user will be unique - so I cannot hard code any information in here.
The code I have is the following:
<meta property="og:description" content="${user} thinks:%0A%0A<c:forEach var='animal' items='${animals}' >${animal} - ${animal.thoughts}%0A</c:forEach> />
When I view the source code for the page, I see this:
<meta property="og:description" content="Barry thinks:%0A%0AElephant - Gray%0ABird - Chirpy%0AMonkey - Funny%0ADog - Loyal />
However, when attempting to share the content on Facebook, the description is just empty, as though no description exists.
Unfortunately, this page is only available when the user is logged in, so using the Facebook scraper https://developers.facebook.com/tools/debug/ simply shows me the og data of the logged out landing page.
Am I missing something here?
EDIT
Based on #Cbroe's comments below, I have now adapted the code to be shared on a public page (IE one that you do not need to be logged in to see).
I have also set the description and image location as parameters in the URL - so that anybody who shares this page will see a description and an image relevant to them.
When running the full URL through Facebook scraper, I see the exact results I am after:
However, when actually sharing the link from the application, the dynamic info from the URL is being ignored.
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
My og:url contains the full URL, including the dynamic parameters. If anyone else has any ideas, I would love to hear them.
EDIT 2
Link that helped CBroe debug has been removed due to company policy. Example link provided in my answer.
With massive thanks for #CBroe for baring with me through this process and helping me out in the comments, I have now got a solution to this problem.
Firstly, I created a client facing page that did not require the user to be logged in in order to view. This would act as the page that the dynamic content would be shared from.
The code that I have now looks something like this:
Meta tags
<meta property="og:title" content="My Title" />
<meta property="og:url" content="${pageUrl}" /> // generates FULL URL including all parameters
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
Sharing generator (using jQuery)
var currentLink = encodeURIComponent(window.location.href); // NB to use encodeURIComponent instead of just encodeURI
var tWindow;
$('.facebookShare').on('touchstart click', function(){
tWindow = window.open('about:blank', 'sharer', 'toolbar=0,status=0,width=548,height=325');
tWindow.location.href = 'https://www.facebook.com/dialog/share?app_id=${facebookAppId}&display=popup&href=' + currentLink;
});
The link that was then used to share the page looked something like this:
https://[myURL]?description=My%20favourite%20animals:%20Elephant%20-%20gray%20%7C%20Dog%20-%20Cute%20%7C%20Cat%20-%20Cant%20be%20trusted%20%7C%20Leopard%20-%20Never%20changes%20its%20spots&image=[url_to_my_image]
Using this code, when sharing the page, the correct (and dynamic) image and description were generated each time.
Once again, big ups to #CBroe for helping me get to the bottom of this - and I hope that this can help somebody else in the future.
I've build my site with Weebly, but there's a problem when I tried to connect my website comment with FB comments. I was unable to solve for a long time, hope any expert can give me some advice. truly appreciate!
sample blog post: http://www.lifechem.tw/blog/170202
the og:url is:
<meta property="og:url" content="http://www.lifechem.tw/1/post/2017/02/170202.html" />
but the default Weebly FB comment tool is for http://www.lifechem.tw/blog/170202 instead of the current og:url
I've tried as other posts suggested
<script>document.write('<div class="fb-comments" data-href="' + document.location.href + '" data-numposts="7"></div>');</script>
but the result was the same as default Weebly tool.
I'd like to add a site-wide code into the blog footer that can copy the og:url in different blog posts.
truly appreciate!!
The location under which this content is shown in the browser is different than your og:url, so only setting that is likely not going to solve it.
But you can easily select the meta element with that property attribute value, and get the content using something like this:
document.querySelector('meta[property="og:url"]').content
(If you need support for older browsers that do not support querySelector, you could use a library like jQuery instead, or any other that support the attribute selector.)
I'm trying Facebook open graph, and I want to assign og:description dynamically when a user share my page,
and it's determined by my php.
<meta name="og:title" content="test1" />
<meta name="og:description" content="<?php echo $_REQUEST['parm'] ?>" />
<meta name="og:image" content="http://nuphoto.com.tw/titleapp4.png" />
<meta name="og:url" content="http://nuphoto.com.tw/share/easygo_bruce.php" />
However, it always caches the previous result, and it doesn't change.
I googled the solution , but all of them didn't work.
Here're my trials.
Go to https://developers.facebook.com/tools/debug
and enter my url.
it works, but I need to change my page dynamically. so it's not suitable for me.
Follow How to update facebook open graph image
$.post(
'https://graph.facebook.com',
{
id: 'http://www.example.com/my/share/url/',
scrape: true
},
function(response){
console.log(response);
});
it didn't work, and showed error.
FB.getLoginStatus() called before calling FB.init(). all.js:53
Object {url: "http://example.com/mytest.php", type: "website", title: "test, image: Array[1], description: "XXX"…}
Someone said add v=XXX&fbrefresh=XXX may help, but it still fails for me.
https://www.facebook.com/sharer/sharer.php?u=example.com&fbrefresh&v=xxxx
Please help me , I already spent hours of work....
None of those solutions will work for you, Why?
Facebook debugger scrapes your URL and get the static HTML (meta) of your pages.
Facebook BOT is not a user with a session!, it scrapes your page meta tags, refresh its cache and get out that's all
<meta name="og:description" content="<?php echo $_REQUEST['parm']; ?>" />
$_REQUEST['parm'] is what the current user/session see and set, while the debugger doesn't have a session or $_REQUEST['parm'] set.
sincerely, you can't change og:image dynamically according to the current session.
In fact , what I want is to make a dynamically FB description, I will show different coupon code for each FB sharing post. So I need to pass the coupon code to description. I can't find the correct way. Using get string in sharer.php?u=http://example.com.tw?coupon=DXSCVV didn't work.
Finally, I use php to generate a file dynamically, which this file has the file name of coupon, such as DXSCVV.htm. sharer.php ->sharer.php?u=http://example.com.tw/DXSCVV.htm
It works. Thank you for your help.
i had the same issue but i solved that by adding this code to force facebook to scrape my page it worked for me
FB.api("", 'post', { id: 'YourLinkToShare', scrape: 'true' }, function () {"YourShareMethodHERE'; });
try it and let me know ;)
I'm having troubles with my meta tags with Open Graph. It seems as though Facebook is caching old values of my meta tags. Old values for Attributes og:title and og:url are still used, even though I have changed them already.
I ran Lint on a page in my site, and this appeared:
Notice that there are two values for og:title and og:url, and the last one prevailed. However, The last two entries are the OLD entries that I used for this site. I am now currently using these meta tags (you can verify if you view the source of the HTML):
<meta property="og:title" content="Smart og rummelig pusletaske fra Petit Amour med god plads til alt – værdi 1.099 kr – køb nu kun 599 kr "/>
<meta property="og:description" content="Pinq.dk - Det gode liv for det halve"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://pinq.dk/tilbud/landsdaekkende/lissy/"/>
<meta property="og:image" content="http://pinq.dk/wp-content/themes/pinq/images/logo-top.png"/>
<meta property="og:site_name" content="Pinq" />
<meta property="fb:app_id" content="161840830532004" />
Why is Facebook caching og:title and og:url? Is anyone experiencing the same issue?
Go to http://developers.facebook.com/tools/debug
Enter the URL following by fbrefresh=CAN_BE_ANYTHING
Examples:
http://www.example.com?fbrefresh=CAN_BE_ANYTHING
http://www.example.com?postid=1234&fbrefresh=CAN_BE_ANYTHING
OR visit:
http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912
I was having the same issue last night, and I got this solution from some website.
Facebook saves your cache thumbnail. It won't refresh even if you delete the thumnail/image from your server. But Facebook allows you to refresh by using fbrefresh.
The most voted question is quite outdated:
These are the only 2 options that should be used as of November 2014:
For non developers
Use the FB Debugger: https://developers.facebook.com/tools/debug/og/object
Paste the url you want to recache. (Make sure you use the same url included on your og:url tag)
Click the Fetch Scrape information again Button
For Developers
Make a GET call programmatically to this URL: https://graph.facebook.com/?id=[YOUR_URL_HERE]&scrape=true (see: https://developers.facebook.com/docs/games_payments/takingpayments#scraping)
Make sure the og:url tag included on the head on that page matches with the one you are passing.
you can even parse the json response to get the number of shares of that URL.
Additional Info About Updating Images
If the og:image URL remains the same but the image has actually changed it won't be updated nor recached by Facebook scrapers even doing the above. (even passing a ?last_update=[TIMESTAMP] at the end of the image url didn't work for me).
The only effective workaround for me has been to assign a new name to the image.
Note regarding image or video updates on previously posted posts:
When you call the debugger to scrap changes on your og:tags of your page, all previous Facebook shares of that URL will still show the old image/video. There is no way to update all previous posts and it's this way by design for security reasons. Otherwise, someone would be able to pretend that a user shared something that he/she actually didn't.
If you have many pages and don't want to refresh them manually - you can do it automatically.
Lets say you have user profile page with photo:
$url = 'http://'.$_SERVER['HTTP_HOST'].'/'.$user_profile;
$user_photo = 'http://'.$_SERVER['HTTP_HOST'].'/'.$user_photo;
<meta property="og:url" content="<?php echo $url; ?>"/>
<meta property="og:image" content="<?php echo $user_photo; ?>"
Just add this to your page:
// with jQuery
$.post(
'https://graph.facebook.com',
{
id: '<?php echo $url; ?>',
scrape: true
},
function(response){
console.log(response);
}
);
// with "vanilla" javascript
var fbxhr = new XMLHttpRequest();
fbxhr.open("POST", "https://graph.facebook.com", true);
fbxhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
fbxhr.send("id=<?php echo $url; ?>&scrape=true");
This will refresh Facebook cache. If you use the jQuery solution, have a look at "response" in console.log - you will find there "updated_time" field and other useful information.
The OG thumbnail does not seem to refresh even if passing the fbrefresh variable.
To update this without waiting for automated clearing you'll need to change the filename of the thumbnail associated meta tag value and refresh.
Basically, the answer is patience ;)
I checked the Linter this morning, and og:title and og:url displays correctly, without the redundant values. I guess FaceBook automatically clears its cache at some specific interval. I just have to wait.
I had the same issues using og:image, several attempts to rename the file or clear FB cache did not work either via the facebook debugger or testing via an actual account.
The new facebook guidelines state the image size should be 1200 x 630 or having that aspect ratio, this seems to be wrong, the only thing that worked for me was using an image with square dimensions.
Edit* Afew hours I went back to use 1200 x 630 and it magically worked, it was magical.
I also renamed the files to f*^*kfacebook.jpg, not sure it helped but it felt good.
Yes, facebook automatically clears the cache every 24 hours: Actually facebook scrapes the pages and updates the cache every 24 hours https://developers.facebook.com/docs/reference/plugins/like/#scraperinfo.
Ooook, finally it helped (I use IP.Board). What I had to do was:
Change url of og:image on my website (General configuration).
Try this method with ?fbrefresh=1154464gd56
Thanks to author for this thread!
EDIT: What is more you need to remember about image requirements. For now (january 2013) it's:
- at least 200 px in both directions
- maximum ratio 3:1
Visit the FB page https://developers.facebook.com/tools/debug/og/object/
Enter your domain.
Click the button "Fetch new scrape information"
Done
I'm sorry folks but the correct answer is:
There is no fool proof way to update the open graph og:image url with immediate result. It is cached until fb updates (reportedly every 24 hours)
Here are things that have been reported to work by others but I have had ZERO success with any of them.
Choosing "Fetch new scrape information"
Changing the actual image filename and/or deleting the original
Adding a query string to the image url by appending a PHP TIMESTAMP or ?anything
Adding the "...yoursite.com/?fbrefresh=anything" query string to the debugger fetch url
Choosing the graph API link at the bottom of the og dev page
Choosing to see exactly what the scraper sees - does not appear to request real time un-cached scrape data, it still shows the cached image url even if the file no longer exists
Inspecting your code is always a spot on way to confirm it is not an issue with browser cache or some caching service. If the meta information is up to date in your code and you've tried all of the above (unless another suggestion comes to fruition), the correct answer is you can do nothing but wait.
We just ran into this, as it turns out, we weren't linting the right url, since the real url had a query string (duh, different page as far as a bot is concerned).
http://example.com/
!==
http://example.com/?utm_campaign=foo
The linter will recache your page, you don't have to wait.
One thing to add, the url is case sensitive. Note that:
apps.facebook.com/HELLO
is different in the linter's eyes then
apps.facebook.com/hello
Be sure to use the exact site url that was entered in the developer settings for the app. The linter will return the properties otherwise but will not refresh the cache.
I've found out that if your image is 72dpi it will give you the image size error. Use 96dpi instead. Hope this helps.
Go to http://developers.facebook.com/tools/debug
Paste in the url of the page and click debug. If your site is using url aliases make sure you are using the same url as Facebook
is using for the page you are sharing (example: in Drupal use the
node/* path instead of the alias if the page is shared via that
url).
Click in the "Share preview" part on "See this in the share dialog" link
Facebook Developer Documents says title property has exception:
Once 50 actions (likes, shares and comments) have been associated with
an object, you won't be able to update its title
https://developers.facebook.com/docs/sharing/opengraph/using-objects#update
Had a similar experience. Website link was showing a 404 in the preview that facebook generated. Turns out the og:url metadata was wrong. We had already fixed it a few days back but were still seeing a 404 on the preview. We used the tool at https://developers.facebook.com/tools/debug/ and that forced the refresh (didn't have to append any parameters by the way)
In our case, Facebook didn't refresh the cache after 24 hours but the tool helped force it.
It is a cache, ofc it refreshes, that's what cache is ment to do once in a while. So waiting will eventually work but sometimes you need to do that faster. Changing the filename works.
I was having this issue too. The scraper shows the right information, but the share url was still populated with old data.
The way I got around this was to use the feed method, instead of share, and then populate the data manually (which isn't exposed with the share method)
Something like this:
shareToFB = () => {
window.FB.ui({
method: 'feed',
link: `signup.yourdomain.com/?referrer=${this.props.subscriber.sid}`,
name: 'THIS WILL OVERRIDE OG:TITLE TAG',
description: 'THIS WILL OVERRIDE OG:DESCRIPTION TAG',
caption: 'THIS WILL OVERRIDE THE OG:URL TAG'
});
};
Really easy solve. Tested and working. You just need to generate a new url when you update your meta tags. It's as simple as adding a "&cacheBuster=1" to your url. If you change the meta tags, just increment the "&cacheBuster=2"
Orginal URL
www.example.com
URL when og meta tags are updated:
www.example.com?cacheBuster=1
URL when og meta tags are updated again:
www.example.com?cacheBuster=2
Facebook will treat each like a new url and get fresh meta data.
Years later and this is still a common problem, but its not always facebook's cache: It is very often human error (allow me to elaborate)
OG:TYPE effects your image scrape:
https://ogp.me/#type_article not the same as https://ogp.me/#type_website
Be aware that og:type=website will cause any /sub-pages/ of that url to become "canonical". This means you will have trouble getting your images to update using the scraper no matter what you do.
Consider this "assumption and common mistake"
-<meta property="og:type" content="website" /> => https://www.example.org (parent)
-<meta property="og:type" content="website" /> => https://www.example.org/sub-page/
-<meta property="og:type" content="website" /> => https://www.example.org/sub-page/child-2/
- Ergo: /sub-page/ and /child-2/ will inherit the og:image of the parent
Those are not "all websites", 1 is a website, the others are articles.
If you do that Facebook will think all of those are canonical and it will put the FIRST og:image into all of them. (try it, you'll see) - if you set the og:url to be your root or parent domain you've told facebook they are all canonical. (there is good reason for that, but its off topic)
Consider this solution (which is what most people "really want")
-<meta property="og:type" content="article" /> => https://www.example.org/sub-page/
-<meta property="og:type" content="article" /> => https://www.example.org/sub-page/child-2/
If you do that now Facebook will give you far far less problems with scraping your NEW images.
In closing, YES the cache busters, random vars, changing urls and suggestions here can work, but they will seem like "intermittent voodoo" if the og:type is not specified correctly.
PS: remember that a CDN or serverside cache will serve to Facebook's scraper even if you "think" you can see the most recent version. (I wont spend any time on this other than to point out it will waste colossal amounts of your time if not double checked.)
I had a different, but similar problem with Facebook recently, and found that the scraper/debug page mentioned, simply does not appear to read any page in its entirety. My meta properties for Open Graph were further down in the head section, and the scraper would constantly inform me that the image specification was not correct, and would use a cached version regardless. I moved the Open Graph tags further up in the code, near the very top of the page, and then everything worked perfectly, every time.
I had the same problem with fb and twitter caching old meta data, this threw me for a curve as I continued to edit the code but no change. I finally discovered they had caching my first request. Adding a query string to the url worked for twitter but not fb(for me).