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.
Related
When I share a link on tumblr, it sometimes will grab the page's blog post image. For example, if I share something like:
http://www.smartpassiveincome.com/income-reports/my-may-2016-monthly-income-report/
It'll grab this image for it's thumbnail:
http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg
How do you make tumblr grab the image? Is there some meta tag you need to include?
Searching the source code this image appears three times:
<meta property="og:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<meta name="twitter:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<header style="background-image: url('http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg')">
Does anyone know which one it uses and could explain what the process for choosing how to grab the image is?
The original page is: http://www.patchesoft.com/learning-linux-how-to-find-what-version-of-linux-youre-running-command-uname-and-lsb_release/
But when I post it into Tumblr, it doesn't grab the featured image.
These meta properties should get your image to show on tumblr
<meta property="og:image" content="http://example.com/ogp.jpg" /> <!-- Required -->
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
To learn more head over to http://ogp.me/
Your site seems to have these properties set and I get this when I put url of your site on tumblr...
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.
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
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.
Ok, i know there's a lot of posts on this topic and i have read through a lot of them; however, i have yet to be able to solve my problem.
I am trying to add a Facebook like button to a website and use the Open Graph protocol to send specific information for the post that gets posted to the persons news feed that clicks the like button.
This is the code blocks i am using on the site:
HTML tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/">
Meta Tags:
<meta property="og:title" content="ethneCITY - Reaching the unreached in the urban center!" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.ethnecity.com/dev/images/share.png" />
<meta property="og:site_name" content="ethneCITY" />
<meta property="fb:admins" content="61800397" />
<meta property="og:description" content="100 yrs ago we sent missionaries to the nations to look for the cities. Today you go to the cities & you find the nations." />
Like button code generated from Facebook's like button creation tool:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=145713945515336&xfbml=1"></script><fb:like href="http://www.ethnecity.com" send="true" layout="button_count" width="150" show_faces="false" action="like" colorscheme="dark" font="tahoma"></fb:like>
How it appears on my news feed right now? (not what i want) - http://tinypic.com/r/axi2kg/7
Anyone have any ideas why when i click the like button it only displays the post on my news feed like this instead of using the meta tags for the feed content?
Did you lint it?
Its data is likely out of date/cached and it just hasn't updated yet.
http://developers.facebook.com/tools/debug