开发者

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

开发者 https://www.devze.com 2023-02-12 05:31 出处:网络
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.

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

精彩评论

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

关注公众号