การสร้างหน้า Template facebook แบบ กึ่งสำเร็จรูป *ผมแค่แนะนำ : )

* ติดค้างมาหลายอาทิตย์ว่าจะเขียนก็มัวแต่กลัวน้ำท่วม สภาวะจิตไม่ปกติ คิดคำพูดไม่ออกซ่ะงั้น

ไม่ต้องหาคำนิยามของที่มาของ facebook กันน่ะครับว่า คืออะไร ประเด็นมันมีอยู่ว่า ตอนนี้การสร้างหน้าเพจในเฟสบุ๊คเป็นที่นิยม ชมชอบ ผุดกันยังกะดอกเห็ด ( บ่แม้นเฮ็ดน่ะ ) ผมเลยเอาสิ่งที่ผมรู้มาบอกต่อ ว่าจะสร้างหน้าเพจให้มันเหมือนหน้า website ทำกันยังไง ?

หลักการสำคัญและเงื่อนไขพึงระวัง

  • สื่ออะไร หน้าเพจมันก็เหมือนหน้าเว็บนั้นแระขอรับ ทำดีๆมันจะมีราศี เพราะงานออกแบบ=การสื่อสาร (แนวคิดผมเอง แฮะๆ ) ไม่ต้องทำตามก็ได้นะ ไม่ไช่อะไรครับ กลัวมาแก้กันที่หลังเหนื่อยเน่อ
  • ความกว้างมันต้อง 500px แล้ว padding:10px ไม่งั้นเพี้ยนครับ อธิบายได้ว่า พื้นที่ในการสร้างหน้าเพจมันจำกัดอยู่ที่ 520px ครับ ดังนั้นพึงระวังข้อนี้ไว้ก่อน สำหรับนักออกแบบถ้าจะออกแบบโลโก้ให้พอดีเป๊ะๆ ก็ต้องกว้างไม่เกิน 500px ที่เหลืออีก 20px ก็เผื่อไว้เวลา เขียนเป็น HTML จะมีขอบด้านย่อหน้าละ 10px สองด้านก็เท่ากับ 20px


    สรุปแบบง่าย คือ ขอบซ้าย 10px + พื้นที่เขียนข้อมูล 500px + ขอบขวา 10px = 520px พอดี


เริ่มกันเลย แล้วเริ่มจากตรงไหนหล่ะ

  • เริ่มสร้างหน้าเพจเฟสบุ๊ค ให้ไปที่หน้านี้ครับ สร้างหน้าใหม่ ผมไม่อธิบายขั้นตอนรายละเอียดปลีกย่อยน่ะครับ ถ้าจะสร้าง template facebook แบบ กึ่งสำเร็จตามผม ต้องรู้ขั้นตอนพื้นฐานมาก่อนแล้วครับ แต่ถ้ารีบอยากเห็นจังหน้ามันเป็นยังไงจิ้มดูเลยครับ จิ้มๆๆ
  • สร้างหน้าเสร็จแล้วให้เรียกใช้ Application ที่ชื่อว่า Static FBML เพื่อสร้างเพจเฟสบุ๊คให้เหมือนหน้า website จาก App. นี้ครับ App.facebook/Static FBML

ปิดรูปนี้

click เพื่อดูหน้าตาหน้า App Static HTML

ขั้นตอนเขียนโค้ด CSS

/*@groupmain*/
#main-fb {
    background:url(http://2.bp.blogspot.com/-OzoeRD14X5U/TqaNiJDtV8I/AAAAAAAABcE/ohznHmuNFZ8/s1600/cubes.png) repeat scroll 0 0 #FFF;
    width:500px;/* กำหนดความกว้างให้เป็น 500px  */
    padding:10px;/*กำหนด padding เป็น 10px จะได้ขอบด้านละ 10px (ซ้าย ขวา บน ล่าง ) */
    height:100%;
    position:relative; 
    float:left;left:
    margin-bottom:25px;
    color: #333333;
    font-size: 13px;
    font-family: Arial,Helvetica,sans-serif;/*ต้องกำหนดไม่งั้นจะแสดงค่า default ของ facebook */ 
    line-height: 1.5;
    text-shadow: 0 1px 0 #FFFFFF;
     }
