How does social plugin work? - javascript

Introduction
I am planning to create a widget much like, Facebook provides for likes, share etc. Basically the requirement is:
The client will include JavaScript provided by us.
The client can, now, put our widgets in the page having the JS. The widget placeholder looks like <nw:fav id="911"/>.
When page gets loaded, the JavaScript replaces the placeholders with actual HTML. The JavaScript also keeps this DIV updated with dynamic (perhaps using long polling) content.
Problem
I am not sure how to do step #2.
How JavaScript will get all the <nw:... tags and all the attributes of it?
How to replace the tag with real HTML tag?
Constraints
I am trying to avoid JQuery or any other JS library, since we may cause conflict if the client is also using JQuery, may be some other version.
I don't really want to use IFrame.
I am looking for approaches. Open for suggestions.

The facebook connect JS SDK is open source. You might find the xfbml.js file useful. See this link.
Basically when the document loads, the code walks the dom looking for elements that have a specific namespace (FB uses fb, you appear to want to use nw). Find those elements and then replace them with whatever content you need.

Related

Contact Form Widget, to make it use by another website

I have to create a Contact Form widget — a block of code that users can paste into any site(And i want it to use by my client websites) that will contain a small form, I read so many blogs and code I come up with the answer that Vanilla Js is best for my requirement, I want some refrence or blog or code to make it possible.
I have plenty of ideas for how to do this, but I'm curious to know if there's any generally-accepted method for including the styles, JavaScript, etc. The best I can come up with now is a block that fetches all the necessary styles and tags from an external URL.
This is a broad subject and the solution will depend on how much integration or isolation you'll want with the host page. If you want your contact form to always look the same, an iframe is indeed the right solution but has limitations. Popups from your form won't be able to escape the iframe. Vertical sizing can be an issue, you may want to look into Pym.js to deal with this.
Note that this doesn't mean you need to provide client websites with the HTML code for the iframe. You can just give them a script tag which points to a JavaScript program that is in charge of building the iframe.
If you want the form to integrate seamlessly with the client site, inheriting styles, then your script will need to inject your form into the page, either using the DOM API or using innerHTML. Then it will take some trial and error to figure what CSS properties you'll want to enforce and what can be inherited from the host page. You'll need to namespace your CSS classes and work with CSS specificity. It's not always simple and never completely bulletproof, so if you can stick with an iframe you'll be safer.
In both cases, in order to know where to inject your form, you can use the script tag itself as a reference, for instance by giving it a unique data attribute that your script will use to find its own script tag and insert the form below or underneath it.
For a complete coverage of the subject, I can highly recommend the book Third-Party JavaScript from Manning.

Embedded Javascript

I intend to create an HTML report from a perl script on Linux/Unix side. The report contains various statistics mainly in the tabular format. Since there are many such tables I want to split them into categories using Tabs. The report then will be sent to some email-ids, as an attachment.
The questions are:
Is there a good example of HTML + Javascript to create such tabs? I could not find a complete example
Libraries like jQuery fits the bill except that I need to give the .js file as well, which becomes a bit tedious. Is it possible to somehow embed jQuery (or any other library) in HTML?
Thanks in Advance!
I hope this answers your questions
Use jQuery UI which is an extension of jQuery library, Or you can use ExtJS
and there are lots of UI library depending on how much you want.
Why does giving JS file become tedious ? use script tags to call the external JS files to use these libraries. Embedding JS in your HTML will clutter it and its a BAD practice.
Checkout
jquery's tab example :
http://jqueryui.com/demos/tabs/
ExtJS tab example : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tabs/tabs.html
EDIT:
If you are planning to use JS in emails, forget it. A lot of email clients remove JS content.
Instead
Share a google spreadsheet link with email
Generate a PDF that has the report, there are a lot of libraries that convert HTML to pdf , use them and convert an HTML table to PDF.
Take a teaser approach to this one where its a hybrid of INLINE html + actual links to go to real content.
Just take a screenshot of the real tabs and place as the header image in your email
Below the tabs image, place only the first page of the tab content
Upon clicking the tabs in the email it takes them to the actual page
The URL can be tokenized and be HTTPS so it will be somewhat secure to view via link
The real tabs can use jQuery UI as others have suggested.

Embedding content - Use iFrame, JS/jQuery, or what?

