I'm trying to determine the best way to "merge" my orchard blog into my existing website. Currently the blog accessed outside the site.
I threw together a quick view in my MVC site that just loads the blog into an iframe. Any other ideas?
The blog is tuned up with a great theme and tons of mods & styling that matches my main site design to a T.
On the home page of my site, I'm using the RSS feed to output a list of the last 3 blog posts. My idea is that the user will click on a blog post link and go directly the view that hosts the blog in the inline frame.
I guess the only variable that I haven't handled yet is how to load up the correct page in the blog based on the link that the user clicked on my main site home page.
I've read other posts on this subject and it seems like the solution that is always offered is to merge all the code from the main website into Orchard which seems insane...I have a very large auction based website, taking all that logic & content and putting into Orchard is not an option.
Hope all that makes sense, thanks for the input. I can't think it would be a huge issue to "seamless" integrate my blog with my MVC site.
Orchard was never designed to be integrated into an existing application, so something like what you've done is what you have to do. The iframe however has a number of problems, such as its fixed size, and awkward navigation. It's better to integrate data than markup. It's now easy to build WebAPI controllers to expose Orchard data. You could consume that data in your application and render it there. That enables you to manipulate the data before rendering, which is of course easier than manipulating rendered HTML. For example, you can build your own link URLs so that clicking on a post's title goes to an action on your site that fetches the post contents rather than the Orchard post URL.
One final comment: It is a little weird that an auction website would need to integrate a blog in the middle of its own rendering. Shouldn't the blog be a separate section of the site?
I am currently designing a website where there is a facebook like box embedded on it.
The default of facebook looks something like this:
But instead of that look, I want the friend's icons to appear on the same line as the like box similar to this:
Does anyone have any idea to do this one? I tried adding several styles on the css and override the class given by facebook but it won't work.
The like button is generally an iframe so your styles will not affect it. Also as it is on a different domain, I'm not sure if you could even manipulate it by adding your own styling to the tr elements via javascript (setting them to display:table-cell achieves what you want) due to cross domain access issues. Finally I'm not sure if there are platform policies that would also be invalidated by doing this, which could have negative effects on your facebook intergration
When going to the set up pages for all the Social Plugins, they now provide example code using an APP ID.
http://developers.facebook.com/docs/plugins/
Is an APP ID now required for the Like Button and other plugins? What happens if an APP ID is not included when using the plugins?
I've checked the Facebook developer blog and read about the Like Button Migration. I haven't been able to find a straight answer for this either there or in the FB Like Reference.
Notice:
This is an old dated information, the official facebook's behaviors are changed.
Simply, the answer is No, just look at the following official Facebook resource.
Notice: To do it without need to the app id, you have to visit the above page when you are signed out from Facebook. Look at the following screen shot.
As semsem said, the simple answer is "no it is not required"... there are ways to get around having an appId associated with the "like" button. Here's my experience working with this. I'm not a Facebook or Open Graph expert, so YMMV.
Why we avoided using the appId on the button:
We're providing an service where we have one website (the engine, as it were) that provides a service distributing online courses to students (customers). Instructors (also customers) who what to use our service to disseminate courses to students can brand the site how they wish, and map their domain to their section of our website that serves those course(s).
As a simplified example: we serve from http://courses.example.com/instructor_name, but we want students to access the content through http://www.instructors-domain.com/. Any courses would be sub-directories off the base URL.
Associating the "like" button with our Facebook App disallows any cross domain shenanigans. While there are valid reasons for doing so, it doesn't work for where we're at in our company and product evolution. So we needed to find a workaround.
We wanted to allow folks to "like" a course, have the "story" point to the appropriate places on the net, as well as get some customization (e.g. "NAME likes an online course on FBAppName"). We basically achieved this. We lost some functionality which we deemed acceptable at this point in our evolution.
The short of it
I used the iframe version of the Facebook "like" button as dictated by the appropriate Facebook developer's page (for the link see semesm's answer for the link, I got no rep). I took their code snippet and manually removed the appId query string in the iframe's src.
In the "liked" page itself (which was the same page that had the "like" button) I used the Open Graph meta tags including specifying the appId. (These tags were specified: fb:app_id, og:type, og:url, og:site_name, og:title, og:description, og:image.)
The og:type was our custom type of the form 'namespace:app_custom_object_name'.
A failed approach
My first attempt was to use what I understand as the preferred method, the "HTML5" tab in the "Get Code" section of the developer's "like-button" page. I tried their method stripping the appId from the appropriate places. This method proved ineffectual.
If the domain doesn't match that in the Facebook App, there will be no "like" button.
If the domain does match, the "like" button will appear. However, it takes 3 clicks to actually "like" something. The first click changes the "thumbs-up Like" icon to a normal anchor with one word that didn't make obvious sense (I forgot what the word was). The second click will brings up the login/authorization window for using our app. The third actually bring up the modern fancy "like" box where you can type in a comment. I didn't find a way around this behavior.
Note that when I specified the appId in this approach on the appropriate domain, it worked as one would expect (though inconsistent with our desired behavior).
I did not try the other two options in the "Get Code" section of the "like-button" page.
Informed speculation and rumor
In my research around this, my overall impression is that requiring an appId is the way of the future for Facebook. Who knows if the old way will be depreciated, probably never, though I didn't find anything in the docs talking about this "legacy" behavior. This makes sense to me with their newer offerings and the advanced tracking that becomes available with this method.
I've seen suggestions that the "likes" used in this manner are akin to second-class citizens... treated as inferior in some respects. In my own experimentation I found the behavior of the fully specified appId (in the "like" button itself) to be different and more accessible and predictable (in terms of Open Graph queries and visibility on my limited Facebook tests) than the partially specified appId. (Again, I've found no solid documentation on this, and did not endeavor to full grok the differences.)
May this info help someone else along. Good luck!
So, I just tried the sємsєм method, as comments say: Facebook want you to login to get the code, and if you have an app, you have to choose one.
But if you don't, it gives you a code without any app reference.
So when you get a code – no matter any app you choose –, you just need to remove the appId parameter in the .js URL (&appId=##############), and you got (for the latest HTML5 code, 6th line):
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
The code for the div element does not change.
I simply use the URL code inside an iframe tag without an appID and it seams to work,
here is an example:
<iframe src="http://www.facebook.com/plugins/like.php?href=<%=request.original_url%>&width&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=" frameBorder="0" width="150" height="25">
</iframe>
According to Facebook's Social Plugins FAQ
Web: If you are using Social Plugins on the web, you do not need to create a Facebook app for integrating a Social Plugin.
iOS/Android: If you are using Social Plugins within a iOS or Android app, you need to create a Facebook app and tie it to your app identifier.
It seems that the official answer is that they are only required for iOS/Android.
I play some of the games on facebook and I was wondering if there is a way for me to create a simple HTML file with the game in an IFRAME. Ive been tinkering with it and can't seem to get it to display correctly and facebook breaks out of the frame after a bit.
You probably can't. In the end, there is nothing that can stop Facebook (or any site for that matter) from putting this in the top of a JavaScript file that is used on the page:
if (top!=self) {
top.location.replace(document.location);
}
As a matter of fact, that's exactly what StackOverflow does to prevent it's content from being presented in an IFRAME element.
Also, it's very likely that you are violating some sort of Terms of Service, a license, or something of that nature by trying to do that.
Im trying to understand how to learn reading the source of a facebook fan page. So far, I can only get the layout displayed while viewing the source.
Here is an example: If you go here:
http://www.facebook.com/pages/See-oho-nieps-YothG-RRofiLe/106340746065367#!/pages/Milton-Keynes-United-Kingdom/IF-MR-BEAN-WAS-IN-AVATAR-HE-WOULD-LOOK-LIKE-THIS/302690570115
That canvas page requires you to be a fan of the page. This is done with:
content here
My question is, why cant I find the FB:visible code in the source of that page? I would be grateful for any guidance!
I believe it's because the FBML is interpreted server side, so if it output the markup their parser would have to be Javascript based, causing a greater risk to security (?) and slowing the process down entirely.
I'm not too familiar with it though, I must be honest.