Nhúng Facebook Message Button vào website

Hướng dẫn này sẽ giúp bạn làm thế nào để nhúng nút facebook messenger vào trong website của bạn. Khi một ai đó nhấn vào nút messenger thì nó sẽ trực tiếp khởi động ứng dụng facebook messenger trên điện thoại di động của họ hoặc kích hoạt trang web messenger.con nếu họ dùng trình duyệt trên desktop. Bạn có thể lựa chọn cách nhận tin nhắn trong hồ sơ facebook của bạn.

Đăng nhập Facebook với PHP và MySQL

Ngày nay, người dùng web thường ít quan tâm đến việc điền vào các biểu mẫu đăng ký trên trang web của bạn, họ thường tích hợp sẳn một ứng dụng đăng ký, đăng nhập bằng một tài khoản của trang mạng xã hội như facebook hay google. Trước đây, chúng tôi có hướng dẫn cách đăng nhập facebook bằng Javascript SDK, tiếp tục hướng dẫn này sẽ giúp bạn làm thế nào để thực hiện đăng ký và đăng nhập với Facebook bằng PHP và lưu trữ các thông tin người dùng vào cơ sở dữ liệu MySQL. Nó rất hữu ích và đơn giản để tích hợp vào ứng dụng web của bạn.

Đăng nhập Facebook sử dụng JavaScript SDK

Với Facebook API bạn có thể dễ dàng thu thập các thông tin cơ bản cần thiết như: họ tên, ngày sinh, địa chỉ email, giới tính,.. từ người dùng khi họ đăng nhập Facebook. Và dưới đây là một ví dụ lấy thông tin facebook sử dụng Facebook Javascript SDK, nhưng trước tiên bạn xem demo bằng cách click vào nút đăng nhập dưới đây. Bạn cũng có thể xem hướng dẫn login facebook bằng PHP và MySQL.

Bộ sưu tập Biểu tượng cảm xúc Facebook

Dưới đây là một tập hợp các biểu tượng cảm xúc facebook, với những biểu tượng cảm xúc này bạn có thể được sử dụng để cập nhật trạng thái và Chat  trên facebook. bằng cách nhấp vào biểu tượng icon bất kỳ copy shortcode và sử dụng

1. Biểu tượng cảm xúc khuôn mặt 
2. Biểu tượng cảm xúc tự nhiên 
3. Biểu tượng cảm xúc Object 
4. Biểu tượng cảm xúc Places
5. Biểu tượng cảm xúc đặc biệt

Biểu tượng cảm xúc khuôn mặt

Biểu tượng cảm xúc tự nhiên

Biểu tượng cảm xúc Object

Biểu tượng cảm xúc Places

Biểu tượng cảm xúc đặc biệt

Hướng dẫn Responsive cho Plugin Comment Facebook

Có nhiều bạn hỏi mình làm thế nào để khung Comment của facebook co giản theo trình duyệt. Rất đơn giản Chỉ cần thêm đoạn CSS dưới đây:

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}

Plugin Comment:

<div class="fb-comments" data-colorscheme="light" data-href="http://www.nhatchanh.info" data-numposts="10" data-width="100%">

Xem thêm: Responsive YouTube Embed

Chỉ vậy thôi là nó đả co giản theo trình duyệt rồi đấy :D. Chúc thành công!

Nút chia sẽ Facebook để mở khóa nội dung Ẩn bằng cách sử dụng jQuery và Facebook API

Với tiện ích này, đọc giả buộc phải chia sẻ địa chỉ (url) của bạn lên facebook để có thể thấy được nội dung đả ẩn bên trong nút chia sẻ (share facebook), điều này sẽ góp một phần nhỏ giúp cho bạn có thêm lưu lượng truy cập từ facebook. Và với chỉ với vài dòng code dưới đây bạn sẽ dễ dàng thực hiện được chức năng hiển thị một nội dung nào đó khi người dùng nhấn vào nút chia sẻ lên facebook. Bạn cũng có thể xem thêm cách sử dụng đối với Twitter.

Demo chia sẻ Facebook để mở khóa nội dung

Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa

Mở khóa nội dung ẩn bằng cách chia sẻ lên facebook

- Bước 1: Trước tiên, để thực hiện chức năng này, bạn cần đăng ký và tạo một App tại https://developers.facebook.com/ để lấy App ID
- Bước 2: Sau khi bạn có được AppID, việc tiếp theo là Thêm đoạn mã dưới đây vào Mẫu (template) của bạn, tốt nhất nên đặc nó trước thẻ </body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=212550605589620&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Thay đoạn appId màu đỏ thành appId của ứng dụng của bạn