This gets somewhat complex, so first, a little background:
We're redesigning a video platform that we use across internal applications and our customers use as well for video delivery. The goal is for our customers to be able to embed stuff easily to put it on their own sites, as you would expect. Thus far, we've given a one-line script tag to do this, like so, which drops a player on a page:
<script src="http://vod.nimbushd.com/player/player.ashx?mediaItemAssetId=8413adeb-6b15-4606-a771-637527539093&h=480&w=720" type="text/javascript"></script>
Sample Page with the script above
This is just an ASP.NET handler that returns some Javascript, which, in turn renders some HTML for the player.
That works well enough for a player, but now on to the redesign.
We're now targeting different players for different browser types, HTML5 fallback in the absence of Silverlight, and some other bells/whistles. One of our big feature requests is to be able to serve up a player with add'l video gallery, Disqus comments, Twitter/Facebook share/like buttons; basically, regardless of the philosophy that these are things that should live natively on the customer site, we need to be able to design more complex features and serve them up the easiest embed-style possible.
I guess one school of thought is that we almost need an iFrame that behaves like embedded content (no scrollbars, sizing, and so on).
We're tossing around ideas like more complex Javascript-rendering HTML that could get impossible to maintain pretty quickly, whether advanced features should just be Rich content (Silverlight/Flash), or if there's some in-between like a jQuery partial page refresh or something.
Hoping to learn from some folks who have already gone down this road - as an end-user, how would you expect to embed content, and as a content provider, how do you serve that content in embeddable form?
Personally I would prefer a one line script to include for this
<script src="..." type="text/javascript"
data-container="someId"
data-otherParam="..."
data-beforeLoad="someFunction"
...
></script>
Passing all the configuration options in as html5 data attributes would be the most convenient. It would also be great if we can pass in a function name that you would call to give the end-user even more control where necessary.
As for what your actual code does. I would recommend you have the script do all your logic and have it make JSONP calls to a webservice to get any data it needs. As for the HTML rendering I recommend you use any templating engine and reference a templating file directly loading them from your server either directly or over JSONP if neccesary.
As for embedding your actual data/html pick a <div> or create a new one and render partial templates to the children of that <div>.
Alternatively you go down the easy route and just ask the user to embed an <iframe>. This solution isn't as nice.

Web Development Best Practices - How to Support Javascript Disabled

