I have looked around quite a bit on this and spent significant time trying many different things. These threads are a little dated and in some cases supply many different options.
Facebook App: localhost no longer works as app domain
Facebook like/share current URL
Testing Facebook Share Dialog with localhost - "Unable to resolve object at URL http://localhost"
Everything has pieces, but I an unable to put them together or am missing something. I am hoping someone can help clarify/identify for me. It is greatly appreciated.
Can you "really" and "actually" debug the Facebook jsSDK on "localhost" for development of the different social plugins??? (The ones only included with the SDK) https://developers.facebook.com/docs/plugins I am NOT using, nor want to use OpenGraph.
If YES, to 1. Then do you need to use a Test-App for your FB App?
I have the OWIN/OAuth dialed! and get the externalLogin info and SetAuthCookie just fine. I am also able to initiate the Facebook jsSDK and render the fb-like iFrame just fine. Here is where all my problems are: details and set-up as follows:
With Like, it flashes very fast some other iFrame. It appears to be the "You liked:..." dialog/confirm form. Then I get a confirm dialog.
After that the Like link in the like/share plugin changes to an "error" link.
If I click that I get the dreaded (could not resolve object at "http://localhost/."):
Finally with the share button I just get this this: Error, we are working on it.
So with the basics from the FB Developer examples I am using og: meta tags even though I am not using OpenGraph.
But with MVC you have only ONE (1) URL!!! And use controller and routes to manage all calls. So how would I share/like, some some specific content in my site and still use a canonical URL?
I am using JQUERY to set the og:meta tag and the "data-href" in the fb-like iFrame. I just don't think FaceBook likes the MVC url's I am sending it, or I don't have something set-up right?!?
Header:
<meta property="og:url" content="http://localhost:6999" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Swartling Family Archive" />
<meta property="og:description" content="Swartling Family Archive" />
<meta property="og:image" content="" />
sdk init:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<removed>',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
JQuery to modify og tags and data-href on the fly. In this case when I load an image into a container. per the docs you are supposed to set them the to the same value. (this is a little messy and need to clean it up):
viewModel.friendlyname(data.ImageFriendlyName);
// deal with FB meta requirements
var baseurl = $(location).attr('host');
var ogurl = 'http://' + baseurl + data.ImageMainPage;
var thumburl = 'http://' + baseurl + '/thumbnailview/120/120?' + data.ImageMainPage;
// set fb href if its there, global for now
var widgetFB = $('div#btnsfb');
if(widgetFB != null){
widgetFB.attr('data-href', ogurl);
}
//set meta tags
$('meta[property="og:url"]').attr("content", ogurl);
$('meta[property="og:image"]').attr("content", thumburl);
ogurl would look something like:
http://localhost:<port>/image?imagevpath=SwartlingFamilyCom%2fEric+Swartling%2ftickets_002.JPG"
and thumburl would look something like this:
http://localhost:<port>//thumbnailview/120/120??imagevpath=SwartlingFamilyCom%2fEric+Swartling%2ftickets_002.JPG"
So, hopefully that gives the picture. Not sure you can provide a canonical URL. If so does this mean that in an MVC app you can only like/share the site? And not any of its particular content? This would be a bummer.
Thanks again for your time in reading and response. You times is much appreciated. If I did not provide any necessary details, please
Cheers
