Làm thế nào để nhúng Video vào Fan Page tab ? Đó có lẽ là thủ thuật Facebook mà nhiều người muốn biết nhằm làm cho Fan page của mình thêm sinh động và phong phú hơn. Đây là một thao tác khá dễ dàng mà bất cứ ai dù biết hay không biết rành về IT hay coding cũng có thể thực hiện được.

Hãy thử tưởng tượng thế này nhé, bạn đang xây dựng một Fan page cho tổ chức của mình và thay vì tạo ta một Tab (sử dụng Static FBML) có bài viết giới thiệu dài dòng bạn muốn nhúng thẳng một Video Clip thật sinh động vào đó, bạn sẽ thực hiện ra sao ? Cùng mình thực hiện từng bước sau đây nhé.

Đưa Youtube Video vào Facebook Fan page:

Bước 1: Truy cập Fan Page của bạn và Click “Edit Page”.

Bước 2: Kéo thanh cuộn trình duyệt xuống gần cuối trang, và click vào mục Static FBML dưới phần “More Applications”. Click “Add to my Page” và chọn Fan page mà bạn muốn add.

Bước 3: Sau khi đã thêm ứng dụng FBML vào fan page, bạn hãy quay trở lại trang chính của fan page và lại click vào ” Edit Page” ở bước 1. Kéo xuống dưới và tìm mục FBML mà giờ đây đã xuất hiện như trong hình dưới.

Bước 4: Click  Vào “Edit Setting” và “Add”. Như vậy là bạn đã thêm 1 FBML tab trống vào list các tab tại Fan page của mình. Công việc tiếp theo là customize tab này. Đây cũng sẽ là Tab mà bạn sẽ nhúng Video vào.

Bước 5: Click “Go to Application”, bạn sẽ được đưa đến 2 ô để nhập tên Tab và Code nhúng Video.

Video minh họa từ bước 1 đến bước 5

Bước 6: Nhúng Code. Cả nhà xem đoạn code mẫu dưới đây nhé:

Các bạn thay giá trị xxxxxxxxxxx bằng con số kí hiệu của Video Clip mà Youtube cấp cho mỗi Clip. Ví dụ: http://www.youtube.com/watch?v=L5OnNhYSLdc

Trong trường hơp gặp lỗi do dính format copy từ bài viết này, bạn hãy download đoạn code mẫu trong link sau đây nhé: Code chèn Video Youtube vào Fan page Tab

Đừng vội dùng Code ! Đọc tiếp đến hết phần này nha các bạn. Chú ý:

Giá trị &autoplay=1 phía sau link của video trong thẻ “swfsrc=” có nghĩa là Video sẽ chạy khi có click chuột. Ngoài ra, các bạn có thể thay thế hoặc thêm ngay sau đó  tùy thích) giá trị này bằng &start=x với x là số giây mà bạn muốn Video sẽ bỏ qua từ lúc Video bắt đầu chạy, ví dụ  start=30 nghĩa là video của bạn sẽ bắt đầu từ giây thứ 31 trở đi.

Bước 7: Thưởng thức kết quả hehe !

Video sẽ được hiển thị  mặc định bằng một tấm hình đại diện của Video mà bạn thấy ở một đoạn URL trong phần code trên: imgsrc=’http://img.youtube.com/vi/xxxxxxxx/0.jpg’. Bạn chỉ cần thay xxxxxxx bằng giá trị mà Youtube gán cho Clip. Đây là yếu tố mà Facebook bắt buộc bạn phải có để  chắc chắn rằng khi có tác động click của người dùng “hắn” mới cho phép load video, nếu không bạn sẽ chỉ thấy một nền trắng toát và khi rê chuột lên khu vực mà bạn đoán là có video thì con trỏ mới thể hiện bàn tay để Click.

Mẫu Code để ở trên sử dụng hình ảnh mặc định của Youtube nhưng bạn có thể sử dụng một hình ảnh khác mà mình đã up lên một dịch vụ lưu trữ ảnh khác. Điều này giúp cho phần trình bày của bạn sáng tạo hơn nhiều. Tuy nhiên bạn nên cho một câu vào phía dưới phần Video là Click to Play để người dùng không bị bỡ ngỡ.

