Facebook & Twitter Share Customized Text

I wanted to allow users to easily share content that they had input into a page onto Facebook and Twitter. Good news and bad news: It's pretty easy to set up the Tweet, but Facebook won't allow you to prepopulate a status message. The best you can do there is share your URL.

To kick things off, I created this example:

What is your favorite color?


As you can see, it's nothing fancy. Here's the code behind it:

1.   <p>What is your favorite color?<br>
2.   <input type="text" id="favcolor" class="text"></p>
4.   <p><input type="button" class="button" value="Tweet" onclick="startshare('twitter');">&nbsp;&nbsp;<input type="button" class="button" value="Share" onclick="startshare('facebook');"></p>
6.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
7.   <script type="text/javascript">
8.   function startshare(platform) {
9.   	var url = 'https://inkplant.com/code/facebook-twitter-share';
10.  	if (platform == 'facebook') {
11.  		var facebook_app_id = 1527787694104061; //replace this with your app ID
12.  		sharefacebook(url,facebook_app_id);
13.  	} else if (platform == 'twitter') {
14.  		var message = 'My favorite color is ' + $('#favcolor').val() + '. ' + url;
15.  		sharetwitter(url,message);
16.  	} else {
17.  		alert('Invalid social share platform.');
18.  	}
19.  }
21.  function sharetwitter(url,message) {
22.  	var shareurl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(message) + '&url= ' + encodeURIComponent(url);
23.  	sharecore(shareurl);
24.  }
26.  function sharefacebook(url,facebook_app_id) {
27.  	var shareurl = 'https://www.facebook.com/dialog/share?app_id=' + facebook_app_id + '&display=page&href=' + encodeURIComponent(url) + '&redirect_uri=' + encodeURIComponent(url);
28.  	sharecore(shareurl);
29.  }
31.  function sharecore(shareurl) {
32.  	var newpage = window.open(shareurl,'_blank');
33.  	if (newpage) { newpage.focus(); } // new window opened successfully
34.  	else { window.location = shareurl; } // browser blocked the new window, so redirect the current window instead
35.  }
36.  </script>

The Tweet button use's Twitter's Tweet Web Intent method to share the user's favorite color and the URL of the page.

The Share button uses Facebook's Share Dialog but, as I mentioned earlier, there's no way there of prepopulating the status message. So, while we're able to share the URL, we're not able to share the user's favorite color.

(There is a potential workaround here by setting up multiple URLs using query strings and then sharing those… page.html?color=pink, page.html?color=blue, for example. But that wasn't an exact match of what I was trying to do here, so I didn't pursue it.)

As it is, we'll use have to let the users come up with their own message for Facebook; all we can provide is the URL.

One note of caution: Be sure to update your Facebook App ID before using the code shown here.



This post was published on December 22nd, 2015 by Robert James Reese in the following categories: Facebook, JavaScript, jQuery, and Twitter. Before using any of the code or other content in this post, you must read and agree to our terms of use.