We have a site that we want users to share an image based on the results of their input. Basically a map with selected countries unique to them.
We previously could do this using the sharer.php parameters up until about today but these now seem to have bitten the dust for good. They were due to be discontinued this month.
Our alternative (hopefully someone has better!) is to set the og:image property for our home page (which is what we want linked on the FB post) dynamically based on the URL parameter. All seems straight-forward, however whenever we test share FB uses the standard image for the home page as if there is no URL parameter.
Does anyone know definitively if FB uses the URL parameters when it crawls a site to get the image? Our tests seems to show they don't but if anyone knows a way around this I would be eternally grateful.
FYI, here are the og tags so you can see how they're set dynamically. It's web2py but should make sense I hope:
<meta property="og:url" content="{{=cfg.global_base_url + request.env.web2py_original_uri}}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{=(cfg.global_strap_line + ' | ' + cfg.global_app_name) if not response.title else response.title}}" />
<meta property="og:description" content="{{=cfg.global_open_graph_description if not response.description else response.description}}" />
<meta property="og:image" content="{{=cfg.global_share_image if not response.share_image else response.share_image}}" />
<meta property="og:locale" content="en_GB" />
Here's an example share URL: https://www.wherecani.live?pid=9d684d33-78ad-4f39-9010-458583dbfcef
You can see in the HTML that the og:image relates to the URL parameter as expected.
I had the same problem. This is how i fixed it.
This is going to show the default imageL
<meta property="og:url" content="http:example.com">
<meta property="og:image" content="http:example.com/img/fb.jpg">
To change the image dynamically based in the url, you need to also add the og:url like this
<meta property="og:url" content="http:example.com/pages/cars">
<meta property="og:image" content="http:example.com/img/pages/cars/fb.jpg">
It worked for me. Tested in open graph.
Here's another explanation.
Related
We have a Facebook app that generates custom shareable links for users when they complete certain activities. The shareable pages have the following meta tags:
<meta property="fb:admins" content="1000000000000000">
<meta property="fb:app_id" content="1000000000000000">
<meta property="og:site_name" content="ActivityApp">
<meta property="og:title" content="I just completed this activity.">
<meta property="og:description" content="Click here to see John's activity!">
<meta property="og:type" content="website">
<meta property="og:url" content="http://activity.com/abcd69478383951886c14ae">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="420">
<meta property="og:image" content="http://cdn.com/abcd69478383951886c14ae.png">
<meta name="author" content="John">
Most of the time, Facebook will correctly show the title, description, and image on the Newsfeed when the links are shared. But sometimes, the og:image and og:title will be hidden for no reason. This is what it looks like...
The strange part is that when we check the link on the debugger by clicking Show existing scrape information it would say that it was correctly scraped and would display the title, image, and description at the bottom.
Why does this happen, and what can we do to make sure that our links will display correctly every time they are shared?
Additional info: our app generates millions of stories so we can't manually do anything to the links.
I still cannot post comments, so I try to give my answer: try using og:image:url instead of og:image. I know they should be the same, but sometimes it works.
link to answer
Read and try any of these:
https://photographylife.com/how-to-make-facebook-show-images-in-links
http://www.addthis.com/academy/how-to-optimize-facebook-sharing/
There are plenty of suggestions that you can try but I don't have concrete knowledge about that so you can search for more information in the google page.
People used to work on this:
https://developers.facebook.com/tools/debug/og/object/
But you can also try this:
https://developers.facebook.com/tools/debug/sharing
If you still can't make the image there, then it must be something wrong with your website. Unless you can provide an actual link to your resource, I can't do any further help.
This may look like a duplicate question but when I asked this along with a similar question I had it deleted and was told to ask a new question.
I'm trying to get Facebook to show an image when I link to my site. There seems to be a way to get it to use an image of your choice rather than taking it from the page but it cannot get it to work.
The code I'm using is below:
<meta property="og:title" content="My Title">
<meta property="og:type" content="company">
<meta property="og:url" content="My URL">
<meta property="og:image" content="My Path/images/My Image.jpg">
<meta property="og:description" content="My Description">
The path for the image is fine. If I copy into the address bar it shows but every time I do this is just taking the image from the page.
I'm guessing there is something really obvious that I'm missing. Would somebody be able to point it out?
Go to https://developers.facebook.com/tools/debug/ enter your URL and click "Fetch new scrape information" to refresh all meta data.
This Facebook post https://www.facebook.com/damnlolcom/posts/812448255487528 looks like a photo post but is actually link, it clicks through to an external site.
I have tried sharing a link, removing all og metatags from my site except image path but it doesn't look like that.
The closest I can get is the default link behaviour without any title description, so just an image with the url besides/below rather than displayed over the top of the bottom of the image.
So what sort of post is this?
Thanks for any help.
Check out the url in linter .
raw tags found on page
Meta Tag <meta property="fb:app_id" content="172220699476208" />
Meta Tag <meta property="og:site_name" content="Damn! LOL" />
Meta Tag <meta property="og:title" content="Turns Out My Friend's Mom Is A Racist" />
Meta Tag <meta property="og:description" content="Click for your daily dose..." />
Meta Tag <meta property="og:url" content="http://www.damnlol.com/turns-out-my-friends-mom-is-a-racist-47206.html" />
Meta Tag <meta property="og:image" content="http://www.damnlol.com/pics/998/d6c09d2cc01d04bc5e47483e85774aee.jpg" />
Meta Tag <meta property="og:type" content="article" />
Everything looks normal here . They are not using anything special . It is just facebook presents links in slightly different designs on feed on different times .
ps : try setting property="og:type" content="article"
I have been struggling with this for many hours now and have not gotten anywhere.
I have the following metatags:
<meta property="og:type" content="website" />
<meta property="og:title" content="I'm going to see Speaker name" />
<meta property="og:description" content="This is the description of the speaker" />
<meta property="og:url" content="http://example.com/Speakers.aspx?speaker=35" />
<meta property="og:image" content="http://example.com/test.jpg" />
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
After running this URL through the Facebook debug tool, I was given the following error message:
Object at URL 'http://example.com/Speakers.aspx?speaker=35' of type 'website' is invalid because a required property 'og:image:url' of type 'url' was not provided.
According to Open Graph protocol (http://ogp.me/#structured), the og:image & og:image:url are identical, but I tried to add it anyways:
<meta property="og:image:url" content="http://example.com/RGDDT/images/test.jpg" />
<meta property="og:image:type" content="image/jpeg" />
However the first 7 images on the page are still being scraped instead of the one I want to use.
Any insights would be greatly appreciated!
This is probably the best article on which metatags you need. Facebook requires you to have an id, in order to use even a Like button now a days. I don't see those metatags in your snippet. Try adding:
<meta property="fb:app_id" content="1111111111111111" />
<meta property="fb:admins" content="2222222222" />
The first is your app_id number, it seems you need to turn even your blog into an app to make Facebook happy. The second is your personal id number, you can also use your Fan Page if you have one. Including these things seems to make Facebook happy and I think you get Analytics for your troubles.
So I've finally solved this problem.
Problem #1: I was using 'permanent' URLs (/getmedia/3c87abee-1cd0-4ca3-a07d-b7d8fde8ec4b/irma1.jpg.aspx?width=437&height=434&ext=.jpg) instead of 'direct' URLs (/RGDDT/media/RGDDT/Speakers/facebook-share/irma-boom.jpg?width=600&height=315&ext=.jpg). This was a setting I was able to configure in Kentico (the CMS we have used to build this site)
Problem #2: I was getting the results I wanted in the Facebook debug tool, but they were being cached when I tried to share from the live site. Thanks to this article I was able to solve that problem by adding '&v=1' (or '?v=1' if you don't already have a query string at the end of your URL), so Facebook considered this a new page request and didn't cache the description I had hardcoded in as of this morning.
I want to share a video with a thumbnail of only one image via sharer.php
I understand that most of people use Feed dialog with flexible UI but I need advanced options in this case.
A dialog looks like this and I want to have only one thumbnail the on I specify with og:image on a relative page
My OG tags look like this:
<meta property="fb:admins" content="*admins*" />
<meta property="fb:app_id" content="*app_id*" />
<meta property="og:type" content="movie" />
<meta property="og:video:height" content="*height*" />
<meta property="og:video:width" content="*width*" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:title" content="*title*" />
<meta property="og:description" content="*description*" />
<meta property="og:image" content="*image*" />
<meta property="og:url" content="*url*" />
<meta property="og:video" content="*video*" />
And I use a basic function to call a Share This Link dialog
u = $(*link*).html();
t = $(*name*).html();
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=*width*,height=*height*');
return false;
My question is how can I modify my code / add code to have only 1 thumbnail instead of 1 of 2 message
I tried changing my code, removing og:url, checking og:image, etc, using facebook debugger to clear its cache. And I could find nothing on net either.
I've been told you have to modify the code in (meta property="og:image" content="image" /) to
(meta property="og:image" content="http://www.yoursite.location of the image" /)
I've personally messed with this for several days and finally accomplished it! The way I did it was to publish the image I wanted FB to use for my site to my server. Then, in my browser, I did a right-click on the newly published image and chose "Copy image location". Then I added the above code to my page html between the header tags, and pasted the copied image location between the quotes. Be sure that your image is at least 200 x 200 px - they say the bigger the better, but not more that 5MB in size. I was having a lot of trouble getting FB to pick my specified image because I was making it too small. I've finally gotten success just now by resizing my image to 1000x712, and it's working.
In my case, Facebook has still not recognized my specified image as the ONLY image I want used, but I've also been told that FB will "scrape" my site every 24 hours and, hopefully, once that's done, the multiple images option will disappear. Hope this helps.