Hiện bình luận Facebook trên Tabs trong Blogger (phần 1)

Đăng bởi Admin | 18/12/13 | 0 nhận xét

ý kiến facebook tab

Facebook Bình luận plugin đã nhanh chóng thay thế phần thứ ba hệ thống bình luận như Disqus và những người khác. Họ bây giờ cũng được thu thập và chỉ số bởi các robot tìm kiếm. Hướng dẫn đầu tiên của chúng tôi trên hộp ý kiến facebook được đánh giá cao rộng rãi bởi một lượng lớn khán giả và giúp hầu hết các bạn. Hôm nay chúng ta có một cái gì đó thú vị hơn. Nhờ James chúng tôi đã học được một phương pháp mới để hiển thị bình luận facebook trong blog blogger. Chúng tôi sẽ sử dụng một cách tiếp cận khác nhau ở đây và chỉ bằng cách sử dụng mã javascript và mã CSS từ james và giữ các thiết lập khác hoàn toàn khác nhau.

Trong ngày hôm nay chúng ta sẽ học cách để hiển thị cả facebook và ý kiến của các blogger trong tab mà có thể dễ dàng chuyển và bật. Số lượng comment sẽ xuất hiện bên trong các tab với một biểu tượng như vậy cho phép khách truy cập một lựa chọn rõ ràng hơn về ý kiến. Các tab có thể click để hành xử giống như các nút. Các tab hành động giống như hai trang riêng biệt cho phép người sử dụng quyết định hệ thống bình luận để lựa chọn. Các tab được tạo ra bằng cách sử dụng mã JavaScript thông thường được sử dụng để xem chuyển đổi. vô cùng của nó dễ dàng để cài đặt nếu bạn làm theo hướng dẫn này một cách cẩn thận. Tôi chắc chắn rằng hầu hết các bạn đã chờ đợi điều này do đó nó sẽ được vui vẻ chia sẻ nó ngày hôm nay.

Facebook Bình luận

Phần 1: Hiện Facebook bình luận Bên Tabs trong Blogger

Phần 2: Hiển thị Facebook Bình luận Đếm trên trang chủ (Blogger + Facebook)

Par3: Tối ưu hóa Facebook Bình luận Để Tăng Blog giao thông

Tạo ra một Facebook App

Để kiểm soát và giữ một bản sao lưu của các ý kiến được thực hiện trên blog của bạn, bạn sẽ cần phải tạo ra một ứng dụng FB. Các bước của việc tạo ra ứng dụng này rất đơn giản. Chỉ cần làm theo các bước đơn giản:

Lưu ý: Facebook đã thay đổi giao diện bố trí của nó để ảnh chụp màn hình có thể nhìn một chút khác nhau từ giao diện hiện tại. Các bước chính xác như nhau.

Để phát triển Facebook Trang
Gửi URL blog của bạn và cung cấp cho nó một cái tên. Giữ tên trang web của bạn như "Blog Title" và trang web URL là "địa chỉ blog của bạn"

3. Nhấn "tạo ra ứng dụng" nút và tiến hành
4. Sau khi nộp mã kiểm tra an ninh , bạn sẽ thấy trang này, 5. Tiết kiệm mà FACEBOOK APP ID trong một notepad bởi vì chúng tôi sẽ cần sau này. Click vào liên kết ở góc trên bên phải của cùng một trang mà "nói Lựa " 6. Một cửa sổ mới xuất hiện nhấp vào Chỉnh sửa Cài đặtliên kết, 7. Sau đó đi đến trang web lựa chọn và viết của bạn trang web tên miền nhưblogspot 8. Lưu thay đổi và chuyển sang bước tiếp theo của hướng dẫn này
ứng dụng-id

Tạo Tabs Đối với Facebook Bình luận trong Blogger

Cho ý kiến blogger để hiển thị bên cạnh ý kiến facebook tab, thiết lập hình thức comment blogger của bạn phải được thiết lập để nhúng vào bài viết. Để hiển thị bình luận bên dưới bài viết blogger làm điều này:

Đi Blogger> Cài đặt> Bình luận
Thiết lập "Comment Form Placement" để nhúng vào bài viết

Bây giờ làm theo các bước đơn giản từng người một:

Đi Blogger> Thiết kế> Chỉnh sửa HTML
Sao lưu mẫu của bạn
Nhấp vào "Mở rộng tiện ích mẫu" hộp
Tìm kiếm <head>
Ngay bên dưới nó thêm đoạn mã sau:

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/> <meta content='FACEBOOK APP ID' property='fb:app_id'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>

    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(".comments-tab").addClass("inactive-select-tab");
      $(selectTab).removeClass("inactive-select-tab");
      $(".comments-page").hide();
      $(selectTab + "-page").show();
    }
    </script>