What is the best thing to do when a user doesn't have JavaScript enabled? What is the best way to deliver content to that kind of user? What is the best way to keep a site readable by search engines?
I can think of two ways to achieve this, but do not know what is better (or if a 3rd option is better):
Rely on the meta-refresh tag to redirect users to a non-javascript version of site. Wrap the meta-refresh tag in a noscript tag so it will be ignored by those with javascript.
Rely on an iframe tag located within the body tag to deliver a non-javascript version of site. Wrap the iframe tag in a a noscript tag so it will be ignored by those with javascript.
I would also appreciate high-profile examples of the correct or incorrect way to do this.
--------- ADDITION TO QUESTION -----------
Here is an example of what I have done in the past to address this: http://photocontest.highpoint.edu/
I want to make sure there aren't better ways to do this.
You are talking about graceful degradation: Designing and making the site to work with javascript, then making the site still work with javascript turned off. The easiest thing to do is include the html "noscript" tag somewhere near the top of your page that gives a message saying that the site REQUIRES javascript or things won't work right. SO is a perfect example of this. Most of the buttons at the top of the screen run via javascript. Turn it off and you get a nice red banner and the drop down js effects are gone.
I prefer progressive enhancement development. Get the site working in it's entirety without javascript / flash / css3 / whatever, THEN enhance it bit by bit (still include the noscript tag) to improve the user experience. This ensures you have a fully working, readable website regardless if you're a disabled user with a screen reader or search engine, whilst providing a good user experience for users with newer browsers.
Bottom line: for any dynamically generated content (for example page elements generated via AJAX) there has to be a static page alternative where this content must be available via a standard link. If you are using javascript for tabbed content, then show all the content in a way that is consistent with the rest of the webpage.
An example is http://www.bbc.co.uk/news/ Turn off javascript and you have a full page of written content, pictures, links etc. Turn on javascript and you get scrolling news stories, tabbed content, scrolling pictures and so on.
I'm going to be naughty and post links to wikipedia:
Progressive Enhancement
Graceful Degredation
You have another option, just load the same page but make it work for noscript users (progressive enhancement/gracefull degradation).
A simple example:
You want to load content into a div with ajax, make an <a> tag linking to the full page with the new content (noscript behavior) and bind the <a> tag with jQuery to intercept clicks and load with ajax (script behavior).
$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});
I'm not entirely sure if Progressive Enhancement is considered to be best practice these days but it's the approach I personally favour. In this case you write your server side code so that it functions like a standard web 1.0 web app (no JavaScript) to provide at least enough functionality for the system to work without JavaScript. You then start layering JavaScript functionality on top of this to make the system more user friendly. If done properly you should end up with a web app that at least provides enough functionality to be useful for non-JavaScript users.
A related process is known as Graceful Degradation, which works in a similar way but starts with the assumption that a user has JavaScript enabled and build in workarounds for cases where they don/t. This has a drawback, however, in that if you overlook something you can leave a non-JavaScript user without a fallback.
Progressive Enhancement example for a search page: Build your search page so that it normally just returns a HTML page of search results, but also add a flag that can be set via GET that when set, it returns XML or JSON instead. On the search page, include a script that does an AJAX request to the search page with the flag appended onto the query string and then replaces the main content of the page with the result of the AJAX call. JavaScript users get the benefit of AJAX but those without JavaScript still get a workable search page.
http://en.wikipedia.org/wiki/Progressive_enhancement
If your application must have javascript to function then there's nothing you can do except show them a polite message in a noscript tag.
Otherwise, you should be thinking the other way around.
Build your site without JS
Give awesome user experience and make it full functional
Add JS and make the UX even more functional. Layer the JS on top.
So if the user doesn't have JS, your site will still revert to step two of your site state.
As for crawling. If your site depends on AJAX and a lot of JS to work, you can make gogole aware of it : http://code.google.com/web/ajaxcrawling/docs/getting-started.html
One quick tip that may help you: just install lynx, a command-line web browser, and you'll immediately see how google and other seo see your site (and blind people too). This is very useful. Of course, in a command line windows, there's no graphics and javascript is disabled.
If you're doing "serious" Ajax (e.g. client side-routing) the following technique could be useful:
Use Urls without GET/"?"-parameters (it makes your life easier later on)
Use http://baseurl.com/#!/path/to/resource for client side-routing
Implement rendering of non-script HTML-version of your site (HTML snapshot is what Google calls it) at http://baseurl.com/path/to/resource
Wrap the whole content of your HTML snapshot in noscript-tags and redirect via top.location.href to the full version of the site
Handle http://baseurl.com/?_escaped_fragment=/path/to/resource - it should redirect via 301-response to http://baseurl.com/path/to/resource
Use a-tags only for GET-links, use forms for POST/PUT/DELETE-links - unstyle the hell out of them if necessary
A nice example code for links I found while researching "How to write proper Ajax-code":
Resource
This is of course a pretty complex solution but it should enable both SEO (including non-search engine crawlers) and accessibility. The problem is that you have to be able to render your page server- AND client side.
One solution could be to use a templating framework like mustache where implementations for different platforms exist.
Use something like {{#pagelet}}/path/to/partial{{/pagelet}} for dynamic parts of your page - example: {{#pagelet}}/image/{{image_id}}/preview{{/pagelet}}
In your client-side rendering, pagelet would be implemented to be dynamically replaced with something loaded via Ajax (for example: render )
In your server-side rendering, pagelet would just be rendered directly (in doubt just curl the pagelet and render it right away - or if you can write the code asynchronously do it just as you would do it client side: write some temporary span into a buffer, start fetching all the pagelets, replace the temporary spans as the pagelets arrive and flush the buffer once all pagelets have been rendered.
That's the best general design I found so far. You can deep link into your app, it's search engine friendly and it should force you to build a page that gracefully degrades.
P.S.: One advantage of the techniques described above is that both the Ajax- and the "Web 1.0"-rendering of a page could profit from memcached-caching of whole pagelets.
I would prefer to code the page without javascript and then if javascript is enabled, we redirect users to a similar page with javascript. (same concept as progressive enhancement)
redirecting with javascript

SEO friendly javascript and CSS links?

Is it possible to have a navigation system optimized using javascript, but for the sake of search engines, have the hyperlinks still be crawlable?
Or maybe a condition statement that calls HTML code only if javascript is not enabled in the browser or when crawled by a search engine?
What you are describing would be characterized by unobtrusive javascript.
see; http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
You write your html in the most semantic SEO friendly way possible for search engines and users with javascript turned off, then add your script separately to add your bells and whistles.
A framework such as jQuery is often useful.
For example;
About
could be given another function via an external javascript file containing;
$("#about").click( function() {
//fancy code here
return false;
});
which would stop the user being taken to /about and execute the given javascript instead.
Essentially this is the inverse of your suggestion; rather javascript is only used if it's available to enhance the existing html.
Sure. In addition to being SEO-friendly, this approach is also far more accessible to handicapped users; if you work or may someday work in government or higher education you need to know about accessibility, though in fact everyone should be keeping this issue in mind.
Google "progressive enhancement" for more information; here's a good article.
Basically you want to create your site as if it were using normal link navigation, and then add javascript event handlers to hijack the clicks that would normally trigger navigation.
It's not easy to trigger an event if javascript is disabled because to run anything client-side you use javascript. What I do for my sites is to use static html links, and then use javascript to change what occurs when these links are pressed.
This way you can have a link somewhere, that is still crawlable and works fine if javascript is disabled, but if javascript is enabled use an AJAX method to reload parts of the page.
The suckerfish for example, are drop down menus based on nested HTML lists, turned into horizontal menus. It looks nice and clean and has fully crawlable links. Generally, it's better to generate HTML and then use progressive enhancement to turn the HTML into something nice via JavaScript.
On the other hand, if you generate the JavaScript navigation, for example as a JSON object, the it should be easy to generate an XML sitemap for Google.
What do you mean by "optimized"? Optimized for speed because your navigation tree is huge and would generate unnecessary HTML traffic? Then you should generate the navigation via JavaScript and Ajax calls to keep load times down and serve a sitemap to the search engines. If you mean "pretty" then use progressive enhancement.
Basically the main thing would be to add real urls in your href tags, and an onclick even handler to cancel the default.

Categories