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!
Related
Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem
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?
I am adding dynamic like buttons to all the items on a website of a client, they do work now (after a lot of trial and error) but it still asks the user to confirm the like.
I tried the facebook debug tool and it gives me a bunch of open graph warnings and like button warnings that should be fixed.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.bowmanmusic.be%2Fbowman%2F
So I add all the required open graph meta tags to the head of my page like so:
<meta property="fb:app_id" content="159728304104034" />
<meta property="og:title" content="Bowman" />
<meta property="og:type" content="band" />
<meta property="og:url" content="http://www.bowmanmusic.be/bowman" />
<meta property="og:image" content="http://www.bowmanmusic.be/bowman/images/bowman01.jpg" />
<meta property="og:site_name" content="Bowman Music" />
<meta property="og:description" content="Bowman website" />
And now it still asks the user for confirmation but it doesn't register the like anymore i.e. it doesn't appear in the timeline nor in the event log.
I am loading the fb sdk like so:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
And this is my php for the like button:
echo "<div class=\"fbbutton\"><fb:like href=\"http://www.bowmanmusic.be/bowman/index.php?id=",$id,"\" send=\"false\" layout=\"button_count\" show_faces=\"false\"></fb:like></div>";
I would like to get rid of the need for confirmation and off course that the like event shows up on the users timeline.
Does anybody now how to solve this?
The way you include the like button is not good (especially the synchronous inclusion of the javascript SDK). Please use the generator on the like plugin page:
https://developers.facebook.com/docs/reference/plugins/like/
also, i don´t see any like button on your page. All menu entries just lead to the same image. Keep in mind that every page that has a like button MUST be public (not behind a user login or whatever).
Btw, you should use an App Id for the Like button (see plugin generator), should prevent you from getting the confirmation.
...not to mention that every page that can be liked must have the correct open graph tags, not just the homepage. So, if you want to like "http://www.bowmanmusic.be/bowman/index.php?id=xxx", you have to make sure that the specific site got the correct tags, including the correct url with index.php and stuff. In any case, you should rewrite those urls, but that´s another long story...
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.
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">