Đă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

Pinterest - Chèn nút "Pin it" cho hình ảnh trên blog của bạn

Pinterest là một trang mạng xã hội chia sẻ hình ảnh, thông qua Pinterest người dùng có thể chia sẻ những bức ảnh và sắp xếp chúng thành những bản tin khác nhau. Với mỗi hình ảnh đưa lên đều cho phép gắn liên kết trỏ về website và liên kết này có giá trị rất cao về cả traffic và backlink. Vì vậy chèn nút Pin it vào ảnh cho blog sẽ rất có lợi cho SEO. Hôm nay, pnc sẽ hướng dẫn cách chèn nút “Pin it” tự động cho từng bức ảnh trong blog của bạn.

• Cách 1: Sử dụng công cụ Shareaholic
• Cách 2: Sử dụng javascript
• Cách 3: Sử dụng Widget builder của Pinterest

Cách 1: Sử dụng công cụ Shareaholic

Nếu bạn đã sử dụng các công cụ Shareaholic, hãy làm theo các bước đơn giản dưới đây để thêm nút Pin it vào hình ảnh (Nếu bạn chưa có tài khoản Shareaholic thì có thể đăng ký tại đây)
1. Đăng nhập vào tài khoản Shareaholic của bạn.
2. Nhấp vào Setting biểu tượng ở góc trên bên phải (hoặc click vào đây).
3. Bấm vào nút Site Tools
4. Tiếp theo, nhấn vào nút +Add Website để thêm blog của bạn và nhấn Continue

• DOMAIN: Địa chỉ blog của bạn
• NAME: tên blog của bạn
• FLATFORM: chọn nền tảng Blogger
• CONTENT CATEGORY: nội dung blog bạn chia sẻ
• CONTENT LANGUAGE: Ngôn ngữ

- Xác minh trang web của bạn bằng cách chèn đoạn mã dưới đây vào trước thẻ </head> trong mẫu của bạn (thay đổi đoạn màu đỏ bằng Site ID của bạn) và nhấn Verify Site để xác minh

<meta name='shareaholic:site_id' content='ca08ce11cc98198581a18ece230ab4e2' />

- Tiếp theo, chọn Setting

- Chuyển sang tag Sharing và đánh dấu chọn Shareable Images

- Bấm Save Settings để các cài đặt có hiệu lực
- Cuối cùng, bấm vào nút Get Setup Code và copy đoạn code nó cung cấp

- Vào Blogspot >> Bố cục >> Thêm tiện ích >> HTML/Javascript và Paste(dán) đoạn mã vừa copy ở bước trên vào Lưu lại (hoặc vào Mẫu >> Chỉnh sửa HTML và dán đoạn mã vào trước </body>)

- Xem kết quả, nếu hình ảnh trên blog của bạn xuất hiện nút "Pin it" như hình dưới đây là bạn đả thành công

Chú ý:
- Để nút "Pin it" xuất hiện, hình ảnh trên blog của bạn phải có kích thước tối thiểu 120x80 pixel
- Nút "Pin it" sẻ không xuất hiện khi bạn duyệt blog bằng thiết bị thông minh như điện thoại di động hoặc máy tính bảng
Mẹo:
- Bạn có thể vô hiệu nút "Pin it" cho bất kỳ hình ảnh nào bằng cách thêm

<img src="foo.jpg" nopin="nopin" />

- Và để vô hiệu nút "Pin it" cho tất cả hình ảnh trên trang bằng cách thêm meta tag dưới đây vào trước thẻ </head>

<meta name="pinterest" content="nopin" />

Cách 2: Thêm nút "Pin it" cho hình ảnh với javascript

- Để thêm nút "Pin it" cho hình ảnh chỉ cần: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML thêm đoạn mã dưới đây vào trước thẻ </body> và Lưu lại

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhauiR7y3NrCbyVwaUHJNNCqmhHUTrv34zJN-4C6WYlLCBuJ0JuVWwYZoaOgwM6uC-uTH_HiVMRQsfvRy6owZuRckfSpuo6mQviOinSmULi8j009QNkD2lR1Kl1lL-2xdbivL7ucXI1d7S/s1600/pinit-button.png"; // Nút Pin it
var pinit_button_position = "center"; // Vị trí nút Pin it (topleft,topright,center,bottomleft,bottomright)
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='https://nhatchanh.googlecode.com/svn/blog/pinterest-button.js' type='text/javascript'>
</script>

