I try to share the article or web page but the story does not show the image when sharing for the first time but when i share for the next time, image is coming.
Checked in FB Debugger Also, same result.image not coming for the first time , next time it is coming.
<html class="no-js" lang="ar" dir="rtl" data-ng-app="mApp" xmlns:fb="http://ogp.me/ns/fb#">
<meta property="og:title" content="mytitle"/>
<meta property="og:url" content="http://mytest.com"/>
<meta property="og:image" content="http://mytest.com/1-773128.jpg"/>
<meta property="og:description" content="ffff2024"/>
<meta property="og:site_name" content="ggggggg"/>
<meta property="og:type" content="ARTICLE"/>
<meta property="fb:app_id" content="2444444444444"/>
UPDATE
This solution with iframe is not working anymore! Worked since yesterday 06 February 2017.
Facebook just set X-Frame-Options as DENY so you cannot load the sharer url in an iFrame.
I'm figuring out another workaround.
I struggled to find a solution for this facebook bug (adding og:image:width and og:image:height was not enough).
Finally I came up with a workaround that worked: I added an hidden iFrame with the sharer link in the page footer; in this way the facebook crawler check the page once is loaded and, when you click facebbok share button in the first time you can see the shared image!
Example:
<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>
https://developers.facebook.com/docs/sharing/best-practices#precaching lists ways to avoid this problem, by either
scraping new articles upfront via API, or
specifying the image dimensions via OG meta tags as well.
Related
I have a blog built on jekyll and for example the post in this address - http://lourencoazevedo.com/2015/05/12/effortless.html, if I post it on facebook it doesn't display the picture - it doesn't pick it up.
I tried to put an html - code on the blog like:
<p align="center"><img src="http://lourencoazevedo.com/pimagens/2015-05-12.jpg" style="border: 1px solid #ccc; padding: 5px; width: 800px"></p>
or creating a class pic in CSS like
<p class="pic"><img src="http://lourencoazevedo.com/pimagens/2015-05-12.jpg"><p>
Now I'm just using the standard jekyll notation
which renders as
<p><img src="http://lourencoazevedo.com/pimagens/2015-05-12.jpg"
alt="germinado" /></p>
But none of this works.
Any help will be welcome - thanks in advance.
You need to tell Facebook which image to use with specific tags (which go in the head part of your HTML page).
For images these could be:
<meta property="og:image" content="http://your-image.jpg">
<meta property="og:image:url" content="http://your-image.jpg">
<meta property="og:image:secure_url" content="https://your-image.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
More information on the Facebook documentation page.
You can also use the Open Graph Debugger (you need to log in) to test your tags and force Facebook to refresh their data.
I'm trying to configure a share/send button with a link. I've properly configured the open graph image tags on a page, but when opening the share/send dialog for the first time, the image doesn't show. Without refreshing the page, opening the share/send dialog for the second time, the image will show. The URL of the page and the images are all in HTTP (instead of HTTPS).
I can't simply use the URL-Linting tool as the page will have a unique URL. The website is about sending virtual flowers to people and so the page to be shared is freshly generated.
Would really appreciate some help :)
Found the problem. Somehow this problem happens if you don't set your open graph tags properly.
Incorrect:
<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
Correct:
<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="442" />
UPDATE
This solution with iframe is not working anymore! Worked since yesterday 06 February 2017.
Facebook just set X-Frame-Options as DENY so you cannot load the sharer url in an iFrame.
I added og:image:width and og:image:height, checked all my property tags and the problem was still there.
I found a workaround for this facebook bug that worked: I added an hidden iFrame with the sharer link in the page footer; in this way the facebook crawler check the page once is loaded.
<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>
This might help someone.
I found that Facebook did not like the square image I used (1000px x 1000px),
so I cropped it to 660px x 315x and Facebook accepted it.
Setting og: width and height did not help and it was literally about the image dimensions.
One more possible answer that worked for me - make sure you have the og:image meta tag set before all the other tags, otherwise it still doesn't work!
You should provide the image link correctly in the og:image property. If you still not get the thumbnail, add image height and width like this:
<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />
Perhaps, it will help someone.
No idea why, but after removing this from my 'head' block
<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />
The problem has been solved.
Here's my meta tags
...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" />
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" />
<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...
I'm using 'https' in both meta tags (og:image & og:image:secure_url), because the website is using ssl.
If you're still having problems, you may also need to add the MIME type property, like this:
<meta property="og:image:type" content="image/jpeg">
NOTE: that's image/jpeg not image/jpg — (you gotta have the e in there)
FB crawler accepts image/gif, image/jpeg, image/png
I've a web page and I want to share it in facebook but the image shown is not ok.
In the HTML code of the web I have:
<link href="http://www.example.com/img/logo2.png" rel="image_src" />
In the options to select the image, there are other images, but not logo2.png
I've tried to delete facebook cache with facebook debugger, but the result is the same.
Edit:
If I add ?v=1 to the end the URL when I share it, the logo option is shown. It means that facebook debugger is not deleting the cache.
Also, I want that the logo image be the first option.
Can you help me?
Solved:
<!-- facebook tags -->
<meta property="og:image" content="http://www.example.com/img/logo.png"/>
<meta property="og:url" content="http://example.com">
<meta property="og:title" content="Portfolio | web">
<meta property="og:description" content="Portfolio">
I think that you may be using the wrong tag. I haven't done this in a while, but I believe that it should be a <meta tag with a property="og:image" and then content set to your image. The following (really old) question addresses this issue/conforms to what I remember: How does Facebook Sharer select Images and other metadata when sharing my URL?
Let me know if it works :)
The problem I'm having is when I post a link to a post on my website to either Facebook or Google+ that link points to my homepage. Even in preview, the thumbnail displayed is that of the homepage.
From what I have found (which hasn't been much) it seems that the problem might be with the facebook metadata. I have tried to validate it on facebook's open graph validator and at first I was getting a 206 result when the links were working. Now I get: Facebook URLs aren't scrapable by this Debugger. Try your own. Not sure why.
Having the same issue with Google+. When I first published the website it was working fine and this happened out of nowhere.
Here is what I have in my header:
<!--Facebook Metadata /-->
<meta property="og:title" content="Website Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://URL.com/"/>
<meta property="og:image" content="http://URL.com/img.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="User_1"/>
<meta property="og:description" content="Website Descriptiom"/>
<!--Google+ Metadata /-->
<meta itemprop="name" content="Google+ ID">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Empty">
I have tried removing it and still the problem persists. I do want to point out that I have an html site with a wordpress blog that's being hosted on my server. Wondering if the issue might be with wordpress?
Should the metadata be placed on the index.html and the wordpress homepage or just the index.html? Any help would be appreciated. Thanks.
When you delete those metadata tags, specifically the og: ones (facebook's open graph meta tags) - you have to tell Facebook to pick up a new copy of your page as they cache everything. If you haven't tried this already:
Remove those tags
View the source on your live site, to confirm they are in fact removed
Go to http://developers.facebook.com/tools/debug and type in the URL of the page you are testing. This will tell Facebook to grab a new copy.
If that works (as it should), then you can play around with what tags to keep and how to make them dynamic - knowing that anytime you make a change, you will have to redo step #3 to tell FB to grab a fresh copy.
As the title suggests I am having trouble getting the correct thumbnails in my websites activity feed. When a user likes an article the activity feed works fine and shows the article liked. However it always shows the default facebook thumbnail image.
I have used the facebook debugger and it does not show any errors or warnings and it does show the correct og:image.
What have I tried
I have tried liking the pages I pulled through the FB debugger to see if a hard refresh would perhaps solve the problem, it did not.
I have tried specifying the articles with article type og:article, in hope i would solve the problem, this did not work either.
I have read through the facebook documentation and I find it very lacking when you are looking for something that does not go as planned, I did not find anything related to the activity feed thumbnails in here.
I think the problem might lay in facebook their image cache, but I'm not entirely sure. I read that there really isn't a way to hard refresh that + I would have to do it for every page/article on the website which is not logical.
Hopefully some of you have had the same problems and can point me in the right direction. Cheers
edit
Here are my meta tags (along with smarty template enginge)
<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REDIRECT_URL}">
<meta property="og:title" content="{$facebook_like_title|default:'*website name*'}">
{if $facebook_like_description|trim != ":"}
<meta property="og:description" content="{$facebook_like_description|default:'*Default like description*'}">
{else}
<meta property="og:description" content="*Default like description*">
{/if}
<meta property="og:image" content="http://{$smarty.server.HTTP_HOST}/img/logo.png">
{if $article}
<meta property="og:type" content="article">
<meta property="article:author" content="123456789">
<meta property="article:author" content="123456789">
{else}
<meta property="og:type" content="website">
{/if}
<meta property="og:site_name" content="website.com" />
<meta property="fb:app_id" content="****************" />
FB activity feed:
<div style="background-color: #fff; overflow: hidden; width: 220px; height: 300px; margin-bottom: 20px;">
<div class="fb-activity" data-site="website.com" data-app-id="*******************" data-width="220" data-height="300" data-header="true" data-border-color="#2F5480" data-font="arial" data-recommendations="false"></div>
</div>
Like button:
<div class="fb-like" data-href="http://{$smarty.server.HTTP_HOST}/{$news->readonUrl}" data-send="false" data-width="400" data-show-faces="false"></div>
Edit 2
Here is a screenshot from the activity feed:
I have removed the first users profile picture (privacy and all that) but it is showing up correctly. The second user has got a default profile picture.
Now what I want is those "filler stories" to have the correct thumbnail (which is specified as the og:image) and not the default one.
Here is an example link which FB should be scraping when liked (first filler story in this case):
http://sportflock.com/food/voedingsschemas
FB lint:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fsportflock.com%2Ffood%2Fvoedingsschemas
You didn't provide a screenshot of the activity feed you see. But, I think what you see in the example are filler stories when the activity feed doesn't have enough real stories from real users to show.
This screenshot has 3 filler stories:
Note, that the activity feed in the example (in the FB docs) will look different for each viewer. For example, when there is lots of activity (or when the viewer has lots of friends who have actions on the site), there will be a real person next to every story in the activity feed.
At this point, I think this is what's needed: Screenshot of the activity feed exhibiting the issue, and link/url in the story that is scraped by FB.
The problem eventually solved itself. It must have been the facebook cache or something. After not having checked on this problem for several months, I came to check on it to see if anything had changed. Suddenly all thumbnails showed correctly without any help from my side.