facebook/ConnectGsWithJavascript.html

## ConnectGsWithJavascript.html
<!doctype html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Peanut Butter and Jelly Sandwich</title>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #header {
        background: #fff;
        width: 800px;
        height: 100px;
      }
      #leftcol {
        background: #fff;
        float: left;
        width: 150px;
        height: 500px;
      }
      #content {
        background: #fff;
        float: left;
        width: 650px;
        height: 350px;
      }
      #rightcol {
        background: #fff;
        float: left;
        width: 150px;
        height: 350px;
      }
      #footer {
        background: #fff;
        width: 800px;
        height: 100px;
      }
    </style>
  </head>
  <body>

    <div id="fb-root"></div>
    <script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>

    <div id="header"><h1>Recipes For You!</h1></div>
    <div id="leftcol">
      <br>
        <center>
            <fb:profile-pic uid="loggedinuser" linked="true"></fb:profile-pic>
            <br><br>
            <button onClick="triedIt();">I Tried This!</button>
        </center>
    </div>
    <div id="content">
        <h3>Peanut Butter and Jelly Sandwich</h3>
        2 slices bread<br>
        1 T peanut butter<br>
        1 T jelly<br>
        &nbsp;<br>
        Using knife, spread peanut butter on one slice of bread. Using a clean knife,
        spread jelly on the other slice. Put slices together so that the peanut butter
        and jelly meet. If desired, cut into squares or triangles.
            <center>

               <div>
                 <fb:share-button href="http://apps.facebook.com/example" type="button_count">
                 </fb:share-button>
               </div>

            </center>
    </div>
    <div id="rightcol" align="right">
        <fb:login-button autologoutlink="true" v="2"></fb:login-button>
    </div>
    <div id="footer">
        <div id="friends"></div>
    </div>

    <script>
        FB.init({
            apiKey: 'YOUR_API_KEY',
            status: true
            });
            FB.XFBML.parse();
    </script>

    <script>
    function triedIt(){
      var post = {
        message: 'I tried the Peanut Butter Sandwich recipe.',
        attachment: {
          name: 'Recipes',
          description: (
            'This is the site to go to for great recipes!'
          ),
          href: 'http://www.yoursite.com'
        },
        action_links: [
          {
            text: 'Check Out the Recipes',
            href: 'http://www.yoursite.com'
          },
        ],
        user_prompt_message: 'Share your thoughts about the Peanut Butter Sandwich recipe!'
      };

      FB.publish(
        post,
          function(published_post) {
            if (published_post) {
              alert(
                'The post was successfully published. ' +
                'Post ID: ' + published_post.post_id +
                '. Message: ' + published_post.message
              );
            } else {
              alert('The post was not published.');
            }
          }
      );
    }
    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Peanut Butter and Jelly Sandwich</title>
	<style type="text/css">
	body {
	margin: 0px;
	padding: 0px;
	}
	#header {
	background: #fff;
	width: 800px;
	height: 100px;
	}
	#leftcol {
	background: #fff;
	float: left;
	width: 150px;
	height: 500px;
	}
	#content {
	background: #fff;
	float: left;
	width: 650px;
	height: 350px;
	}
	#rightcol {
	background: #fff;
	float: left;
	width: 150px;
	height: 350px;
	}
	#footer {
	background: #fff;
	width: 800px;
	height: 100px;
	}
	</style>
	</head>
	<body>

	<div id="fb-root"></div>
	<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>

	<div id="header"><h1>Recipes For You!</h1></div>
	<div id="leftcol">
	<br>
	<center>
	<fb:profile-pic uid="loggedinuser" linked="true"></fb:profile-pic>
	<br><br>
	<button onClick="triedIt();">I Tried This!</button>
	</center>
	</div>
	<div id="content">
	<h3>Peanut Butter and Jelly Sandwich</h3>
	2 slices bread<br>
	1 T peanut butter<br>
	1 T jelly<br>
	<br>
	Using knife, spread peanut butter on one slice of bread. Using a clean knife,
	spread jelly on the other slice. Put slices together so that the peanut butter
	and jelly meet. If desired, cut into squares or triangles.
	<center>

	<div>
	<fb:share-button href="http://apps.facebook.com/example" type="button_count">
	</fb:share-button>
	</div>

	</center>
	</div>
	<div id="rightcol" align="right">
	<fb:login-button autologoutlink="true" v="2"></fb:login-button>
	</div>
	<div id="footer">
	<div id="friends"></div>
	</div>

	<script>
	FB.init({
	apiKey: 'YOUR_API_KEY',
	status: true
	});
	FB.XFBML.parse();
	</script>

	<script>
	function triedIt(){
	var post = {
	message: 'I tried the Peanut Butter Sandwich recipe.',
	attachment: {
	name: 'Recipes',
	description: (
	'This is the site to go to for great recipes!'
	),
	href: 'http://www.yoursite.com'
	},
	action_links: [
	{
	text: 'Check Out the Recipes',
	href: 'http://www.yoursite.com'
	},
	],
	user_prompt_message: 'Share your thoughts about the Peanut Butter Sandwich recipe!'
	};

	FB.publish(
	post,
	function(published_post) {
	if (published_post) {
	alert(
	'The post was successfully published. ' +
	'Post ID: ' + published_post.post_id +
	'. Message: ' + published_post.message
	);
	} else {
	alert('The post was not published.');
	}
	}
	);
	}
	</script>

	</body>
	</html>