You can't achieve your SEO goals with JavaScript (and that of course
includes jQuery).
Search engine crawlers don't run your JavaScript code, so they don't see
anything you add to the page with JavaScript. Instead, they see what you get
if you do a View Source on a page: they'll see your <script> tag itself
instead of the HTML code that you generate in that script.
If SEO juice is a requirement, the only way to get it is to have your
customers' websites run code on their servers that incorporates your HTML
into their pages as they are downloaded. You could provide a web service
that their servers hit while generating their pages. That service would
return your HTML code, which they would then include in their own HTML
output.
This way, your HTML code becomes a direct part of their page as seen by web
crawlers and View Source.
Depending on your customers, though, you will probably find that many of
them are unwilling or unable to write and run code on their own server to
pick up your HTML.
Going back to JavaScript, the way most ad network scripts work is very
simple: they use document.write to insert content into the page at the point
where the <script> tag appears.
Imagine you have a file called mywidget.js with this content:
// - - - - - - - -
// mywidget.js
// - - - - - - - -
document.write(
'<div>',
'<a href="http://www.example.com/";>',
'My Link',
'</a>',
'</div>'
);
// - - - - - - - -
and you include this tag in the body of an HTML page:
<script type="text/javascript" src="mywidget.js">
</script>
Presto! You've made a widget that works like most of the ad networks.
If you want to use any local variables in your script, put the whole thing
inside an anonymous function to avoid polluting your customer page's global
namespace:
// - - - - - - - -
// mywidget.js
// - - - - - - - -
(function() {
var random = Math.random();
document.write(
'<div>',
'<a href="http://www.example.com/";>',
'My Link ', random,
'</a>',
'</div>'
);
})();
// - - - - - - - -
There's one big disadvantage to this approach (besides the lack of SEO): If
your server goes down, your customers' pages will also have problems. They
will stall loading at the point where they have your <script> tag. The
browser will eventually time out and load the rest of their page, but it
will make for some unhappy customers and site visitors.
Also, you definitely shouldn't use jQuery in this type of widget. You can't
guarantee that there won't be conflicts with other code on your customers'
pages.
An iframe avoids both of these problems. Since it's an independent HTML
page, you can use jQuery if you want (although I would still not recommend
it unless you really need it - you really want to keep your page size down
for an iframe widget). And if your server goes down, it won't affect the
rest of your customer's page. There will be a blank spot or an error message
where your content should have been, but at least the entire customer page
won't go down.
The main disadvantage of an iframe widget is that it is fixed size. If you
want your widget height to vary depending on your content, an iframe won't
do it unless you go to some extra work. You'd have to provide a bit of
JavaScript to be pasted into the customer page along with your <iframe> tag
that would do the resizing. Your JavaScript code *inside* the iframe would
communicate back to this host code by changing the hash fragment of the
iframe's URL. The code you provide for the host page would run on an
interval timer, watch for this URL change, and adjust the iframe size. (Note
that this code should be copied and pasted directly into the host page, not
loaded via a .js file, otherwise you're back to the same problem of what
happens if your site goes down.)
Regarding an Ajax request, you couldn't do that anyway: It doesn't work
cross-domain. The page you mentioned uses the well-known JSONP technique,
but all that really boils down to is a <script> tag.
That leads to one last approach: You can provide a complete <script> tag
with code in it (not using src="", but with the actual JavaScript code) and
have your customers copy and paste that into their pages. That code can be
just a small function that uses a dynamic script element (as described in
the page you cited) to load in a .js file containing the rest of your code.
This will avoid the possibility of stalling the customer page if your side
goes down. Note that any document.write calls have to be made in the
original <script> tag, not in the .js file that you load later, since it is
too late to use document.write at that point.
I used this approach for some calendar widgets I wrote when I was at Zvents.
It works very well, although some customers find it intimidating because
instead of giving them a nice simple <script> or <iframe> tag, you're giving
them a whole block of code. Even though it is still just a matter of copying
and pasting the whole thing, it looks more complicated. But it does allow
you to put your HTML code directly into the host page (not in an iframe) so
it resizes cleanly and automatically according to your content.
Too much information? Sorry! :-) With so many different (and imperfect!)
ways to approach the problem, I thought I'd give you a rundown on all of
them. Let me know if any of them look worth pursuing and we can kick it
around some more.
-Mike
> From: mattvick
>
> I'm trying to set up a system similar to Google AdSense that
> allows other websites to display some HTML content from my
> site on theirs. I've looked at the show_ads.js file Google
> uses to display Ads but to be honest I've not found it easy
> to decipher. I've also read that using a <script> tag to
> load a JavaScript file from my site is simpler than trying to
> do do this with an AJAX request. This
> http://www.thefutureoftheweb.com/blog/cross-domain-json-withou
> t-xhr post was helpful, but it discusses returning JSON
> rather than HTML.
>
> Will someone please explain how this can be achieved using
> jQuery? A simple example with code would be really appreciated :-)
>
> BTW I know I could use an iframe to achieve something similar
> but this won't give me the result I need because the content
> coming from my site will contain a link back to my site and I
> want the link to be registered as an inbound link to my site
> for SEO reasons.
>
> Many thanks
