开发者

Why did facebook used submit button and not just links for the like button?

Why did facebook used submit button and not just links for the like button?

I keep wondering why did facebook use like submit from button and not just simple link to do the action with, following is there like button code.

<form rel="async" class="live_184361748268334 commentable_item autoexpand_mode" method="post" action="/ajax/ufi/modify.php" data-live="{&quot;seq&quot;:0}" onsubmit="return Event.__inlineSubmit(this,event)">
  <input name="charset_test" value="€,´,€,´,水,Д,Є" type="hidden">
  <input autocomplete="off" name="post_form_id" value="1ef694751d74ce24382cfa6181f1adfe" type="hidden">
  <input name="fb_dtsg" value="_19R5" autocomplete="off" type="hidden">
  <input autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot;514782389&quot;,&quot;target_fbid&quot;:&quot;184361748268334&quot;,&quot;target_profile_id&quot;:&quot;514782389&quot;,&quot;type_id&quot;:&quot;17&quot;,&quot;source&quot;:&quot;1&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot;2309869772&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot;1298066944&quot;,&quot;check_hash&quot;:&quot;e76c88ca6e20b4a0&quot;}" type="hidden">
  <div class="UIImageBlock clearfix"><i class="UIImageBlock_Image UIImageBlock_ICON_Image img sp_4b2fk0 sx_b64365"></i>
    <div class="UIImageBlock_Content UIImageBlock_ICON_Content"><span class="uiStreamSource"><a href="/aleem.sheikh/posts/184361748268334"><abbr title="Saturday, February 19, 2011 at 3:09am" data-date="Fri, 18 Feb 2011 14:09:04 -0800" class="timestamp">4 hours ago</abbr></a></span><span class="UIActionLinks UIActionLinks_bottom" data-ft="{&quot;type&quot;:&quot;action&quot;}"> ·
        <button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button>
        ·
        <label class="uiLinkButton comment_link" onclick="return fc_click(this);" title="Leave a comment">
          <input value="Comment" type="button">
        </label>
        · <a title="Send this to friends or post it on your profile." href="/ajax/share_dialog.php?s=99&amp;appid=2309869772&amp;p%5B0%5D=514782389&amp;p%5B1%5D=184361748268334" rel="dialog">Share</a></span></div>
  </div>
  <ul class="uiList uiUfi focus_target fbUfi" data-ft="{&quot;type&quot;:&quot;ufi&quot;}">
    <li class="ufiNub uiListItem  uiListVerticalItemBorder"><i></i>
      <input autocomplete="off" name="xhp_ufi" value="1" type="hidden">
    </li>
    <li class="ufiItem uiUfiLike">
      <div class="UIImageBlock clearfix"><a class="UIImageBlock_Im开发者_JS百科age UIImageBlock_ICON_Image" tabindex="-1">
          <label onclick="this.form.like.click();"><i class="img sp_8dfqpl sx_4ac53f" title="Like this item"></i></label>
        </a>
        <div class="UIImageBlock_Content UIImageBlock_ICON_Content"><a href="http://www.facebook.com/profile.php?id=100000407120411">Syed Murtaza Zaidi</a> likes this.</div>
      </div>
    </li>
    <li class="uiUfiComments uiListItem  uiListVerticalItemBorder hidden_elem">
      <ul class="commentList">
      </ul>
    </li>
    <li class="uiUfiAddComment clearfix ufiItem ufiItem uiListItem  uiListVerticalItemBorder uiUfiAddCommentCollapsed">
      <div><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41709_1014341698_4889488_q.jpg" alt="">
        <div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content">
          <div class="commentBox">
            <textarea class="DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox textBoxContainer" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) {new TextAreaControl(this).setAutogrow(true);this._has_control = true;}});">Write a comment...</textarea>
          </div>
          <label class="mts mts commentBtn stat_elem optimistic_submit uiButton uiButtonConfirm" for="u127419_35">
            <input value="Comment" name="comment" id="u127419_35" type="submit">
          </label>
        </div>
      </div>
    </li>
  </ul>
  <input value="{&quot;src&quot;:10,&quot;sty&quot;:263,&quot;actrs&quot;:&quot;514782389&quot;,&quot;object_id&quot;:184361748268334,&quot;pub_time&quot;:1298066944,&quot;fbid&quot;:&quot;184361748268334&quot;,&quot;qid&quot;:&quot;5575216616647978849&quot;,&quot;mf_objid&quot;:184361748268334,&quot;s_obj&quot;:5,&quot;s_edge&quot;:1,&quot;s_prnt&quot;:3,&quot;pos&quot;:9,&quot;filter&quot;:&quot;h&quot;}" name="link_data" type="hidden">
</form>


Because

  1. BUTTON type="submit" and INPUT type="submit" are the standard way to submit forms
  2. Like-action uses a POST-request because POST-requests should be used when some server-side state is altered.
  3. Like-action contains several parameters with long values. Some browsers have a limit to URL length and the parameters of the like-action might exceed that length if it was sent as a GET-request.
  4. Using standard elements allows all browsers to submit like-action correctly as a POST-request even without javascript. Using links would result in a GET-request.


I never noticed that it was a button and not a link, nice catch.

It's likely because the "Like" action isn't a true link. It doesn't take you anywhere. So while they styled it like a link, it isn't actually a link. They could have used a link, sure, but I think using the button is a bit more correct. Clicking a button performs an action, as opposed to a link which takes you to a new page. That matches well with what happens when you "like" something on facebook.


Even the mobile version seems to use links. The button must be a remnant from the time they thought they needed to support more restrictive browser settings. – Aleksi

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