Chủ Nhật, 31 tháng 3, 2013

Tạo thẻ cho Fanpage trong face book



Hôm nay vào face tìm cách làm thẻ cho page thì đọc được mấy bài này, đã tạo được một thẻ  và nhận thấy nếu muốn làm tiếp cần có một ít tìm hiểu thêm về html và code. Để lúc nào vọc tiếp vậy. Bạn nào muốn nghịch ngợm với một thẻ như Mục lục ở đây:
Cụ thể bài viết: 

3 bước tạo Static HTML iFrame Tab cho Fan Page [Update]


Thực sự là gần đây mình gặp rất nhiều các câu hỏi của bạn bè về việc làm fan page tab ra sao. Nhiều bạn cảm thấy rất lạ lẫm và hoang mang vơi một số thay đổi tại Static FBML Application của Facebook. Thực sự điều gì đang diễn ra ? Mình mong muốn muốn post bài này để giúp mọi người xóa tan những “thắc mắc biết hỏi ai” như thế này.
Từ trước đến nay, để tạo được các Fan Page Tab theo ý mình bằng HTML, chúng vẫn thường dùng Static FBML Application. Tuy nhiên, chỉ mới đầu tháng 3/2011 vừa qua, Facebook đã tuyên bố sẽ ngưng không phát triển ứng dụng này và chuyển nó sang hình thức iFrame Tab.
Điều này có nghĩa là admin của fan page phải tạo một facebook application sau đó liên kết nó với fan page (add to page). Sau đó viết code HTML, đặt tại hosting của mình. Khi người dùng truy cập fan page tab,  facebook sẽ gọi mã HTML  từ hosting của bạn để hiển thị.
iFram HTML Tab cho Facebook Fan Page
Trong chiến lược dài hạn, Facebook sẽ loại bỏ Static FBML ra khỏi mạng xã hội này. Thắng  chỉ suy đoán (!?) rằng facebook muốn các admin và developer sử dụng iFrame để tránh ảnh hưởng đến framework chung của facebook (một số trường hợp user dùng Static FBML để hack facebook ?!). Tuy nhiên , để trấn an cả nhà, mình xin báo cáo tình hình hiện tại là:
1. Static FBML application đã không thể sử dụng được nữa (không add Static FBML tab vào page được nữa).
2. Với những ai đang dùng Static FBML Tab từ trước thì các tab vẫn được giữ nguyên, không bị ảnh hưởng.
3. Không thể add thêm các Static FBML tab vào fan page nữa. Vì Facebook đã xoá nút “add another fbml box” trong phần edit app của Static FBML tại fan page.
Vậy thì chúng ta phải giải quyến vấn đề thế nào đây ? làm sao để add một iFrame HTML Tab mới vào Fan Page ? Có hai cách, đó là nếu bạn là một coder thì việc tạo và liên kết application với fan page là chuyện quá dễ dàng. Nhưng nếu bạn là một con gà IT như mình thì sao ? Thì bạn nên thực hiện 3 bước đơn giản của thủ thuật facebook sau đây nhé hehe:
Bước 1: Cài đặt Static HTML iFrame Tabs
Bạn truy cập vào Static HTML iFrame Tabs . Kéo xuống dưới, bạn tìm link Add to my Page như hình minh hoa dưới đây:

