tag:blogger.com,1999:blog-11131655516562029102024-02-19T06:02:57.225-08:00Blogger เล่าเรื่องจิปาถะหลากหลายมุมมองเกี่ยวกับคนทำบล็อก และเทคนิคต่างๆ จากประสบการณ์ตรงPraputhttp://www.blogger.com/profile/03282512792282108196noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-1113165551656202910.post-78230381491325927142016-06-14T20:33:00.000-07:002016-06-14T23:30:22.445-07:00มาเพิ่ม comment ของ facebook ให้กับเว็บเรากัน<h2>
ข้อดีของการใส่ comment ของ facebook ให้กับเว็บเรา</h2>
เล่าเรื่องจิปาถะวันนี้จะมาพูดเรื่องการเพิ่ม comment facebook ให้กับ blog ของเราครับ โดยปกติแล้ว comment blog ของเราจะใช้ระบบ google+ ซึ่งช่วยเพิ่มการค้นหาของเราเวลาที่มีคนมาแสดงความเห็นกันเยอะๆ แต่คนส่วนใหญ่นั้นเล่น facebook กัน ดังนั้นการใส่ comment facebook นั้นมีโอกาสที่เว็บไซต์ของเราจะรู้จักมากกว่า เนื่องจากเวลาที่มีผู้ใช้งานเข้ามา comment เรา comment นั้นก็จะเข้าไปใน news feed ของผู้ใช้งานนั้น และช่วยเพิ่มช่องทางให้ friend ของผู้ใช้งานนั้นเห็นรู้จักบล็อกของเราครับ<br />
<br />
<h2>
วิธีเพิ่ม comment ของ facebook ให้กับเว็บเรา</h2>
<div>
มาเริ่มกันเลยครับ</div>
<div>
<ol>
<li>ให้เราเข้าไปที่เว็บ Facebook for Developer ในหน้า Social Plugin จะมีหัวข้อ <a href="https://developers.facebook.com/docs/plugins/comments" rel="nofollow" target="_blank">Comments หรือ ความเห็น</a> ครับ<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLFsPKYUB2LXHQl4XiPxMOj9gqkZmBBE8Qg2AFCcdzJNVWUh9Aa24_Osk0FvuDm7cGssTJyKk86BLVNqun3AE4JTb6bHvvbG6WCS68A-T4iLX7AzjNtYjrIfuqHQl9-QEQiEKtdo9Zrvd/s1600/2559-06-15+09_14_09-%25E0%25B8%2584%25E0%25B8%25A7%25E0%25B8%25B2%25E0%25B8%25A1%25E0%25B8%2584%25E0%25B8%25B4%25E0%25B8%2594%25E0%25B9%2580%25E0%25B8%25AB%25E0%25B9%2587%25E0%25B8%2599+-+%25E0%25B9%2582%25E0%25B8%258B%25E0%25B9%2580%25E0%25B8%258A%25E0%25B8%25B5%25E0%25B8%25A2%25E0%25B8%25A5%25E0%25B8%259B%25E0%25B8%25A5%25E0%25B8%25B1%25E0%25B9%258A%25E0%25B8%2581%25E0%25B8%25AD%25E0%25B8%25B4%25E0%25B8%2599.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLFsPKYUB2LXHQl4XiPxMOj9gqkZmBBE8Qg2AFCcdzJNVWUh9Aa24_Osk0FvuDm7cGssTJyKk86BLVNqun3AE4JTb6bHvvbG6WCS68A-T4iLX7AzjNtYjrIfuqHQl9-QEQiEKtdo9Zrvd/s400/2559-06-15+09_14_09-%25E0%25B8%2584%25E0%25B8%25A7%25E0%25B8%25B2%25E0%25B8%25A1%25E0%25B8%2584%25E0%25B8%25B4%25E0%25B8%2594%25E0%25B9%2580%25E0%25B8%25AB%25E0%25B9%2587%25E0%25B8%2599+-+%25E0%25B9%2582%25E0%25B8%258B%25E0%25B9%2580%25E0%25B8%258A%25E0%25B8%25B5%25E0%25B8%25A2%25E0%25B8%25A5%25E0%25B8%259B%25E0%25B8%25A5%25E0%25B8%25B1%25E0%25B9%258A%25E0%25B8%2581%25E0%25B8%25AD%25E0%25B8%25B4%25E0%25B8%2599.png" title="หน้าตาเว็บ social plugin ของ facebook" width="400" /></a></li>
<li>เลื่อนหน้าลงมาจนถึงคำว่า รับรหัส หรือ Get Code ให้คลิกที่ปุ่มนั้น<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDNwW83JpKEy1VHn81ngNXud7zLR1BWMaMD-64M_gIE1-RYcqrnRWF5-gV4ialJhdv8rzglREFY2QH8S4GOpkCaCCsKIQB0mZfiADVmND6A-s3Jwfd1p0pnr3Wxhpn_5AEXfCM1TD1LYJ5/s1600/2559-06-15+09_16_49-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="คลิกที่ปุ่มรับรหัส หรือ Get Code" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDNwW83JpKEy1VHn81ngNXud7zLR1BWMaMD-64M_gIE1-RYcqrnRWF5-gV4ialJhdv8rzglREFY2QH8S4GOpkCaCCsKIQB0mZfiADVmND6A-s3Jwfd1p0pnr3Wxhpn_5AEXfCM1TD1LYJ5/s320/2559-06-15+09_16_49-Blogger.pptx+-+PowerPoint.png" title="คลิกที่ปุ่มรับรหัส หรือ Get Code" width="320" /></a></li>
<li>รหัส หรือ Code ที่ได้รับจะมีสองส่วนครับ ส่วนแรกเอาไว้แทรกหลัง tag <body> ส่วนที่สอง เอาไว้แทรกในหน้าที่เราต้องการจะให้แสดงความเห็น<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXxdXUxuOU-CIEH9JZsXpZR7hTH7wsvJvdEObT11lyJw6XwUw793C5n2afkP1BAaUokFmYOsp5MOyqzlCcRTjIiXJ0G-RtOqKtIa_KBKy_sBJRSkiQK_Bs1-CJOrih3Bf4MkysMq02SVyz/s1600/2559-06-15+09_25_06-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXxdXUxuOU-CIEH9JZsXpZR7hTH7wsvJvdEObT11lyJw6XwUw793C5n2afkP1BAaUokFmYOsp5MOyqzlCcRTjIiXJ0G-RtOqKtIa_KBKy_sBJRSkiQK_Bs1-CJOrih3Bf4MkysMq02SVyz/s400/2559-06-15+09_25_06-Blogger.pptx+-+PowerPoint.png" width="400" /></a></li>
</ol>
<h2>
วิธีการใส่ความเห็น facebook ให้กับ Blogger (Step-by-Step)</h2>
</div>
<h3>
Step 1: การใส่ Code ส่วนที่ 1 : JavaScript SDK</h3>
<div>
<ol>
<li>หน้าเมนู Blogger ให้คลิกที่ Layout<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJfHcQJo4_r3VB0NGFNuToxBnTzegMV-ahxxYuD4EXNuVcP0ToYL6504TYnFB9iVEVy9P5D3sY9M5SU26hzlj_2aNRcsg2AHCl5bV5G1zjlxcDD1JCJtOeI3GIFUEGsYBsXX1f2ctZVAB/s1600/2559-06-15+09_29_54-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJfHcQJo4_r3VB0NGFNuToxBnTzegMV-ahxxYuD4EXNuVcP0ToYL6504TYnFB9iVEVy9P5D3sY9M5SU26hzlj_2aNRcsg2AHCl5bV5G1zjlxcDD1JCJtOeI3GIFUEGsYBsXX1f2ctZVAB/s320/2559-06-15+09_29_54-Blogger.pptx+-+PowerPoint.png" width="320" /></a></li>
<li>เลือกที่ Edit HTML<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbGOkR5Pk7Pmlxw1Oj0l16Ci3oGweeNijkZV6n741pWlXclYnZ158jCNEwq2ZCww9Kn57ty37jeXp444ie43OoQrPNZdUTiHlWZpdduoN93U_CJPaYxttgNPVxbMq3hku7jimCn74hbB9/s1600/2559-06-15+09_32_44-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbGOkR5Pk7Pmlxw1Oj0l16Ci3oGweeNijkZV6n741pWlXclYnZ158jCNEwq2ZCww9Kn57ty37jeXp444ie43OoQrPNZdUTiHlWZpdduoN93U_CJPaYxttgNPVxbMq3hku7jimCn74hbB9/s320/2559-06-15+09_32_44-Blogger.pptx+-+PowerPoint.png" width="320" /></a></li>
<li>จากนั้นจะมีหน้า Code ของเว็บเราขึ้นมา ให้เราเลื่อนลงมาที่ส่วนของ <body> ครับ<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrlbaFME4qHoXYNoL-r3W4Z4ZwZplcrVa4Sc0ibwnpSXYLegnB41-apTt4uezDW-EOm_i5zcQOhxxYW5qXwnUZ19ld22xGyb34Wye3jlo8YFvHg9OW9dlo_wA4Kw4_zy6JNQMbBWiN7gtg/s1600/2559-06-15+09_35_40-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrlbaFME4qHoXYNoL-r3W4Z4ZwZplcrVa4Sc0ibwnpSXYLegnB41-apTt4uezDW-EOm_i5zcQOhxxYW5qXwnUZ19ld22xGyb34Wye3jlo8YFvHg9OW9dlo_wA4Kw4_zy6JNQMbBWiN7gtg/s400/2559-06-15+09_35_40-Blogger.pptx+-+PowerPoint.png" width="400" /></a></li>
<li>ให้ Copy Code นี้เข้าไปใส่ครับโดยตรวจสอบ Version ให้ตรงกันกับของ Facebook (เพราะว่า Code จาก Facebook เวลาที่เอามาแทรกใน Blogger จะทำให้เซฟไม่ได้ เนื่องจากเครื่องมือใน Blogger ไม่ใช่ Code HTML ครับ)<br /><blockquote>
<div id='fb-root'/><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = &quot;//connect.facebook.net/th_TH/sdk.js#xfbml=1&amp;version=<span style="color: red;">v2.6</span>&quot;; <br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script></blockquote>
</li>
<li>วางไว้หลัง tag <body> แล้วกดปุ่ม save template ครับ เป็นอันเสร็จการใส่ Code ส่วนที่ 1<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fKFtsjLPJVHpmFDPms77ESKLO70bbYq951vxeSevWJgzldzBphYxUMPy9Gz-IzxGcVFXBfcJXHpzusTQzIv0nF1-Ro3olVXE6zD0Y8Usw4SW0PmDaHkQpQlBNNLzDWdY06N_n8Kmr1wi/s1600/2559-06-15+09_46_05-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fKFtsjLPJVHpmFDPms77ESKLO70bbYq951vxeSevWJgzldzBphYxUMPy9Gz-IzxGcVFXBfcJXHpzusTQzIv0nF1-Ro3olVXE6zD0Y8Usw4SW0PmDaHkQpQlBNNLzDWdY06N_n8Kmr1wi/s400/2559-06-15+09_46_05-Blogger.pptx+-+PowerPoint.png" width="400" /></a></li>
</ol>
<h3>
Step 2: การใส่ Code ส่วนที่สอง : ส่วนที่จะแสดงความเห็น</h3>
</div>
<div>
<ol>
<li>คลิกที่เมนู Layout<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Uw5u7QfCEGjIcCMLZfTQxiLzsBZvXQ-9RnTqxxqJkcpw89kGOmRN4rPg-hAZnnOIfdJNyiSLM7GxZJu1XWpKl4kxDVqf6iqljauVn6sd5rG_PexpJMzaL-BpLK3OVl3TM6yfwJ3_Wbs1/s1600/2559-06-15+09_51_05-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Uw5u7QfCEGjIcCMLZfTQxiLzsBZvXQ-9RnTqxxqJkcpw89kGOmRN4rPg-hAZnnOIfdJNyiSLM7GxZJu1XWpKl4kxDVqf6iqljauVn6sd5rG_PexpJMzaL-BpLK3OVl3TM6yfwJ3_Wbs1/s1600/2559-06-15+09_51_05-Blogger.pptx+-+PowerPoint.png" /></a></li>
<li>เลือกที่ Add a Gadget<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj66Y4qgmfgdu665v5l2xTXICeazyvGreaVOZKLvDlNGP6yQvU8OxKei3pscYT-Rim7IGN6G27xPPkDwRr_kfMJYAsqPQxa-S4iGju1eKR6DEhuY6U-eelVujuNeroEW5_lllHUE0Dg51T/s1600/2559-06-15+10_02_34-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj66Y4qgmfgdu665v5l2xTXICeazyvGreaVOZKLvDlNGP6yQvU8OxKei3pscYT-Rim7IGN6G27xPPkDwRr_kfMJYAsqPQxa-S4iGju1eKR6DEhuY6U-eelVujuNeroEW5_lllHUE0Dg51T/s320/2559-06-15+10_02_34-Blogger.pptx+-+PowerPoint.png" width="320" /></a></li>
<li>เลือก Gadget HTML/JavaScript<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNq4W-CkPdplatWGd281u7uWSak3AxFm00d8xg-jm799dvU6ZkZKmF5SeqtJ0Vi-XuJwm5jXVubgowOM59RWZ-Lij2b0KvElQxnTbxFxbJdz8-d7wJLKNkH-ZPPvzuwG8MP-Br2UKpl6Q/s1600/2559-06-15+10_02_52-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNq4W-CkPdplatWGd281u7uWSak3AxFm00d8xg-jm799dvU6ZkZKmF5SeqtJ0Vi-XuJwm5jXVubgowOM59RWZ-Lij2b0KvElQxnTbxFxbJdz8-d7wJLKNkH-ZPPvzuwG8MP-Br2UKpl6Q/s320/2559-06-15+10_02_52-Blogger.pptx+-+PowerPoint.png" width="320" /></a></li>
<li>ในส่วนของ Title ใส่หัวข้อครับ เช่น ความเห็น / ร่วมกันแสดงความเห็น เป็นต้น<br />ในส่วน Content ให้ Copy Code ในส่วนที่ 2 จาก Facebook มาวางครับ แล้วกด Save<br /><blockquote class="tr_bq">
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5"></div></blockquote>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44RKq5aKLd5HGkAnl_AdWcy0FWVz-HEG9y6DVPLsMmj0JFqvLZriVaOxcz-UBX9wP0IvtR8mkI-kijy6vxhTRQVEFyP7ZgXIdg_z-JdxUz_VyOyJFFUPco0lQFQm4wwGjWbPfTBwbuVL0/s1600/2559-06-15+10_03_08-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44RKq5aKLd5HGkAnl_AdWcy0FWVz-HEG9y6DVPLsMmj0JFqvLZriVaOxcz-UBX9wP0IvtR8mkI-kijy6vxhTRQVEFyP7ZgXIdg_z-JdxUz_VyOyJFFUPco0lQFQm4wwGjWbPfTBwbuVL0/s320/2559-06-15+10_03_08-Blogger.pptx+-+PowerPoint.png" width="320" /></a></li>
<li>ให้ลาก Gadget ไปยังตำแหน่งที่เราต้องการให้แสดงความเห็น<br /><div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNEGRs4b5cBHAVacQYKRMQlgGWsTNtBD9zEB16gM-QJ9nXsCuv-mhrVBF5kvVL0dwpaHE488JvEalzA-ULTVQcnmQNoIgJVYKHgzbKU0QQKb04swuj0rEijvdBDIpG4HZeMqTg_ppUTvK/s1600/2559-06-15+10_03_51-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNEGRs4b5cBHAVacQYKRMQlgGWsTNtBD9zEB16gM-QJ9nXsCuv-mhrVBF5kvVL0dwpaHE488JvEalzA-ULTVQcnmQNoIgJVYKHgzbKU0QQKb04swuj0rEijvdBDIpG4HZeMqTg_ppUTvK/s320/2559-06-15+10_03_51-Blogger.pptx+-+PowerPoint.png" width="320" /></a></div>
</li>
<li><div style="text-align: left;">
กดปุ่ม Save arrangement เป็นอันเสร็จครับ<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp01Za1bwh5hf1id9fmtzrjL_2WsI-idLBLOnnCtoiKlPRkBHB9CNSS35utEennLNSbNUCQnVKL6MgQ3ePzBy-YtK9pk4U2isahyphenhyphen_fnYEnkVy-TVCDtAJkV4Sd_QSIwLdcJLmtr9C0HOgT/s1600/2559-06-15+10_04_03-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp01Za1bwh5hf1id9fmtzrjL_2WsI-idLBLOnnCtoiKlPRkBHB9CNSS35utEennLNSbNUCQnVKL6MgQ3ePzBy-YtK9pk4U2isahyphenhyphen_fnYEnkVy-TVCDtAJkV4Sd_QSIwLdcJLmtr9C0HOgT/s320/2559-06-15+10_04_03-Blogger.pptx+-+PowerPoint.png" width="320" /></a></div>
</li>
</ol>
<h3>
Step 3: ปิดระบบ Comment เดิมของ Google</h3>
<div>
การปิดระบบ Comment เดิมของ Google เพื่อไม่ให้มันแสดงความเห็นซ้ำซ้อนกันครับ วิธีการคือ เข้าไปที่ Settings > Posts, comments and sharing > จากนั้นในหัวข้อ Comment Location ให้เลือก Hide เพื่อซ่อน Comment ของ Google แล้วกด Save</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMVpBzn3-HPbaazTQkUVXRcRpc6F3Xq4yB5ZVmEhGhjbVBD1PRLNs_jX8nI1_LVxWiwA8S-T_V0jc030baImdHJH9z_LeTEJQfoefK0wg8KccQwwKNYJG3s-3xmbxOCDaB71c0A0oeGWHR/s1600/2559-06-15+10_21_58-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMVpBzn3-HPbaazTQkUVXRcRpc6F3Xq4yB5ZVmEhGhjbVBD1PRLNs_jX8nI1_LVxWiwA8S-T_V0jc030baImdHJH9z_LeTEJQfoefK0wg8KccQwwKNYJG3s-3xmbxOCDaB71c0A0oeGWHR/s640/2559-06-15+10_21_58-Blogger.pptx+-+PowerPoint.png" width="640" /></a></div>
<div>
<br /></div>
<h2>
เสร็จแล้วครับ</h2>
<div>
ทดลองใส่ความเห็นดู ถ้าใส่ได้แสดงว่าเสร็จสมบูรณ์แล้วครับ ทีนี้ Comment Facebook ของเราก็จะไปปรากฎทุกๆ หน้าใน Blog แล้วครับ</div>
<h2>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrtt8QnzLZgU9ICBDNPkf2dI84fZNw687yVsobiKrYsvy5vChx3f_QZ7wzPWC2lKgXCHfBOysa53iMeKYzf7c4hoFtcWRVcqH2XE3JxUUKM597tyVJCZOKIYo_7aVrvW9CkZJhiSblST9/s1600/2559-06-15+10_15_12-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="font-size: medium; font-weight: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrtt8QnzLZgU9ICBDNPkf2dI84fZNw687yVsobiKrYsvy5vChx3f_QZ7wzPWC2lKgXCHfBOysa53iMeKYzf7c4hoFtcWRVcqH2XE3JxUUKM597tyVJCZOKIYo_7aVrvW9CkZJhiSblST9/s640/2559-06-15+10_15_12-Blogger.pptx+-+PowerPoint.png" width="577" /></a></h2>
<h2>
Q&A: Save Code ส่วนแรกไม่ติด ขึ้นว่า <span style="background-color: #f3f3f3; color: red; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px; font-weight: normal; line-height: 25px;">The reference to entity "version" must end with the ';' delimiter.</span></h2>
ปัญหาตอนที่ใส่ Code ส่วน JavaScriptSDK (ส่วนแรก) แล้วขึ้นว่า <span style="background-color: #f3f3f3; color: red; font-family: "arial" , "helvetica" , sans-serif; font-size: 13px; line-height: 25px;">The reference to entity "version" must end with the ';' delimiter. </span>เกิดจากเรา Copy Code HTML มาจาก Facebook โดยตรงมาวางเลย ในขณะที่เครื่องมือแก้ไข Code ของ Blogger เป็นคนละภาษากันกับ HTML ทำให้วางแล้วเซฟไม่ได้</div>
<div>
<h3>
วิธีแก้คือ</h3>
<div>
ให้ Copy Code จากตรงนี้ไปใช้แทนครับ โดยตรวจสอบ Version ให้ตรงกันกับของ Facebook</div>
<div>
<blockquote class="tr_bq">
<div id='fb-root'/><br /><script>(function(d, s, id) {<br />var js, fjs = d.getElementsByTagName(s)[0];<br />if (d.getElementById(id)) return;<br />js = d.createElement(s); js.id = id;<br />js.src = &quot;//connect.facebook.net/th_TH/sdk.js#xfbml=1&amp;version=<span style="color: red;">v2.6</span>&quot;;<br />fjs.parentNode.insertBefore(js, fjs);<br />}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script></blockquote>
</div>
<h2>
</h2>
</div>
<div>
<br /></div>
Praputhttp://www.blogger.com/profile/03282512792282108196noreply@blogger.comtag:blogger.com,1999:blog-1113165551656202910.post-55372798557963899452016-06-14T11:26:00.003-07:002016-06-14T11:26:47.305-07:00เริ่มต้นทำบล็อก กับ Blogger<div dir="ltr">
</div>
<h2>
อย่าเพิ่งท้อ ถ้ามาถูกทาง !!</h2>
สร้างบล็อกครั้งแรกของผมนี่แทบจะไม่มีคนเข้าเลยครับ ร้างเป็นเดือนๆ จนกระทั่งเราค่อยๆ เพิ่ม Content (Blog) เข้าไปเรื่อยๆ ทำให้ Google ยิ่งรู้จักเว็บเรามากขึ้นทำให้มีคนเข้ามาดูเพิ่มขึ้นๆ ครับ วันนี้จะมาเล่าวิธีการเขียนบล็อกเบื้องต้น<br />
<h2>
จัดข้อความให้ถูกหลักด้วย heading</h2>
<div>
การจัดข้อความด้วย heading จะช่วยให้ google รู้จักโครงสร้างบทความ (post) ได้ดียิ่งขึ้น โครงสร้างของบทความประกอบไปด้วย<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1hCBBb4fjN_n4mfWEU24UDQ30h5E0ftuI7_oiBfqN3BErx3jQrGweXfqm4IuBVA1WdiEg4q5WLP_FKFTshk3T3C0oGOzLxvcXswlgCxYWfAQT-HHUdhzL5uwkL0AGp2cvFmJ9BvqyKss/s1600/2559-06-15+01_24_17-Blogger_+Blogger+%25E0%25B9%2580%25E0%25B8%25A5%25E0%25B9%2588%25E0%25B8%25B2%25E0%25B9%2580%25E0%25B8%25A3%25E0%25B8%25B7%25E0%25B9%2588%25E0%25B8%25AD%25E0%25B8%2587%25E0%25B8%2588%25E0%25B8%25B4%25E0%25B8%259B%25E0%25B8%25B2%25E0%25B8%2596%25E0%25B8%25B0+-+Edit+post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Heading, Subheading, Minor heading, Normal" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1hCBBb4fjN_n4mfWEU24UDQ30h5E0ftuI7_oiBfqN3BErx3jQrGweXfqm4IuBVA1WdiEg4q5WLP_FKFTshk3T3C0oGOzLxvcXswlgCxYWfAQT-HHUdhzL5uwkL0AGp2cvFmJ9BvqyKss/s1600/2559-06-15+01_24_17-Blogger_+Blogger+%25E0%25B9%2580%25E0%25B8%25A5%25E0%25B9%2588%25E0%25B8%25B2%25E0%25B9%2580%25E0%25B8%25A3%25E0%25B8%25B7%25E0%25B9%2588%25E0%25B8%25AD%25E0%25B8%2587%25E0%25B8%2588%25E0%25B8%25B4%25E0%25B8%259B%25E0%25B8%25B2%25E0%25B8%2596%25E0%25B8%25B0+-+Edit+post.png" title="Heading" /></a></div>
<br />
<h3>
Title (ชื่อเรื่อง)</h3>
</div>
<div>
ชื่อเรื่องหรือก็คือ topic ที่อยู่เราพูดถึงในบทความ อย่างบทความนี้ มี title ว่า "เริ่มต้นทำ Blog กับ Blogger" ครับ</div>
<h3>
หัวเรื่อง heading หรือ h1</h3>
<div>
คือหัวเรื่องของบทความ เช่น คุณกำลังเขียนบทความเกี่ยวกับเรื่อง รถยนต์ไทย </div>
<div>
=> ประเภทของรถยนต์ ก็อาจเป็นหัวเรื่องหนึ่งได้ครับ</div>
<h3>
หัวข้อย่อย sub-heading และ minor heading (h2, h3,h4)</h3>
<div>
ก็คือหัวข้อย่อยถัดมาจากหัวเรื่อง h1 อีกที ตัวอย่าง ถ้าประเภทของรถยนต์เป็น หัวข้อใหญ่ h1</div>
<div>
=> หัวข้อย่อย h2 อาจจะเป็น จำแนกตามจุดประสงค์การใช้งาน</div>
<div>
=> หัวข้อย่อย h3 อาจจะเป็น รถขับขี่ส่วนบุคคล, รถสาธารณะ ก็ได้เช่นกันครับ</div>
<h2>
ใช้ข้อความแทนภาพ</h2>
<div>
การเขียนบล็อกจุดสำคัญที่ทำให้ Google เข้าถึงข้อมูลเราได้นั่นคือ การใช้ข้อความ แทนภาพ หรือ flash ครับ เพราะว่า Robot ของ Google จะตีความหมายและคำสำคัญ Keyword จากข้อความเท่านั้น แต่ Google ไม่สามารถเข้าใจความหมายของภาพหรือ flash ได้ว่าหมายถึงอะไร จนกว่าเราจะใส่ข้อความให้ภาพนั้นครับ</div>
<h2>
วิธีทำให้ Google รู้จักภาพของเรา</h2>
<div>
การทำให้ Google สามารถอ่านภาพของเราได้นั้นทำได้โดยการใส่ title และ alt text ให้กับรูปภาพเราครับ<br />
<h3>
title รูปภาพ คืออะไร ?</h3>
</div>
<div>
title รูปภาพแปลความหมายตามตัวเลยครับว่า "ชื่อภาพ" กรณีที่ภาพโหลดไม่ขึ้น ตัวแสดงผล หรือ browser จะแสดง title ออกมาแทน หรือเวลาที่เราเอา mouse ไปชี้ที่รูปภาพ ก็จะขึ้น title มาให้ดูครับ</div>
<h3>
alt text รูปภาพคืออะไร ?</h3>
<div>
alt text มาจากคำว่า alternative text แปลตามตัวคือ ข้อความทางเลือก การใช้งาน alt text ใช้เพื่อบอกรายละเอียดของภาพได้ครับ วิธีการบอกรายละเอียดเราอาจให้เป็น keyword หรือบรรยายไปก็ได้ครับ<br />
<h3>
วิธีการแทรกภาพและใส่รายละเอียด title และ alt text ใน Blogger</h3>
</div>
<div>
<ol>
<li>ที่แถบเครื่องมือ tools bar ให้คลิกที่ icon รูปภาพขึ้นมา<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMA9UZprs4Kz7A2SNFsyFgwsBwCfzZLxLJdYkw7Y_J0sCAudKsGAJqgEX0z25DdMDWlcEqr-Wx14rSsKz3rIJZGk2h4oXsRbyJjrpACRSszdGBm79rRmHMkYFOC-lx5SI9dI0GVbfHSbyk/s1600/2559-06-15+01_16_54-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="how to insert picture in blogger การแทรกรูปภาพลงใน Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMA9UZprs4Kz7A2SNFsyFgwsBwCfzZLxLJdYkw7Y_J0sCAudKsGAJqgEX0z25DdMDWlcEqr-Wx14rSsKz3rIJZGk2h4oXsRbyJjrpACRSszdGBm79rRmHMkYFOC-lx5SI9dI0GVbfHSbyk/s1600/2559-06-15+01_16_54-Blogger.pptx+-+PowerPoint.png" title="how to insert picture in blogger การแทรกรูปภาพลงใน Blogger" /></a></li>
<li>คลิกเลือกรูปภาพจากแหล่งต่างๆ เช่น จากการ Upload ไฟล์ / จากโทรศัพท์มือถือ / จาก Link ภายนอก เป็นต้น จากนั้นให้คลิก Add Selected (สามารถเลือกได้หลายๆ รูปในคราวเดียวกัน)<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_h-vst52WOpeE6ky8kdhWfA2i8P0cR5WVF5nFdntTP2ODgGcNqkOaxwUQ-Kb1IjhBB0at7AUiaf9gWoghZGpGdvvHFf_1UArTeuZwJDpLhIq1YtDgC_nmDecDjlQlg2va-71enFOOoG_i/s1600/2559-06-15+01_17_14-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="how to insert picture in blogger การแทรกรูปภาพลงใน Blogger" border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_h-vst52WOpeE6ky8kdhWfA2i8P0cR5WVF5nFdntTP2ODgGcNqkOaxwUQ-Kb1IjhBB0at7AUiaf9gWoghZGpGdvvHFf_1UArTeuZwJDpLhIq1YtDgC_nmDecDjlQlg2va-71enFOOoG_i/s400/2559-06-15+01_17_14-Blogger.pptx+-+PowerPoint.png" title="how to insert picture in blogger การแทรกรูปภาพลงใน Blogger" width="400" /></a></li>
<li>คลิกที่รูปภาพที่เราแทรก จะมีข้อความปรากฎขึ้นมา จากนั้นให้คลิกคำว่า Properties<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQIdaGtkCJXU4ivqf5Y4_RoVOOWuyp0DtMprQ4C9uldBWHaSP_cJZosvZ0EHrcOakrwF2c7srKJAC3uxZFu0hcd-8WMU_ssZ_sm5UHMrUs0DZ5NWCxl0-jDi1-C9-BSIhksZid-NwU7a8/s1600/2559-06-15+01_17_33-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="how to insert picture in blogger การแทรกรูปภาพลงใน Blogger" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQIdaGtkCJXU4ivqf5Y4_RoVOOWuyp0DtMprQ4C9uldBWHaSP_cJZosvZ0EHrcOakrwF2c7srKJAC3uxZFu0hcd-8WMU_ssZ_sm5UHMrUs0DZ5NWCxl0-jDi1-C9-BSIhksZid-NwU7a8/s400/2559-06-15+01_17_33-Blogger.pptx+-+PowerPoint.png" title="how to insert picture in blogger การแทรกรูปภาพลงใน Blogger" width="400" /></a></li>
<li>ใส่ชื่อภาพ title และ รายละเอียดของภาพ alt text ตามต้องการ แล้วกด OK เป็นอันเสร็จครับ<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNokcWwmhE5WffqhwuKdaB6M6ccGek7kKAF2Gbzwhm-IDciu1KFJEXycZ6WuowOCF4bYA1zUJv0cjYI11B1F_c1IWiE1BfaPw3ScmsYudzfDCH3iUQ3kGt3MiwFNQU7-eTanK7IwY4jzd/s1600/2559-06-15+01_17_49-Blogger.pptx+-+PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="how to add title and alt text in pictures การแทรก title และ alt text ในรูปภาพ" border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNokcWwmhE5WffqhwuKdaB6M6ccGek7kKAF2Gbzwhm-IDciu1KFJEXycZ6WuowOCF4bYA1zUJv0cjYI11B1F_c1IWiE1BfaPw3ScmsYudzfDCH3iUQ3kGt3MiwFNQU7-eTanK7IwY4jzd/s400/2559-06-15+01_17_49-Blogger.pptx+-+PowerPoint.png" title="how to add title and alt text in pictures การแทรก title และ alt text ในรูปภาพ" width="400" /></a></li>
</ol>
</div>
<div>
</div>
<h2>
บทสรุป</h2>
<div>
จะเห็นว่า การเขียนบทความบนบล็อกนั้นไม่ได้ยากอะไรเลย สิ่งที่เราต้องรู้คือ โครงสร้างของบทความ และ วิธีการจัดรูปแบบข้อความ และรูปภาพให้ถูกต้อง ก็เริ่มต้นทำบล็อกได้อย่างราบรื่นแล้วครับ</div>
<div>
<br /></div>
Praputhttp://www.blogger.com/profile/03282512792282108196noreply@blogger.com