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="{"seq":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="{"actor":"514782389","target_fbid":"184361748268334","target_profile_id":"514782389","type_id":"17","source":"1","assoc_obj_id":"","source_app_id":"2309869772","extra_story_params":[],"content_timestamp":"1298066944","check_hash":"e76c88ca6e20b4a0"}" 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="{"type":"action"}"> ·
<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&appid=2309869772&p%5B0%5D=514782389&p%5B1%5D=184361748268334" rel="dialog">Share</a></span></div>
</div>
<ul class="uiList uiUfi focus_target fbUfi" data-ft="{"type":"ufi"}">
<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="{"src":10,"sty":263,"actrs":"514782389","object_id":184361748268334,"pub_time":1298066944,"fbid":"184361748268334","qid":"5575216616647978849","mf_objid":184361748268334,"s_obj":5,"s_edge":1,"s_prnt":3,"pos":9,"filter":"h"}" name="link_data" type="hidden">
</form>
Because
BUTTON type="submit"
andINPUT type="submit"
are the standard way to submit forms- Like-action uses a POST-request because POST-requests should be used when some server-side state is altered.
- 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.
- 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
精彩评论