Các bạn có thể thêm thắt câu chữ xung quanh Video bằng việc trình bày nội dung trong một ô Editor của WordPress hoặc Yahoo 360 Plus rồi view dưới dạng HTML và copy đống code đó, paste sang ô FBML, đặt phía trên hoặc dưới đoạn mã nhúng Video ở trên.

Click để xem hình lớn

Trong trường hợp bạn muốn embed một album video (bao gồm tập hợp list nhiều video) vào Facebook fan page tab thì trước hết phải tạo list album bằng cách vào đường dẫn sau youtube.com/custom_player. Sau khi làm theo các bước hướng dẫn của Youtube, bạn sẽ được cấp một đoạn code cho album cùa mình. Tách lấy đường dẫn sau trong đám code đó:

Giao diện Youtube Custom Player

Click để xem hình lớn

Sau đó thay URL trong phần swfsrc=’http://…… bằng đường link bạn vừa tách ra từ các dòng code album mà Youtube vừa cấp cho. Trong trường hợp này, bạn phải tự đưa đường dẫn ảnh đại diện do mình chọn vào phần imgsrc=’ của đoạn code.

Thêm Vimeo Video vào Facebook Fan Page Tab

Vậy trong trường hợp bạn muốn nhúng Video từ Vimeo – một nhà cung cấp dịch vụ chia sẽ video khá thông dụng khác thì sao ? Cũng tương tự với cấu trúc code cơ bản như ở trên, tuy nhiên cách tìm ra đường dẫn Video chính xác của Vimeo có khác một chút. Bạn hãy nhấn vào ô Embed trên khung màn mình của Vimeo để một cửa sổ pop up hiện ra.

Click vào “Old Embed Code” và trích lọc đường dẫn của Video theo hình minh họa dưới đây:

Công thức mã nhúng mẫu cho Vimeo:

<fb:swf

swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
swfsrc=’http://vimeo.com/moogaloop.swf?clip_id=1658217&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1′
imgsrc=’http://i870.photobucket.com/albums/ab269/mrthangdotnet/facebook-vsecret.jpg‘ width=’400′ height=’302′ />

Các bạn chỉ cần thay đổi 2 yếu tố được highlight vàng là xong. ID là số hiệu của Clip mà bạn có thể tìm thấy ngay trong đường dẫn URL của Video.

Sau đó bạn đưa đường dẫn đó vào trong đoạn code tương tự như ở phần thêm video từ Youtube vào fan page tab. Sau đó bạn cũng đưa đường link ảnh đại diện (thumbnail) vào phần imgsrc=’ . Cách lấy link Thumbnail mặc định của Vimeo khá phức tạp, liên quan đến một ít kĩ thuật cao, Thắng cũng chưa tìm ra cách lấy đường dẫn mặc định này một cách dễ dàng nên không dám post, sợ làm mọi người rối. Chỉ có Youtube là cung cấp đường dẫn mặc định cho Thumbnail một cách dễ dàng.  Ai biết cách thì share Thắng và các bạn với nha.

Nếu lười các bạn có thể sử dụng các hình ảnh cover cho Video của mình do Thắng up dưới đây theo các kích thước của Vimeo:

Vimeo Sizes:

click-to-play-400×300.png

click-to-play-500×375.png

click-to-play-600×450.png

Other Sizes:

click-to-play-560×340.png

click-to-play-560×385.png

Các bạn có thể vào xem Demo mẫu mình làm ở đường Link này:

http://www.facebook.com/mrthangdotnet?v=app_7146470109

Ngoài ra với các dịch vụ hosting video khác, bạn cũng làm tương tự các bước như trên là xong hết. Để làm các thao tác này bạn cần tỉ mỉ, cẩn thận và kiên nhẫn một chút. Nếu bạn nào cảm thấy vẫn còn khó hiểu thì hãy để lại comment contact của bạn ở comment bên dưới nhé, hoặc buzz một phát vào wall facebook của mình (http://www.facebook.com/mrthangdotnet) , mình sẽ hỗ trợ các bạn. Thế là xong, chúc các bạn sẽ có một Fan Page thật hoành tráng nhá ^_^

Mr Thắng@mrthang.net