3 bước tạo Static HTML iFrame Tab cho Fan Page (4)Bước 2: Thiết kế Landing Tab
Sau khi add vào page xong, bạn trở về trang fan page của mình. Nhìn qua bên trái, ngay dưới avatar chính, nơi có nhiều các tab cơ bản như Video, Discussion Board….bạn sẽ thấy có thêm một tab có icon hình ngơi sao 5 cánh có tên là Welcome. Đó chính là Static HTML iFrame Tab mà bạn vừa add vào đầy.
Click vào tab này, bạn sẽ thấy hiện ra màn hình sau:
3 bước tạo Static HTML iFrame Tab cho Fan Page (3)
Giờ đây bạn có thể paste HTML Code, Javascript vào ô edit mà ứng dụng này cung cấp. Sau đó click save và view tab là xong. Khi paste HTML code vào ô này, bạn nhớ tick vào nút Enable FBML nhé.
Ngoải ra, khi bạn còn có thể phân chia ra nội dung mà Fan sẽ thấy và nội dung mà Non-Fan sẽ thấy, y hệt như thủ thuật Ẩn hiện nội dung cho Fan Page tab mà có lần mình đã chia sẻ. Chỉ có điều là với ứng dụng mới này, bạn sẽ dễ dàng điều chỉnh và thiết kế vì 2 ô FBML được phân tách ra hẳn hoi.
3 bước tạo Static HTML iFrame Tab cho Fan Page (2)Cơm thêm: Tên mặc định của tab bạn vừa add vào là “Welcome”, nhưng chắc chắn bạn sẽ muốn đổi tên này sang một cái tên khác thuần Việt hơn đúng không.  Bạn hãy vàoEdit Page > Click App (cột trái) > kéo xuống dưới tìm đến iFrame tab> Click Edit Setting > Lúc này bạn có thế thay đổi tên tab tuy hỉ nhé hehe.
3 bước tạo Static HTML iFrame Tab cho Fan Page (1)
Các bạn lưu ý, các hình ảnh add vào tab này cần có độ rộng tối đa (max width là 520 px). Dưới đây là một số code mẫu mà bạn có thể sử dụng thử để chèn vào:
1234567891011121314
<style type='text/css'>
#wrapper {
width:520px;
height:500px;
margin:0 auto; border:0; padding:0;
position:relative;
}
</style>
<div id="wrapper">
<div style='width:520px;'>
<img src='[Insert Image URL Here]' /> <!-- This image will be displayed to fans -->
<!-- You can also add any HTML that you want displayed to fans -->
</div>
</div>
Bạn có thể chèn thử đoạn code này vào box đầu tiên trên tab welcome
1234567891011121314
<style type='text/css'>
#wrapper {
width:520px;
height:500px;
margin:0 auto; border:0; padding:0;
position:relative;
}
</style>
<div id="wrapper">
<div style='width:520px;'>
<img src='[Insert Image URL Here]' /> <!-- This image will be displayed to fans -->
<!-- You can also add any HTML that you want displayed to fans -->
</div>
</div>
view rawFirst BoxThis Gist brought to you by GitHub.
Bạn có thể chèn code này vào box thứ 2 trên tab welcome
Bước 3: Làm sao add thêm tab cho fan page ?
Đây cũng là vấn đề chúng ta cần giải quyết luôn. Khi bạn đã add được một tab cho fan page bằng ứng dụng mới này, bạn sẽ muốn add thêm tab thứ 2, thứ 3…..Làm thế nào đây ? Ứng dụng Static HTML iFrame Tab cho bạn add tối đa 12 tab. Bạn chỉ cần truy cập đường link sau:
……..
cứ thế tiếp tục thay thế con số bằng tiếng anh trong đường dẫn cho tới 12 (twelve) sau đó lại tiếp tục add to fan page như lầ đầu dùng app này.
Rùi ! khi đã định hình được cách add tab vào fan page, giờ đây bạn cần có một trình thiết kế HTML để viết mã như phần Editor (Vew HTML) của WordPress, Yume, Yahoo 360 Plus…Bạn cứ edit, chèn hình ảnh, video, format chữ…rồi chuyển sang view HTML để lấy code là xong. Nếu muốn thiết kế chuyên nghiệp và tinh vi hơn, bạn có thể sử dụng Adobe Dreamweaver cho nó pro hehe. Dưới đâu là Tutorial Video minh hoa cho những gì mình đã hướng dẫn các bạn ở trên.
Vậy là mọi thứ đã rõ ràng rồi đúng không cả nhà. Facebook có tốc độ phát triển và thay đổi rất nhanh dựa trên tiêu chí giúp  mọi người liên kết và chia sẻ với thật nhiều người xung quanh mình, vì vậy chúng ta cũng phải linh hoạt chạy theo những thay đổi của nó. Nếu có những thắc mắc nào khác, mọi người có thể comment và đặt câu hỏi ở dưới đây nhé. Chúc cả nhà sử dụng facebook vui khoe nha ^_^.