#main-fb h2 {font-size:18px;font-weight:bold;}
/*@groupnav*/
#nav-item {
   background-color:#DDD; 
   border-radius:8px; 
   border:1px solid #CCC; 
   height:60px;
   disply:block; 
   box-shadow:0 0 3px #BBB; 
   text-align:center; 
   padding-left:15px;
   margin:0 0 20px; 
   
}
#nav-item a.item-a {
    background-color:#92278f;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 11px;
    height: 24px;
    line-height: 24px;
    margin: 10px 0;
    padding: 0 12px;
    text-shadow:0 0;
    text-decoration:none;
}
#nav-item a.item-a:hover { background-color:#F06EAA; color: #FFF; text-decoration: none; }

#item-l h2 {width:170px; padding:0; float:left; position:relative;top:18px; color:#92278f;}
.item-c {float:left;padding:0 10px; position: relative;top: 8px;}
.item-r {float:left;padding:0 10px;position: relative;top: 8px;}
.item-rr {float:left;padding:0 10px;position: relative;top:8px;}
.item-rrr {float:left;padding:0 10px;position: relative;top:8px;}

/*@groupmain*/
#main-item {
    height:100%;
    margin: 0 auto;
    padding: 20px;
    width: 456px;
    text-align:left;
}
 #main-item a {color:#92278f;text-decoration:none;}
.title-item { margin-bottom:25px;}/*class title*/
.left-colum {width: 260px; position:relative; float:left; }/*colom-left*/
.right-colum {width:180px; float:left; position:relative; left:16px;}/*colum-right*/
/*class footer-item*/
.footer-item {
   display:block; 
   text-align:left;
   top:10px;
   padding-top:5px; 
   border-top:1px solid #CCC;
   position:relative; 
   clear:both;
}


*จากนั้นเขียนในรูปแบบ HTML ตามนี้ครับ เริ่มเขียนโค้ด HTML

การแสดงผลก็จะได้แบบนี้ครับ


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

What Marketing Group?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

We have full power

when an unknown printer took a galley of type and scrambled it to make a type specimen book.

And I have Community

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially :)


Contact

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
website : smallsweb.net



(ความเห็นเพิ่มเติม โดย @ozinepank การที่จะสร้างหน้าเฟสบุ๊คแฟนเพจแบบที่ผมแนะนำนั้น มันค่อนข้างยากมากกกกครับ และเหมาะสำหรับคนที่พอมีความรู้พื้นฐานเรื่องการเขียนโค้ด CSS และ HTML พอสมควร ฉนั้นบ่เข้าใจตรงไหนฝากคอมเม้นไว้ครับ จะมาตอบคำถามให้ครับ และใครที่มีความรู้ดีๆก็แนะนำกันได้เด้อ )



ช่วงโฆษณา : อันนี้เป็นหน้าเฟสบุ๊คที่ผมทำให้ลูกค้าขายของออนไลน์ deeshopping on facebook



ช่วงการกุศล : ผมยินดีสร้างหน้าเพจในรูปแบบนี้ให้ ฟรี โดยมีเงื่อนไขดังนี้

  • หน้านั้นต้องไม่ทำเพื่อการค้าหรือแสวงผลกำไร *ไม่แสวงผลกำไรนั้นแระเขียนซ่ะงง
  • หน้านั้นทำเพื่อประโยชน์ต่อสังคม หรือ ท่านใดคิดว่าพบเห็นหน้าเพจต้องสงสัย ว่า มีประโยชน์กรุณาแนะนำเจ้าของเพจ แจ้งความจำนงขอรับหน้า Template facebook กึ่งสำเร็จรูป ได้น่ะครับ

*แต่ถ้ามาเยอะอาจคัดเลือกครับ เผื่อผมยุ่งๆทำไม่ทัน เอาหน่าา ของฟรีๆ ฝรั่งเค้าทำขายหน้าละ 1,500 บาทเชียวน่ะ

Powered by Blogger.