- Bước 3: Tiếp theo, đặt đoạn javascript dưới đây vào bấc cứ nơi nào trong bài viết của bạn
Ở đây, ta sử dụng Facebook's Feed Dialog nó cho phép người dùng xuất bản những thông tin như: liên kết, hinh ảnh, mô tả,.. của một địa chỉ (url). Để biết thêm có thể vào đây để tham khảo thêm.

<script type="text/javascript">
function shareOnFB() {
  var e = {
    method: "feed",
    link: "http://nhatchanh.info",
    picture: "https://farm4.staticflickr.com/3914/14601901546_3a8dfd5d32_b.jpg",
    name: "NhatChanh's Blog | Chia sẽ Thủ thuật - Blogger - Tutorials",
    caption: 'nhatchanh.info',
    description: "NhatChanh.Info là một blog chia sẽ các thủ thuật liên quan đến việc sử dụng Blogspot"
};
FB.ui(e, function(t) {
    if (t["post_id"]) {
      //Sau khi chia sẻ thành công, nội dung cần hiển thị của bạn ở đây
      var secret_data = "<h2>Cảm ơn bạn đã quan tâm!<br />Hy vọng bài viết này sẻ làm bạn hài lòng!<br />Chúc bạn thành công ^^</h2>";
      jQuery("#results").html(secret_data);
    }
  })
}
</script>

- Thay đoạn màu đỏ phía trên theo ý đồ của bạn
- Thay đổi các thuộc tính
         link: địa chỉ blog của bạn
         picture: hình ảnh cần hiển thị
         name: tiêu đề cần hiển thị
         caption: địa chỉ blog của bạn
         description: đoạn mô tả ngắn cho blog của bạn

- Bước 3: Sử dụng, để sử dụng chỉ cần thêm thuộc tính onclick="shareOnFB();" vào thẻ bạn cần sử dụng

<div id="results">
    <div style="text-align:center; color:#FF0000;">
        Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa
        <br /><br />
        <img onclick="shareOnFB();" style="cursor:pointer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMayMw9wOwsKc1sCu4Xi8v73vrl2P06Ed2zWkMlnkc1gLcmgTMSn_B2OAF4FodUrmozQIO-kNDczz75wK_lawef3ibH36bCUb5MvxI1_F0AsWXEmdYoJIwjsJ6k3-1eiXX_OzXjwfqMFN/s1600/fbshare.png">
    </div>
</div>

Bạn nên chú thích một vài chữ ngắn gọn để đọc giả của bạn biết như: Nội dung đã khóa! Vui lòng bấm vào chia sẽ để mở khóa!

Vậy là xong, hy vọng với tiện ích nhỏ này sẽ làm bạn hài lòng! Chúc vui vẽ ^^

[TwitterFeed] Tự động chia sẽ bài viết lên Mạng xã hội Facebook, Twitter,...

Để góp phần tăng lưu lượng truy cập vào blog của bạn, cách đơn giản mà hiệu quả và dễ thực hiện nhất đó là mỗi khi xuất bản một bài viết mới thì việc cần làm là chia sẽ nó lên các trang mạng xã hội như Facebook, Twitter, Google Plus,... Có nhiều cách để chia sẽ, có lẽ phần đông vẫn dùng cách thủ công truyền thống là tự tay mình post lên mạng xã hội để chia sẽ với bạn bè, người thân. Hôm nay, mình xin giới thiệu một công cụ giúp bạn thực hiện điều này một cách tự động đó là TwitterFeed.

TwitterFeed tự động chia sẽ bài viết lên facebook, twitter, linkedin, App.net

TwitterFeed là một công cụ giúp người dùng tự động chia sẻ nội dung website hay blog lên các trang mạng xã hội như facebook, twitter,... Với sự trợ giúp của Twitterfeed, bài viết của bạn sẽ nhanh chóng được chia sẽ trên facebook, twitter,... chỉ sau vài phút, nó hoạt động bằng cách dựa vào nguồn cấp dữ liệu RSS. Rất tiện lợi cho ta phải không nào! Để áp dụng nó cho blog của bạn, cực kỳ dễ dàng và rất nhanh chóng với các bước đơn giản dưới đây:

[TwitterFeed] Tự động chia sẽ bài viết lên mạng xã hội

- Để sử dụng dịch vụ chỉ cần đăng ký một tài khoảng tại twitterfeed.com (Nếu lười đăng ký tài khoản mới, bạn cũng có thể đăng nhập nhanh bằng các tài khoản như Google, Yahoo, LinkedIn,... mà twitterfeed hỗ trợ)

