Page navigation and update url with ajax

first of all, i'd like to say i'm still learning ajax/jquery so, sorry if any stupid mistake.

Ok, so, i was looking all around the internet to try to find a solution to what i'm trying to do. I found something here, something there but i'm struggling to put everything together. Here we go.

---

Objective

I want to create a website using ajax navigation. When i click on a menu, only the content div will update. Also i want the url to update, so if any user want to share that page, it will be possible. Also the possibility to go back and forward (this i think will be automatic added when using the url update).

---

What i have

I did the website and already have the ajax navigation. I also i have a active link working. The navigation is working fine. This is the code i'm using:

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a"),
        firstLoad = firstLink.attr("href"),
        navLink = $(".navbar li a");
    content.load(firstLoad); //default load
    navLink.on("click", function(event){
        event.preventDefault();
        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(this.href, function () {
            FB.XFBML.parse(); //update facebook page plugin in each page laod
        });
    });
});

And this is my navigation bar:

[...rest of code...]
<nav class="navbar">
    <div class="container">
        <ul>
            <li><a class="active" href="content/home.php">Inicio</a></li>
            <li><a href="content/servicos.php">Serviços</a></li>
            <li><a href="content/advogados.php">Advogados</a></li>
            <li><a href="content/escritorio.php">Escritório</a></li>
            <li><a href="content/noticias.php">Notícias</a></li>
            <li><a href="content/contato.php">Contato</a></li>
        </ul>
    </div>
</nav>

<div id="site"></div>
[...rest of code...]

---

The Problem

At the momment, i have 2 main problems, which are:

1. Update the URL;


2. When share a link, it loads only the content;

1- I was trying to use history.js to do it and kind of did. But everytime i click on a link, it will duplicate the code. For example, i have a url http://ift.tt/1yDlI19 and i click on the contact page, the url will be: http://ift.tt/1yDlI1b and next will be http://ift.tt/1CZ6HSHand so on..

2- When i was trying the URL update i tried to share a link, for example, http://ift.tt/1CZ6K0J but when i opened the new page i only got the about part of code. No header, menu, footer and other things.

---

What i tried

I was looking this topic and got the same problems i had before. Even with the modifications.

This is the jquery code i was using when following that topic:

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a"),
        firstLoad = firstLink.attr("href"),
        navLink = $(".navbar li a");

    content.load(firstLoad); //default load

    navLink.on("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        var newLink = $(this).attr("href");

         History.pushState(null, newLink, newLink);

        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(newLink, function () {
            FB.XFBML.parse();
        });

    });

    History.Adapter.bind(window, "statechange", function() {
        $(".active").removeClass("active");
        $("a[href='" + History.getState().title + "']").addClass("active");
        content.load(document.location.href); 
    });
});

---

So, does anyone knows what i'm doing wrong? Is there a best way to achieve what i want? Or how to do it?

Hope someone can help me. Thanks!