I am trying to understand what exactly is the difference between fbml and xfbml! Is XFBML same as FBML combined with java script?
FBML is a facebook's propriety mark-up language, and originally all app views were static rendered in just FBML. Developers wanted to make their facebook app views more dynamic though, but they couldn't use javscript in FBML, so facebook created FBJS to allow developers to make their pages dynamic.
Later, they added support for iframe views, which originally were just HTML. Finally, they added support for embedding FBML tags in a regular document using XFBML. So using your analogy above, it's more like HTML + FBML = XFBML.
In any case, both static FBML and FBJS are both being deprecated any will eventually be removed entirely, so it would be a bad idea to use either of them. XFBML can still be rendered using the Facebook Javascript API, so it's not as bad an idea to use XFBML, but still not the best idea. Regular HTMl and javascript combined with the Facebook Javascript API can do everything XFBML can do, and it can do it more cleanly.
No.
FBML is the old markup language which was proxied through Facebook servers and re-written into HTML that was rendered as your app. FBJS is a subset of JS that you could use in FBML pages. It was also proxied and rewritten by the facebook servers. FBML has been deprecated for some time.
XFBML is code that is served directly from your server to end users in an iframe, then processed client-side by Facebook-provided javascript to generate facebook-specific UI elements. It reduces page load time and the CPU load on Facebook's servers because they don't have to proxy and process everything.
Related
I am displaying internationalized strings within a Polymer element as follows:
<div>
<span class="content">{{myContent}}</span>
</div>
... and have the following dart code:
#observable String myContent;
//...
void onUpdateLocale(_locale) {
myContent = getMyContent();
}
//...
getMyContent() => Intl.message('All my content ...', name:'myContent',
desc: 'This is my content',
args: [],
examples: {'None' : 0});
However; when Google crawls the app, it only pulls "{{myContent}}" and not its interpolated value, the actual internationalized content. Is there a way to work around this and make an internationalized Polymer.dart app that is also SEO-friendly?
Its not really clear. Although recently Google announced that they are evaluating Javascript to index the page, I've not seen any deep evaluation of how this compares to the server rendered pages approach.
And then there is the issue of non Google search engines like Bing.
Polymer as it stands today doesn't really do server side rendering and as far as I can tell the team doesn't have plans to offer than in the near future.
If your project/business depends on SEO I would not risk using polymer.
You have two options to address this issue:
Use phantom.js to render the page on server side whenever a crawler is requesting the page.
Use a third party service like ajaxsnapshots.
Forget polymer and use react.js component framework. React has a way to render the virtual DOM on the server side. This will work seamlessly if you are using node.js frameworks. It should be possible with JVM frameworks as well as Java 6+ ships with a Javascript engine (vastly improved in Java 8. Google "nashhorn").
Google have a spec that lets you serve snapshots of your page's HTML after all necessary Javascript (or Dart) has run to search engines: https://developers.google.com/webmasters/ajax-crawling/
The basic idea is to render the pages on the server side and then follow a set of URL conventions that lets you serve search engines the pre-generated HTML in a way that they wont confuse with cloaking.
Google, Bing, Yandex and some social bots support this spec.
You can implement this spec yourself or use a service that does it for you (I work for one of these: https://ajaxsnapshots.com) The solution is typically plugged in at web server level so you don't need to make any changes to your app.
So, I don't know much about Polymer, aside from the documentation on databinding I just viewed. It seems fairly similar to AngularJS by Google, in that it is using JavaScript in a declarative way to render data into an HTML document. That being the case, the browser is still fundamentally seeing the underlying calls to {{something}} as just a raw string. The JS libraries are then what change that data into text on the screen.
That being the case, you might consider handling SEO like Angular developers do. Here is the definitive resource on the subject: http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
Non-SPA AJAX Partials for SEO
Sadly, 101% of the Angular SEO examples assume the use of a singe-page-application (SPA). My app is not a SPA. Currently, my stack is:
Node/Express - for routing and rendering Jade templates. The URLs are real, and don't use HTML pushstate, hash-bang or anything similar. for this reason, url-escaped-fragment won't work for me (I don't think)
Angular for communicating with my RESTful API(s)
My problem is that my page itself only includes pieces that are loaded via AJAX—the rest of page is rendered server side. Node/Express is not responsible for any of this logic, Angular pulls in the data that will be in my first h1.
Google Bot and similar see: <h1>{{this_unrendered_string}}</h1> which is no good.
Has anyone come up with any clever solutions for working around this scenario?
FWIW I found a service called SEO.js that will host a rendered version of any page I pass to it. If I could just tell GoogleBot and similar "Hey, don't use this page, use this page instead" But I'm not entirely sure how SEO feels about a different host serving content. Maybe some trickery could work here..
Google have documented an approach to "Making AJAX Applications Crawlable" here. https://developers.google.com/webmasters/ajax-crawling/
Implementing this isn't completely simple (basically you have to run a headless browser and return the HTML snapshots in response to specially formatted requests by Google).
It's not a simple as just returning a snapshot when you detect GoogleBot, but doing it this way probably eliminates any risk of being penalized.
There are a few companies that offer this a service - I'm getting on well with this one: https://ajaxsnapshots.com - they say that Bing and Yandex (Russian search engine) support it too.
AjaxSnapshots have an API you can use to tell them when your page is ready to snapshot - you could call that after all of your client side rendering is done.
We make use of ajax in our Django web app pretty extensively. It's not a one page design but in most cases we just serve a HTML skeleton with Django's build in template engine and load most of the content with JavaScript async.
I read this article by google "Making AJAX Applications Crawlable". They suggest creating HTML snapshots for better search engine visibility.
We are using the django-rest-framework and Mustache for templates.
Is there a straight forward way to generate static html pages (HTML snapshots) with this setup?
I'd suggest looking into Selenium. You can use it to generate your page in the context of a browser (e.g., including things like Ajax). It's designed to be a testing tool, but that shouldn't matter.
We ended up writing a custom jquery library called pjaxr inspired by pjax. Find more about it here:
https://github.com/iekadou/django-pjaxr
We also wrote a Django specific implementation:
https://github.com/iekadou/django-pjaxr
Pjaxr uses pushState which is seo friendly. For browsers that don't support pushState pjaxr fully degrades to normal static html.
I have been looking at Hulu's new website and I am very impressed from a developer's standpoint (as well as a designer's).
I have found that, unless you switch between http/https, you are served content entirely from json requests. That is a HUGE feat to have this level of ajax while maintaining browse back button support as well as allowing each url to be visited directly.
I want to create a website like this as a learning experience. Is there any type of framework out there that can give me this kind of support?
I was thinking I could...
leverage jQuery
use clientside MVVM frameworks like KnockoutJS?
use ASP.NET MVC content negotiation to serve html or json determined by an accept header.
using the same codebase.
use the same template for client side and server side rendering
provide ways to update pagetitle/meta tags/etc.
Ajax forms/widgets/etc would still be used, by I am thinking about page level ajax using json and client side templates.
What do you think? Any frameworks out there? Any patterns I could follow?
It is always best to first build a website without AJAX support, then add AJAX on top of that. Doing this means that:
users without javascript can already access your website
users can already visit any URL directly.
Adding AJAX support can be accomplished by various javascript libraries. So that you can render json content, you will want to look at javascript templating. You will want to use javascript templating even on your server side for when you add AJAX support (file extension .ejs). This will probably require some appropriate libraries to run javascript on the server.
When you add AJAX support, you will want to use the "History.js" library for browser back/forward/history support.
Make no mistake. This is a HUGE project (unless your website only has a few pages). So it is going to take a LONG time to add all the AJAX support to the best possible standard.
to answer your bullet point about using the same template server side as well as client side: check outdust. It was originally developed by akdubya, but has since been adopted and enhanced by linkedin. They use it to render templates on their mobile app client side. Personally I've used it on the server side and it works great.
I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).
I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.
Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?
They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).
Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.
Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.
Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).
jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.
http://api.jquery.com/
http://docs.jquery.com/Ajax
You don't need iFrames and you don't need AJAX. It's really, really simple!
You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.
We do this all the time with media stored on separate sites. Here's an example.
YOUR SERVER: file.php (which outputs js)
<script>
document.write("I'm on a remote server");
</script>
OTHER SITE:
<script src='http://www.yourserver.com/file.php'></script>
And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.
I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
The example uses jQuery, but you can use it standalone as well.