tylerpearson/fbui.js

## fbui.js
/*
* FB SETTINGS
*/

window.fbAsyncInit = function() {

  // 1. Get a unique appId for the website from https://developers.facebook.com/apps
  //    The title will be visible in the post, so make it the name of the site (e.g. Taco Truck for Congress)
  // 2. In "Settings", click "+ Add Platform", select "Website", and add the site URL (localhost is cool initially too)
  // 3. In "App Details", things like the icon can be customized

  FB.init({
    appId      : '714980641876042',
    status     : true,
    xfbml      : true
  });
};

(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "https://connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));


/*
* FB.UI SHARE EXAMPLE
*/

(function($) {

    // cache the selectors
    // this example assumes there is only one box on a page
    var $fbShareTextarea = $('.js-fb-share-text'),
        $fbShareBtn = $('.js-fb-share-btn');


    $fbShareBtn.on('click', function(e) {
        e.preventDefault();

        // grab the content from the textarea
        var statusText = $fbShareTextarea.val();

        // Our settings for FB share dialog box
        // Read more on what these settings mean at https://developers.facebook.com/docs/reference/dialogs/feed/
        var settings = {
                method: "feed",
                name: statusText, // this will be generally truncated at 80 characters
                link: "http://www.newmediacampaigns.com",
                picture: "http://files.www.newmediacampaigns.com/ruby-capitol.jpg", // This should be at least 200px by 200px. Probably makes sense to use the default OG image
                //caption: "I'm a custom caption", // leave this blank to pull in the domain, otherwise it can be customized
                //description: "I'm a custom description",  // leaving this blank pulls in the og:description tag
                actions: [{name: "Add your own endorsement", "link": "http://www.newmediacampaigns.com"}] // use this to encourage the user's friends to take action
            };

        // FB will generally truncate the name at 80 characters, so if the user's message is longer we will
        // swap the name to a shorter default setting and post the textarea message content in the description area
        if (statusText.length >= 80) {
            settings.name = "I support John Doe";
            settings.description = statusText;
        }

        FB.ui(settings,
            function(response) {
                if (response && response.post_id) {
                    // There will be a response.post_id if the person actually publishes
                    // We could trigger an event to Google Analytics or similar if we wanted to keep track of # of shares
                    // alert('Post was published.')
                } else {
                    // They clicked and opened the dialog box, but did not publish it
                    // alert('Post was not published.');
                }
            }
        );

    });


}(jQuery));

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>FB.ui share demo</title>

  <style>
      * {
          box-sizing: border-box;
      }

      .wrap {
          width: 500px;
          margin: 100px auto;
      }

      textarea {
          width: 100%;
          height: 50px;
          border: solid 2px #ccc;
          margin-bottom: 10px;
          font-size:18px;
          padding: 10px;
          display: block;
          font-family: "helvetica neue", helvetica, sans-serif;
      }

      button {
          float: right;
      }
  </style>
</head>
<body>


    <div class="wrap">
        <textarea class="js-fb-share-text">I'm a textarea with a sample status for FB</textarea>
        <button class="js-fb-share-btn">Share on Facebook</button>
    </div>


    <div id="fb-root"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="fb-ui-share.js"></script>

</body>
</html>
	/*
	* FB SETTINGS
	*/

	window.fbAsyncInit = function() {

	// 1. Get a unique appId for the website from https://developers.facebook.com/apps
	// The title will be visible in the post, so make it the name of the site (e.g. Taco Truck for Congress)
	// 2. In "Settings", click "+ Add Platform", select "Website", and add the site URL (localhost is cool initially too)
	// 3. In "App Details", things like the icon can be customized

	FB.init({
	appId : '714980641876042',
	status : true,
	xfbml : true
	});
	};

	(function(d, s, id){
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement(s); js.id = id;
	js.src = "https://connect.facebook.net/en_US/all.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));





	/*
	* FB.UI SHARE EXAMPLE
	*/

	(function($) {

	// cache the selectors
	// this example assumes there is only one box on a page
	var $fbShareTextarea = $('.js-fb-share-text'),
	$fbShareBtn = $('.js-fb-share-btn');


	$fbShareBtn.on('click', function(e) {
	e.preventDefault();

	// grab the content from the textarea
	var statusText = $fbShareTextarea.val();

	// Our settings for FB share dialog box
	// Read more on what these settings mean at https://developers.facebook.com/docs/reference/dialogs/feed/
	var settings = {
	method: "feed",
	name: statusText, // this will be generally truncated at 80 characters
	link: "http://www.newmediacampaigns.com",
	picture: "http://files.www.newmediacampaigns.com/ruby-capitol.jpg", // This should be at least 200px by 200px. Probably makes sense to use the default OG image
	//caption: "I'm a custom caption", // leave this blank to pull in the domain, otherwise it can be customized
	//description: "I'm a custom description", // leaving this blank pulls in the og:description tag
	actions: [{name: "Add your own endorsement", "link": "http://www.newmediacampaigns.com"}] // use this to encourage the user's friends to take action
	};

	// FB will generally truncate the name at 80 characters, so if the user's message is longer we will
	// swap the name to a shorter default setting and post the textarea message content in the description area
	if (statusText.length >= 80) {
	settings.name = "I support John Doe";
	settings.description = statusText;
	}

	FB.ui(settings,
	function(response) {
	if (response && response.post_id) {
	// There will be a response.post_id if the person actually publishes
	// We could trigger an event to Google Analytics or similar if we wanted to keep track of # of shares
	// alert('Post was published.')
	} else {
	// They clicked and opened the dialog box, but did not publish it
	// alert('Post was not published.');
	}
	}
	);

	});


	}(jQuery));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>FB.ui share demo</title>

	<style>
	* {
	box-sizing: border-box;
	}

	.wrap {
	width: 500px;
	margin: 100px auto;
	}

	textarea {
	width: 100%;
	height: 50px;
	border: solid 2px #ccc;
	margin-bottom: 10px;
	font-size:18px;
	padding: 10px;
	display: block;
	font-family: "helvetica neue", helvetica, sans-serif;
	}

	button {
	float: right;
	}
	</style>
	</head>
	<body>


	<div class="wrap">
	<textarea class="js-fb-share-text">I'm a textarea with a sample status for FB</textarea>
	<button class="js-fb-share-btn">Share on Facebook</button>
	</div>



	<div id="fb-root"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="fb-ui-share.js"></script>

	</body>
	</html>