Bạn có thể vô hiệu nút "Pin it" cho bất kỳ hình ảnh nào bằng cách thêm class="nopin" cho thẻ <img>

<img src="foo.jpg" class="nopin" />

Cách 3: Sử dụng Widget builder của Pinterest

- Trước tiên, truy cập vào địa chỉ: https://business.pinterest.com/en/widget-builder#do_pin_it_button
- Tại phần Button Type chọn tag Image Hover Chỉnh sửa kiểu dáng nút Pin it ở phần Appearance và rê chuột qua ảnh ở phần Preview để xem kết quả hình ảnh nút Pin it!

- Sau khi ưng ý với kết quả vừa chỉnh sửa, copy đoạn mã Pinterest cung cấp
- Đăng nhập Blogger >> Mẫu >> Chỉnh sửa HTML và Paste(dán) nó vào trước </body> >> Lưu mẫu

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" defer="defer" data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

- Thêm async="async" defer="defer" như đoạn code trên để Lưu mẫu không bị báo lỗi
- Thêm thuộc tính nopin="nopin" cho thẻ hình ảnh <img> nếu không muốn hiển thị nút Pin it

<img src="foo.jpg" nopin="nopin" />

Tweet mở khóa nội dung ẩn sử dụng jQuery & Twitter API

Cũng giống như facebook, chia sẻ nội dung thông qua twitter là một trong những cách tuyệt vời để thúc đẩy lượng truy cập đến blog của bạn, góp phần tăng lưu lượng truy cập đến trang blog của bạn. Tương tự như bài chia sẽ Facebook để mở khóa nội dung Ẩn bằng cách sử dụng jQuery và Facebook API hôm nay xin chia sẽ cho bạn cách làm thế nào để tạo ra một Tweet đơn giản để mở khóa nội dung ẩn bằng cách sử dụng jQuery & Twitter API. với chức năng này sẽ cho phép đọc giả chia sẻ nội dung hay một thông điệp của bạn lên twitter và sau khi chia sẻ thành công, sẻ hiển thị nội dung ẩn mà bạn muốn chia sẻ cho họ.

- Xem Demo dưới đây:

Xem Demo

Xem thêm: Chia sẻ lên Facebook để mở khóa nội dung được ẩn sử dụng jQuery và Facebook API

- Bước 1: Thêm đoạn javascript dưới đây template của bạn (nên đặt trước thẻ </body>)

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

- Bước 2: Thêm doạn mã dưới đây vào template:

<script type="text/javascript">
twttr.events.bind(
'tweet',
function (event) {
var secret_data = "<center><strong>Nội dung cần hiển thị!</strong></center>";
  jQuery("#results").html(secret_data);
  }
);
</script>

Khai báo thư viện jQuery (nếu template của bạn chưa có thì paste nó sau thẻ </head>)

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' />

- Bước 3: Đặt đoạn mã HTML dưới đây vào bất kỳ nơi nào trong trang của bạn. Có rất nhiều kiểu hiển thị nút tweet cho bạn, xem thêm tại: https://dev.twitter.com/web/tweet-button

<div id="results">
  <a class="twitter-share-button" href="https://twitter.com/share"
   data-via="tv0656m006" data-text="Chia sẻ thủ thuật Blogger/Blogspot,..." data-size="medium" data-url="http://nhatchanh.info" data-count="vertical">
Tweet</a>
</div>

Thay đổi các dữ liệu:
        data-via="địa chỉ tweet của bạn"
        data-text="mô tả về blog của bạn"
        data-url="địa chỉ trang blog của bạn"

Hy vọng tiện ích này sẻ làm bạn thích, Chúc thành công!

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ẽ ^^