I'm implementing a facebook like button on a simple blog/news section I created in an MVC 3 web application.
I used the XFBML way to implement this.
It works, but not completely.
When clicking and checking it on facebook, it shows the title I specified.
Here is a piece of code.
The viewbag information comes from my view, this is in the layout/master page.
<meta property="og:title" content="#ViewBag.FGTitle" />
But since it's a news item, I also want the content of the article to be displayed.
It only shows, the title, the site name and that's it.
I checked the facebook developer page, but I cant find a meta property/Open graph type in which i can set this content.
any ideas?
see the facebook url linter it shows you exactly what facebook sees when greping the url. Also you should read up on the other meta tags
Related
I have a project, coded on codeigniter, which is basically a collection of posts by different users. While adding the fb share button and clicking on it, The image, title and description content is taken from the header of the home page and not of the page(view) where the share button is placed?
As mentioned here, The issue was that only those users could view the page who are signed in, and therefore even fb wasn't able to scrape the info from there.
EDIT: Whats important here is how FB scrapes the info. Apparantly the link you provide inside data-href if parsed by FB and they capture the og meta tags from the header on that page. However if you restrict those pages to logged in users, FB is also unable to parse the page and thus it reverts to the base URL's meta tags.
The original method for sharing links with a custom image, text and link appears to have been stripped from Facebook. I for one would love to see them bring this back.
Here is my situtation. I have a Facebook tab that loads a page that is hosted under my hosteddomains.com. I setup a Facebook app to work with my Facebook tab. When I try to use the new "Share Dialog" if the link I want to share is not the same as the app domains then i get an error and I can't share the link. Am I doing something wrong or is this what they intended to do?
IF that's what they intended to do then there is no way that this will replace what sharer.php could do. I could be on any site and share any link with an image to Facebook and have it posted to my wall.
The question is if i am on facebook tab and i want to share a link (I want a dialog box with a custom photo, title, link, and summary) and allow my users to post this custom message to there Facebook status.
Maybe i am confused about how to accomplish this, but so far i am not having much luck.
I miss the good ole days when i could just construct a URL and that would give me the ability to share what i want to share. Twitter and Pinterest have these methods.
Here are some code examples of things that I've tried that did not work:
Option #1:
The url in this option goes to page that I created on hosteddomains.com that has the Open Graph Meta Tags in it. My idea was to share these pages from my server that will direct them back to my Facebook tab. The result I was getting from this method was seeing the title of the tab from my FB page and description. The reason turned out to be that if i set the og:url to my Facebook tab page, that's the page that would get scraped. That's not what i was expecting from this method. I thought it would take the meta tags from the page i shared and the url with it. Not take all of the info from url and ignore the meta tags.
<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]"
target="_parent">SHARE ON FB</a></p>
Option #2:
Tried using Facebook Share Dialog. I had an interesting time with this one. I setup a new Facebook app. I tried the Facebook tab as the URL and also my custom url to the page that has custom open graph meta tags. The facebook app has two App Domains - hosteddomain.com and websiteA.com. I also created a Page Tab section. The page tab section loads the HTML page that was loaded in the tab we made for our facebook page. Issue with this method is I don't get a custom open graph options set from my php page. I'm picking up information from the facebook tab again. At least now the dialog box shows the name of the new app. I am limited in what i can share using this method. The url i share has to belong to the App Domains. In order to have multiple app domains, I had to make that Page Tab section and then add the second url to the App Domains field, otherwise i got a warning.
<a href="https://www.facebook.com/dialog/share?app_id=[appID]&display=popup&href=[url]
&redirect_uri=[url]&ref=s" target="_blank">SHARE THIS</a>
Option #3
The last thing I tried was the fb-share-button using the Javascript SDK. I get the same result as option #1. I don't think there is much difference between these two. Option 3 here is a bit easier to deal with and cleaner code. In this example, the url is to my custom page on hosteddomains.com that has my custom open graph meta tags. That doesnt seem to matter though. It still pulls the info from the og:url meta tag. I tried removing the og:url meta tag. I get the same result. Is it the Page Tab info interfering?
<div class="fb-share-button" data-href="[url]"></div>
I have a Facebook Like/Share button on a webpage. When you click the Share button, a window pops up allowing you to share a message about the site. There's a photo in the popup as well, which is derived from the webpage the button is on.
The problem is, that webpage shows a composite photo, an image on top of another image, and instead of showing the whole composite, the popup shows one piece of it.
Is there a way to use a different image entirely on the Facebook popup window, some specific image that's not present on the webpage? I had thought the og:image meta tag would do the trick, but it doesn't seem to work.
Thanks.
Mark
Got it. My problem is that the info I need from the Facebook Developer pages is either incomplete or not presented in a way I can understand. So for the benefit of others in my boat:
It's not enough to add the Like/Share button javascript code and div tag (where you want the button to appear). You also need to add a group of meta tags in the <head> section of your html page. (Note that in the Facebook Developers "Like Tag" page, the phrase "meta tag" does not appear.) The meta tag format is this: <meta property="og:type" content="website">
There is apparently a lag between your adding these meta tags and Facebook finding them. Some have said this is because of the way Facebook caches its content. In any case, you can bypass this lag by using the Facebook Debugger https://developers.facebook.com/tools/debug/ You enter the URL of the page with the buttons, and it tells you what's missing from your code--and at the same time it now recognizes any new additions, like new meta tags.
It turned out I needed meta tags for og:url, og:title, og:image, og:site_name, og:type, and og:description. I also discovered that the og:image tag needs an absolute url.
I found out about a lot of this not from Facebook but from here: http://davidwalsh.name/facebook-meta-tags
The Debugger is now telling me I still need fb:admins and fb:app_id tags. To get those I apparently have to create a Facebook App, which I'd rather not do. I hope it's not necessary.
Now that I've added these meta tags and run my page through the Debugger, I'm now getting the image I want showing in the Share window.
Using the "Share" link of a page does not always show the picture of the page as thumbnail in the Facebook link. For example, linking the page http://www.tekes.fi/tekes/tulokset-ja-vaikutukset/caset/2013/managed-outcomes-tuotantotalouden-logiikkaa-terveyspalveluihin/ to Facebook by using the red "Share" > "Facebook" link at the bottom of the page makes the link show in Facebook so that the picture of the article also shows in the link. However, linking the page http://www.tekes.fi/nyt/blogit-2013/katoavatko-tyopaikat/ in the same way does not show the picture in the Facebook link. The "Share" links in the pages are implemented by using the AddThis Toolbox.
When copying the urls of the above links directly to Facebook, both of the links are shown with pictures in Facebook as they should.
Could you tell us what could cause the problem with the "Share" link? Is there something wrong with the "Share" link implementation? Is there a solution to this problem? We have tried to add a
<meta property="og:image" content="<picture url>" />
tag to the pages with no effect. The Facebook debugger tool (https://developers.facebook.com/tools/debug) tells about both of the pages the same things: that the 'og:image' property should be explicitly provided, even if a value can be inferred from other tags, and that the provided og:image is not big enough and that an other image will be used instead.
Here are some other urls where the picture shows correctly when sharing it to Facebook using the "Share" link:
http://www.tekes.fi/nyt/uutiset-2013/suomen-peliteollisuus-nousi-kahteen-miljardiin/
http://www.tekes.fi/nyt/uutiset-2013/suomalaisyritys-pistaa-kampoihin-pelikonsolijateille/
http://www.tekes.fi/nyt/uutiset-2013/verkosta-vauhtia-liiketoimintaan-ict-ammattilaisten-avulla/
Here are some other urls where the picture does not show correctly when sharing it to Facebook using the "Share" link:
http://www.tekes.fi/nyt/uutiset-2013/yritys-suomen-puhelinpalvelu-tarjoaa-hyvan-kanavan-yrittajille/
http://www.tekes.fi/tekes/tulokset-ja-vaikutukset/caset/2013/lasten-sijoitukset-vahenivat-raisiossa/
The magic begins with using <figure> tag around article image. In this case, sharing works better. For example in Facebook and Google+.
I am adding a FB like button to my page, and currently when I "Like" the page, it only says it on my personal page with a small link to the facebook page associated to my website. I want it to post a picture, description, and the link to my site. I am using the code generated from this page: https://developers.facebook.com/docs/reference/plugins/like/
I debugged it and it says properties are missing even though I have them included in the code...
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.audiblecoffee.com%2Fbeta321432
Any reason on why this isn't working?
<meta property="og:url" content="http://www.audiblecoffee.com">
This will make Facebook use http://www.audiblecoffee.com to look for OG tags, not the submitted URL. Change it to http://www.audiblecoffee.com/beta321432/ (or leave it out) and things'll work fine.