You are here

Dynamic Social Media Fields

Submitted by Kate on March 27, 2012 - 1:21pm

Setting up dynamic social media fields will let users craft their own messages to share links with their friends and family. It has the added benefit of letting organizers duplicate a form without worrying about a lot of code. With this tutorial, we’ll create a form with three share fields — email, Twitter, and Facebook — where users can customize the text shared.

The end result looks like this:

HTML:

  1. <div id="socmedforms">
  2.   <div id="emailshare" class="sharelist">  
  3.   <a href="" id="share1" onclick="email()" target="_blank">
  4.     <span id="em">Share via email</span>
  5.   </a>
  6.   <form>
  7.     <!-- default text for email subject (does not display on form) -->
  8.     <textarea id="subject">This is a subject</textarea>
  9.     <!-- default text for email message -->
  10.     <textarea id="textarea1" onblur="email()">This is body text</textarea>
  11.   </form>
  12.   </div><!-- /emailshare -->
  13.  
  14.   <div id="twittershare" class="sharelist">
  15.   <a href="" id="share2" onclick="twitterShare()" target="_blank">
  16.     <span id="tw">Share on twitter</span>
  17.   </a>
  18.   <form>
  19.     <!-- default text for twitter message -->
  20.     <textarea name="limitedtextarea" id="textarea2" onblur="twitterShare()" onkeydown="limitText(this.form.limitedtextarea,this.form.countdown,119);" onkeyup="limitText(this.form.limitedtextarea,this.form.countdown,119);">this is test twitter text</textarea>
  21.     <div class="count">You have <input readonly="readonly" type="text" class="count" name="countdown" size="2" value="119" /> characters left</div>
  22.   </form>
  23.   </div><!-- /twittershare -->
  24.  
  25.   <div id="facebookshare" class="sharelist">
  26.   <a href="" id="share3" onclick="rofbshare()" target="_blank">
  27.     <span id="fb">Share on facebook</span>
  28.   </a>
  29.   <form>
  30.     <!-- default text for facebook message -->
  31.     <textarea id="textarea3" onblur="rofbshare()">this is test facebook text</textarea>
  32.   </form>
  33.   </div><!-- /facebookshare -->
  34. </div><!-- /socmedforms -->
  35. <div style="clear:both;"></div>

As you can see, this code creates three textareas, one for each of our actions, and three links. You'll definitely want to use some CSS to make these a bit prettier, but the base code is here. Also included in this code are the four different JavaScript functions we'll be using and the wordcount display for the Twitter field. I've added some helpful comments to show where different elements are; this makes it even easier for non-techie people to use the code. Next, we'll need our JavaScript.

JavaScript:

  1. /* This code shares the page it is on. TODO: add option to share another page. */
  2.   function email(){
  3.     var link = document.getElementById('share1');
  4.     var text = document.getElementById('textarea1');
  5.     var textStepTwo = text.value;
  6.     var email = "mailto:?subject=";
  7.     var emailtxt = "&body=";
  8.     var subject = document.getElementById('subject').value;
  9.     var sharetxt = encodeURIComponent(textStepTwo);
  10.     link.href = email + subject + emailtxt + sharetxt + "%20" + document.URL;  
  11.   }
  12.   function twitterShare(){
  13.     var link = document.getElementById('share2');
  14.     var text = document.getElementById('textarea2');
  15.     var textStepTwo = text.value;
  16.     var twitter = "https://twitter.com/share?url=";
  17.     var sharetxt = encodeURIComponent(textStepTwo);
  18.     link.href = twitter + document.URL + "&text=" + sharetxt;  
  19.   }
  20.   function limitText(limitField, limitCount, limitNum) {
  21.     if (limitField.value.length > limitNum) {
  22.       limitField.value = limitField.value.substring(0, limitNum);
  23.     } else {
  24.       limitCount.value = limitNum - limitField.value.length;
  25.     }
  26.   }
  27.   function rofbshare(){
  28.     var link = document.getElementById('share3');
  29.     var text = document.getElementById('textarea3');
  30.     var textStepTwo = text.value;
  31.     var facebook = "https://www.facebook.com/sharer.php?u=";
  32.     var sharetxt = encodeURIComponent(textStepTwo);
  33.     link.href = facebook + document.URL + "&t=" + sharetxt;  
  34.   }