- Sau khi đăng nhập vào twitterfeed thành công, bạn sẽ được chuyển đến dao diện như hình dưới:

Tại đây bạn cần cung cấp Feed Name và Blog URL or RSS Feed URL
     + Feed Name: Nhập tên gì cũng được
     + Blog URL or RSS Feed URL: Cung cấp địa chỉ Blog hoặc địa chỉ RSS Feed của bạn.
Sau đó nhấn vào test rss feed để kiểm tra nếu kết quả là Feed parsed OK là đả thành công

- Mục Advanced Settings để thiết lập một số tính năng nâng cao khác: (Bạn có thể bỏ qua bước này)

     + Update Frequency: Kiểm tra bài viết mới (thời gian cập nhật tối thiểu là 30 phút) và tối đa cho phép hiển thỉ 5 bài viết trong một lần.
     + Post content: Tùy chọn về hiển thị tiêu đề + mô tả và lựa chọn dịch vụ rút gọn link (liên kết) như TinyURL, bit.ly, dot.tk,...
     + Ngoài ra còn có các mục Post Sorting, Post Prefix, Post Suffix, Keyword Filter theo mình cứ để mặt định

- Sau khi thiết lập xong, nhấn vào Continue to Step 2 để chuyễn sang bước tiếp theo
Tại đây nó sẽ cho ta chia sẽ với các trang mạng xã hội như Facebook, Twitter, Linkedin, LinkedIn Company Page, App.Net

- Kết nối lần lượt các tài khoản mạng xã hội mà bạn muốn chia sẽ bài viết lên đó

Kết nối tới facebook

- Sau khi kết nối các tài khoản muốn chia sẽ, Cuối cùng nhấn All Done! để hoàn tất

Chia sẽ qua Facebook và Twitter

Vậy là xong rồi đấy, kể từ bây giờ mỗi khi xuất bản một bài viết mới thì TwitterFeed sẽ tự động chia sẽ nó lên facebook, twitter,... giúp bạn. Thật tiện lợi phải không nào :D Chúc thành công!

Sau khi xuất bản bài viết, có thể sẽ mất khoản 5, 10 phút gì đấy để nó tự động cập nhật

Làm thế nào để thêm nút Like Facebook vào bài viết cho Blogspot

Chức năng Like facebook là một trong những cách bạn có thể giúp cho bạn chia sẻ bài viết của mình nhanh nhất mà khỏi phải vất vả vào facebook, copy link bài viết, viết giới thiệu bài viết, rồi enter. Các thao tác kể trên được giảm bớt một cách tối đa, chỉ cần nhấn vào nút like được tích hợp sẵn trên blog, bạn có thể giảm bớt số lượng các bước kể trên thành 2 bước, viết giới thiệu và enter.

Tạo nút Like Facebook cho Blogger

Bước 1: Đăng nhập vào Blogger và từ bảng điều khiển đi đến tab Template của blog. Tiếp theo bấm vào "Edit HTML" và kiểm tra "Expand Widget Templates".

Bước 2: Tìm <data:post.body/> và paste đoạn code phía dưới sau khi tùy chọn các thiết lập nằm trước nó.

Button Facebook

Layout:	standardbutton_countbox_count
Action Type:	likerecommend
Color Scheme:	lightdark
Font:	ariallucida grandesegoe uitahomatrebuchet msverdana
Chiều rộng mặt định (Recommended)	: px

Hiển thị trong Blogger

Float:	NoneLeftRight
Hiển thị trong:	Tất cả các trang ngoại trừ các trang tĩnhTrang bài viếtTất cả các trang

Xem trước và Nhận Code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float: none;">
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</div>

</b:if>

Bước 3: Lưu Template của bạn lại và xem kết quả.

Các chức năng:

• Layout: Có 3 kiểu tùy chọn là Standard, button_count và box_count.
• Action Type: Có 2 kiểu hiển thị là  Like or Recommend.
• Color Scheme: Tùy chọn màu sắc của nút.
• Font: Chữ bạn muốn sử dụng.
• Width: Tùy chọn này cho những người dùng muốn thay đổi chiều rộng của nút Like. Nếu bạn không biết độ rộng mặc định theo chuẩn của Facebook thì để nguyên không thay đổi bất cứ điều gì ở đây.
• Show_faces: Lựa chọn để hiển thị hình ảnh hồ sơ cá nhân của bạn bè trên Facebook của bạn, những người đã thích bài viết của bạn. Mặt định là false, nếu bạn muốn thì bạn có thể thay đổi nó thành true nhưng bạn cũng phải thay đổi chiều rộng cho phù hợp.