We Keep Coding

Include code from jQuery load() onto page source code [duplicate]

Many aspects of my site are dynamic. I am using jquery.
I have a div which once the DOM is ready is populated using load().
Then if a button is clicked, using load() once again, this value is replaced by another value.
This kind of setup is common across my site. My homepage is essentially lots of dynamically loaded, refreshed, and changeable content.
What are the repercussions of this for SEO?
Ive seen sites where each page is loaded using load() and then displayed using the animation functions... It looks awesome !
People have posed this question before, but noone has answered it properly.
So any ideas? JQUERY AND SEO??
Thanks
EDIT
Very interesting points. I dont want to overdo my site with jaascript.. just where neccesary to make it look good - my homepage however is one place of concern.
So when the DOM is readY, it loads content into a div. On clicking a tab, this content is changed. I.E No JS, No content.
The beauty here for me is that, there is no duplicated code. Is the suggestion here that i should simply 'print' some default content, then have the tabs link to pages (with the same content) if JS is disabled. I.E sacrifice a little duplicate code for SEO?
As far as degrading goes, my only other place of concern is tabs on the same page.. I have 3 divs, all containing content. On this page two divs are hidden until a tab is clicked. I used this method first before i started playing with JS. Would it perhaps be best to load() these tabs, then have the tab buttons link to where the content is pulled from?
Thanks

None of the content loaded via JavaScript will be crawled.
The common and correct approach is to use Progressive Enhancement: all links should be normal <a href="..."> to actual pages so that your site "makes sense" to a search spider; and the click() event overrides the normal functionality with load() so normal users with JavaScript enabled will see the "enhanced" version of your site.

If your content is navigable when JavaScript is turned off, you'll be a good ways toward being visible to search engines.
Note that search engine crawlers won't be submitting any forms on your site, so if you have any or elements that are meant to be navigating between your site's content pages, that content is not navigable by search engines.

Here is a guidelines how to make Google to crawl content loaded with ajax: http://code.google.com/web/ajaxcrawling/docs/getting-started.html

I use jquery load() asynchronous page load. It greatly improves user experience, but not seo-friendly. Here's the only solution I have found so far:
On first load I do not use jquery load() and try to write cookie with javascript.document.cookie = 'checkjs=on';
On next page load if php script finds this cookie it means that javascript is enabled and jquery load() can be used. If there's no such cookie then javascript is off (probably spider came), so jquery load() is not used.
if (!$_COOKIE['checkjs'] || $_COOKIE['checkjs']!='on'){echo 'js is off, hello Google!'; } else {echo 'js is on, can use jquery load';}
This way I can be sure that most of users can benefit from asynchronous page blocks load, exept for the very first load. And spiders get all content too.
In your case you could just load the same page with new parameter that makes another tab active. Spider is gonna be happy.

Using jQuery to Hide/Show Content

I am having a website that basically shows information related to a business house. I do not want to have a multi page website (for about us, contact us and other such pages), but I have a considerable amount of content to be shown.
And I would not prefer to load content again and again through consecutive fetches from the server through AJAX.
So, can I have all my content loaded on the first load itself and have only the required content shown (visible) and hide and show the appropriate content using jQuery. Is it a proper approach that can be adopted ? What are its possible disadvantages ?

What you are asking can be achieved with a Singlepage framework like:
http://alvarotrigo.com/fullPage/ or AngularJS
Pros:
Front-end access to all content immediately
Cons:
Long page load which might result in 404 or slow connection
Dependent on user device. If user doesn't have a current browser then your page might break.
Client might not have JavaScript enabled, breaking your website completely
If there is a lot of data, then the user device might not be able to handle it. JavaScript can be quite taxing on older devices.
EDIT 1
My personal preference for Singlepage solutions is AngularJS, so if you are interested in this i would recommend this tutorial:
scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

About Us
<div id="about-us" class="content">Some content here</div>
<script>
$(document).ready(function(){
$('a').click(function(){
var link = $(this).attr('href');
$('.content').hide();
$(link).show();
});
});
</script>

Problems in implementing Disqus plugin due to jQuery issues

I am working on a blog website at http://d361.azurewebsites.net/Blog. I have used a template for full page flip from http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layou which uses javascript and jquery, other than the obvious.
I have 2 problems.
I need disqus plugin on every article of the blog. But since the whole website is basically one single webpage, I have not been able to implement it. Further anchor tags are not working.
Currently the disqus plugin is working in case of the first article only.
I am also using social sharing buttons on the site. Again, they share only the mail website link, i.e d361.azurewebsites.net/Blog and not the actual articles. I tried to use anchor tags but it is not working.
Kindly help me out here. As you must have already known, I dnt know much beyond html and css.

Disqus won't work with single-page applications out of the box, you have to use our AJAX protocol to reload the thread with the new information. The process is documented here: http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
Whenever the page content is changing, you would call DISQUS.reset like this:
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "new_disqus_identifier";
this.page.url = "http://example.com/#!new-url";
}
});

Dynamic content with JavaScript which allows linking

Let's say I want to create a website that contains one page. All the content is dynamic and generated using JavaScript with DOM replacement. The good thing about this is that it creates a better user experience, especially for applications that contain catalogues (online stores, galleries, etc). The problem now comes with linking. Let's say I'm browsing the site and I feel like sharing that particular thing I'm looking at with someone, but the problem is the link is always the same since it's JavaScript that's doing the magic. So the question comes: how can I create a fully JavaScript run website while maintaining the ability to link?
Now there's hash linking, but I'm failing miserably. I've tried overriding all <a> tags, changing the hash, and preventing the default action like so
$("a").click( function(){
window.location.hash = $(this).attr("id");
processHash();
return false;
});
Yet, it will randomly scroll my body for no reason.
I'd like some insights on the restrictions of linking in a fully dynamic website. Thanks.

Here is one simple thing you can do:
window.onload = function () {
processHash();
}
or it can be using jquery $(function () {...});
what happens here is when the page is loaded example http://www.example.com/#some-link
the page content is loaded first then your function that handle links processHash(); will do its work

not even the new and shiny jQuery mobile library is 100% ajax, but it's close. Obviously with a very modern browser, checkout this doc site done in jQuery mobile: http://jquerymobile.com/test/
If you dig in the docs a little you see how they use hash linking with the framework and html5 data-content="page"
each <div data-content="page">Is an independent page, if I remember right</div>

Editing Facebook Like-Box Css on The FLy?

I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks

The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.