Thay thế Blog LOGO Hình ảnh Liên kết với các liên kết hình ảnh của logo blog của bạn. Kích thước logo của bạn nên được làm nhỏ như 30px 30px bởi kích thước. Nếu bạn không muốn một biểu tượng để hiển thị bất cứ khi nào ai đó chia sẻ bình luận của bạn trên tường của mình sau đó chỉ cần xóa các màu vàng nổi bật đang .
Thay thế FACEBOOK APP ID với facebook ứng dụng Id số mà bạn được yêu cầu ghi lại. Bạn có thể tìm ứng dụng Facebook ID của bạn trong trang cài đặt của ứng dụng mà bạn đã tạo trước đó.

6. Tìm kiếm <html và thay thế nó bằng đoạn code sau đây:

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Lưu ý: Cho một không gian ở cuối của các mã trên.

7. Tiếp tục tìm kiếm: ]]> </ b: skin>, và chỉ trên nó, dán mã CSS sau:

/*--- Tabbed Facebook Comments By MBT ----*/

.comments-page { background-color: #f2f2f2; width:450px;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

Để thay đổi màu nền của tab khu vực nội dung chỉ cần chỉnh sửa # f2f2f2
Để thay đổi độ rộng của hộp bình luận thay đổi chứa width: 450px;

8. Tìm kiếm tiếp: <div class='comments' id='comments'>

Sau khi xảy ra đầu tiên của mã có sẵn trên dán mã này:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcbSogfGGAQXauGTaoEN_rdHkuz3Zg_FvbWN84j6Z9AFEcBdUeKmFYE0CaZlCGNyP1JRLSPUJAgoP70BN_CH9HgCS9XYBFI3mLb3r5D9RCF2pOi5-X0FvMVo43y3uBS1SG0qCcOHDZw5M/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments </div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/>
</div>

    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == "item"'>
       <div id='fb-root'/>

       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px;width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>

</b:if>
     </div>

Lưu ý: Nếu đoạn mã trên đã lỗi sau đó xóa các màu đỏ nổi bật dòng từ các mã trên.

Để thay đổi độ rộng của kích thước hộp bình luận thay đổi giá trị số width = '450 ' .Giữ cho nó bằng với chiều rộng của container hộp bình luận, chúng tôi thiết lập trước đó trong bước # 7.
Để thay đổi kích thước các khoản tín dụng cuối trang (như Facebook Bình luận của blogger Widget), thay đổi giá trị này width: 440px
Giữ một sự khác biệt của 10 pixel giữa kích thước hộp bình luận và kích cỡ chân. Ví dụ, nếu bạn thiết lập comment hộp kích thước chiều rộng = '450 ' sau đó đặt chân-kích thước chiều rộng: 440px
Để thay đổi các văn bản bên trong tab sửa Bình luận cho Facebook Tab và Bình luận cho Blogger Tab

9. Lưu mẫu của bạn và bạn đang làm tất cả!

Ghé thăm blog của bạn để xem nó làm việc tốt. :)

Lưu ý: Nếu bạn đã kích hoạt blogger luồng ý kiến thì Tabs sẽ hiển thị khi có ít nhất một bình luận được đăng trong blogger

Vừa phải nhận xét

Để đánh dấu bất cứ bình luận là thư rác hoặc xóa / ẩn bất kỳ bình luận bạn cần phải đăng nhập vào tài khoản facebook của bạn và sau đó truy cập trang này:

Facebook/tools/Comments

Bạn có thể vừa tất cả các ý kiến cùng một lúc mà không ghé thăm mỗi bài viết trong blog của bạn và điều hòa cảm nhận riêng cho mỗi bài viết.

Làm thế nào để cho phép các nhà cung cấp khác Đăng nhập

Với Facebook Plugin bạn có thể chọn để chấp nhận ý kiến ngay cả với Yahoo, Hotmail hay AOL.Chấp nhận bình luận từ các nhà cung cấp phần thứ ba chỉ cần nhấp vào liên kết Settings trên Facebook hộp bình luận bên trong bất kỳ bài viết của bạn và nhấp vào hộp kiểm nói rằng "các nhà cung cấp đăng nhập khác"

Lưu ý: liên kết Cài đặt hoặc Moderator xem sẽ chỉ xuất hiện trên bài viết mới mới hoặc bài viết với ít hơn 2 ý kiến Facebook đăng. Có mũi để làm cho một thiết lập một thời gian, chỉ cần truy cập bài mới của bạn và chỉnh sửa nó từ tab facebook.

Chúc bạn thành công !...

Theo: mybloggertricks.com

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

18/12/13