The first three functions are pretty much the same. The first function is for the email share, and most of it is just assigning variables. Here's what happens:

  1. Grab the link and textarea from the HTML (using their IDs), name them "link" and "text" respectively.
  2. Take the text from inside the textarea and name it "textStepTwo" (yes, very original, thank you)
  3. "email" is the begining of the mailto link and starts the subject, while "emailtxt" starts the body of the email
  4. Grab the subject (using the ID of the HTML element) and call it "subject" (Pulitzer please)
  5. Take out all of the spaces and change the special characters so that they can be passed through the URL of the page. Call this encoded text "sharetxt"
  6. Replace the href value of "link" with the variables, in that order, with a space and the URL of the current page (so that there is a space in the body of the email after the custom message but before the link).

Got it? The next function does about the same thing, just adjusted slightly for Twitter. The third function, limitText, is what limits the number of characters in the Twitter textarea. You can change the number of allowed characters by changing the numer 119 in the HTML where it calls the function: limitText(this.form.limitedtextarea,this.form.countdown,119); and in the wordcount display: value="119". Be careful changing this value, as you might accidentally allow more or fewer characters than Twitter itself does!

The last function is for Facebook, and is just like the twitterShare function. The only catch with this one? It only works to share the URL, not the custom message. The Facebook text (and other information) is controlled by the open graph meta data. While you could probably use some fancy JavaScript to control the meta data with the textarea, we just made the meta data vague enough to work for most links and let the textarea serve as a suggestion for what to share on Facebook. Got a nice Facebook solution? Let us know!

Update: Styling

The links look a lot better styled with a button sprite.

  1. <css>
  2. /* @group share buttons layout */
  3. .socmedtxt{
  4. 	display: inline-table;
  5.   font-size: 1.8em;
  6.   height: 51px;
  7.   margin-bottom: 7px;
  8.   padding-right: 8px;
  9.   vertical-align: middle;
  10. 	}
  11. .socmedicon{
  12. 	height:50px;
  13. 	display: inline-table;
  14.   vertical-align: middle;
  15.   width: 50px;
  16. 	}
  17. #socmedforms .sharelist{
  18.   float:left;
  19.   display:inline;
  20.   clear:none;
  21.   height:300px;
  22.   width: 280px;
  23.   margin:0 5px;
  24.   }
  25. #socmedforms #emailshare #subject{
  26.   float:left;
  27.   position:static;
  28.   height:1.5em;
  29.   }		
  30. #socmedforms #emailshare textarea {
  31.   position:static;
  32.   float:none;
  33.   clear:left;
  34. }
  35. #socmedforms #facebookshare textarea {
  36. background:#F1F1F1;
  37. }
  38. #socmedforms #twittershare textarea {
  39. height:100px;
  40. }
  41. .sharelist textarea {
  42. 	width:270px;
  43. 	height:200px;
  44. }
  45.  
  46.  
  47. #urltoshare {
  48. display:none;
  49. }
  50. /* @end */
  51.  
  52. /* @group sharebtns sprite */
  53. #share1 #em {
  54.   display: block;
  55.   background: url('sharebtns.png') 0 0 no-repeat;
  56.   height: 63px;
  57.   width: 174px;
  58.   text-indent: -9000px;
  59.  }
  60. #share1 #em:hover { background-position: 0 -63px; }
  61.  
  62. #share2 #tw {
  63.   display: block;
  64.   background: url('sharebtns.png') -348px 0 no-repeat;
  65.   height: 63px;
  66.   width: 174px;
  67.   text-indent: -9000px;
  68. }
  69. #share2 #tw:hover { background-position: -348px -63px; }
  70.  
  71. #share3 #fb {
  72.   display: block;
  73.   background: url('sharebtns.png') -174px 0 no-repeat;
  74.   height: 63px;
  75.   width: 174px;
  76.   text-indent: -9000px;
  77. }
  78. #share3 #fb:hover { background-position: -174px -63px; }
  79. /* @end */
  80. </css>