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.
Related
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 customize image, page title, and description data for facebook share feature on my page. When I view the og meta tags in the source of my page, I see the correct info
<meta property="og:title" itemprop="name" content="You got an A!" />
<meta property="og:description" itemprop="description" content="Find out how much you know about the Hittites at MYQUIZPAGE" />
<meta property="og:image" itemprop="image" content="http://PAGE/MYPAGE/MYIMAGE.jpg" />
However, when I plug the url into the facebook debugger, I instead see details of the parent site.
I dont know why this is, as the correct info is sent in the header, NOT appended afterwards or anything like that.
Im using the following anchor for the share button(wihch I have used many times in the past without fail)
<a href="//www.facebook.com/sharer/sharer.php?u=MYURL" target="_blank">
One more detail- the content of the og tags on my page depends on values in the url query string.
Any ideas as to what is going on?
So I've notices from my Facebook Page Analytics that posts without link previews (thumbnail & excerpt) get over 10 times the 'reach' as posts with links previews.
I recently used an app called Buffer to post to Facebook and the first 10-15 posts included a small bit of text and a shortened link (that was clickable) - but no thumbnail or excerpt underneath. Those posts had a reach of about 250 people.
Now, posts (from the exact same app) are generating the link preview with thumbnail and I'm reaching 10-12 people per post.
Does anybody have any insight on this? Is there a way to disable Facebook's link detection for previewing URLs while keeping the link in the post itself?
Thanks :D
If you don't control the URL you are posting, I don't know anything you can do. But if you happen to be posting content from a personal blog, etc...you can add social meta tags, which are intended to be used to describe the content to, in this case, Facebook. The example will use Facebook's meta tags.
If you look at the tags below, this is an example from a WordPress blogs generated output for a site I did for a friend:
<meta property="og:title" content="Reality Winner: Accused leaker wanted to ‘burn the White House down’"/>
<meta property="og:description" content="This leftist loon had access to classified material! They don't do a very good job of vetting folks! Can this contractor be 'fired'?!"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.mcbanned.com/reality-winner-accused-leaker-wanted-to-burn-the-white-house-down/"/>
<meta property="og:site_name" content="McBanned"/>
<meta property="og:image" content="https://www.mcbanned.com/wp-content/uploads/2017/06/6CB4A836-AFD3-4CAC-B3FF-A1D22427FE89-191-000000672C0A541C.jpeg"/>
<meta property="og:image:width" content="660"/>
<meta property="og:image:height" content="780"/>
These will tell Facebook exactly what to put in the link preview. If you have control over that, you can insert empty description, and a blank white image or something and it will just not show up. As far as completely stopping it...if you link to a simple page with only 1 image that is 200x200 or greater it will pick that one with or without the tags, but if you specify something it will choose that everytime (theoretically) so you could engineer something "blank."
I am using open graph for the first time. In any url like this you you can see a like button for the site's facebook page at top and another like button after the heading and summary of the article. The second like button is not working as required. If I like from that link then instead of the article the website's facebook page gets liked and the information which I want to show to other facebook users who see that like post is the summary of the article but instead it show that the person like the page alazydude. And the image is also not displaying which I have specified in the open graph tag. The website is still incomplete. I have tried many times now.
Have a look at this page. The second like button in the middle is not working properly.
Make sure you use the correct data-href in your code to like an article. (You should refer to the URL for that single article, even if it's on a page with multiple articles.)
For example:
<div class="fb-like"
data-href="http://www.yoursite.net/articles/unique-article-id-goes-here-or-something-like-that"
data-send="false"
data-layout="button_count"
data-width="140"
data-show-faces="false"
data-font="segoe ui"></div>
Facebook has developed a handy little tool to create that code for you!
Make sure you check out the Facebook Developers page on like buttons.
When this is done correctly, it should get the opengraph-data from that link and that would be fixed simultaneously.
You do have to make sure that the og-data is set correctly. (This is on the www.yoursite.net/articles/unique-article-id-goes-here-or-something-like-that page.)
<meta property="og:title" content="Title of the article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="same-url-as-the-data-href-from-like-button" />
<meta property="og:image" content="url-to-image-you-would-like" />
<meta property="og:site_name" content="Name of your site" /
Good luck!
I am a little confused about open graph I just want my pages to display the correct data when liked or shared. I used the following
<meta name="title" content="<%= MY PAGE %>" />
<meta name="description" content="DESC" />
<link rel="image_src" type="image/jpeg" href=""/>
However when you use the send button it does not show the image in the popup.
So I added all the open graph tags. Which worked well. However it started generating facebook pages for each page (I dont want this to happen really). Also when you used the share button it tried to send the URL of the facebook object not my app page. Is this normal behavior.
I dont think I really understand open graph even after reading all the documentation. Can anyone explain whats going on, what the minimum amount I need to add to the page to get the like button and send button working is and what the deal is with these autogenerated pages.
So I added all the open graph tags. Which worked well. However it started generating facebook pages for each page
No one sees these pages. I think (assume) you are referring to admin pages for objects liked outside of Facebook.
Also when you used the share button it tried to send the URL of the facebook object not my app page. Is this normal behavior.
It will send the current page the code is on, if the current page is a Facebook object then that's what it will send.
<html xmlns:fb="http://ogp.me/ns/fb#">
in the top
<meta property="fb:app_id" content="APP_ID">
<meta property="og:url" content="URL_OF_CURRENT_PAGE">
<meta property="og:title" content="TITLE">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content"URL_TO_IMAGE">