Hướng dẫn chèn Facebook Author Tag trong WordPress

Cùng với nhiều dịch vụ tiện ích mà Facebook cho phép chúng ta nhúng vào website như Comment, Likebox hay đơn giản như nút Share hoặc like bài viết, thì gần đây Facebook lại cung cấp thêm dịch vụ Author Tag. Đây không phải là một tính năng mới gì, nhưng gần đây nó được cập nhật cho phép Facebook  tag bài viết được chia sẻ trên mạng xã hội này với thông tin author’s Facebook profile.

Để bắt đầu, chúng ta sẽ cần chèn thêm một thẻ input cho phép tác giả chèn thêm đường dẫn Facebook profile URL.
Mở file functions.php của theme mà các bạn đang dùng, rồi chèn thêm đoạn code sau.

function facebook_profile_url($profile_fields) {

    $profile_fields['facebook_url'] = 'Facebook URL';

    return $profile_fields;

}

add_filter('user_contactmethods', 'facebook_profile_url');

Đoạn code trên sẽ chèn thêm một trường nhập liệu vào bên dưới  “Contact Info”. Giờ thì các bạn chỉ cần nhập thêm facebook URL là được, ví dụ như https://www.facebook.com/zuck .

Bây giờ, chúng ta sẽ cần xuất URL ra bên ngoài bên trong thẻ head của theme. Để làm được điều này, thì các bạn chèn thêm đoạn code sau bên trong file functions.php .

function facebook_author_tag() {

    if ( is_single() ) {

        global $post;

        $author = (int) $post->post_author;

        $facebook_url = get_the_author_meta( 'facebook_url', $author );

        if ( ! empty( $facebook_url ) ) {

            echo '<meta property="article:author" content="'. $facebook_url .'" />';

        }

    }

}

add_action( 'wp_head', 'facebook_author_tag', 8 );

Nếu thành công, các bạn sẽ thấy thông tin URL xuất hiện như thế này.

 Nếu các bạn không hiểu gì về code thì có thể sử dụng plugin  Yoast SEO. Đây là một plugin giúp các bạn tối ưu hóa website của các bạn cả về tìm kiếm trên Google cũng như trên mạng xã hội Facebook. Ngay khi các bạn cài đặt plugin này xong , thì các bạn sẽ thấy có một dòng input như  “Facebook Profile URL” và chèn đường dẫn vào là xong.

Auto resize thumbnail bằng css

Khi dùng kỹ thuật css cover art, ảnh dù ở tỉ lệ và kích thước nào cũng sẽ được fix vừa vào khung nhìn thiết kế trước, đảm bảo luôn hiển thị nội dung chính xác và không làm hỏng giao diện.

Kỹ thuật cover ảnh thumbnail này cần thực hiện trên cả HTML và CSS. Trong đó:

• HTML cần dùng 1 thẻ div trống để làm khung hiển thị.  Lưu ý ta không dùng trực tiếp thẻ img, vì nếu dùng img, khi scale ảnh theo tỉ lệ khác với ảnh gốc, ảnh sẽ bị méo/lệch trông rất xấu!
• CSS tự động resize ảnh, làm cho phần ảnh nền tự động fix vừa theo kích thước khung nhìn (thẻ div làm thumbnail) và căn vào chính giữa nội dung của ảnh. Việc căn giữa để thể hiện nội dung ảnh là mang tính dự đoán và gần như chính xác; do khi chụp ảnh, nội dung chính bức ảnh “thường” được căn vào giữa ảnh, ít thợ ảnh nào lại chụp chân dung với hình cô gái ở góc bức ảnh!

Thực hiện

Code HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="news">     <div class="article">         <div class="thumb"></div>         <div class="title">Tiêu đề bản tin.</div>     </div>     <div class="article">         <div class="thumb"></div>         <div class="title">Tiêu đề bản tin</div>     </div>     <div class="article">         <div class="thumb"></div>         <div class="title">Tiêu đề bản tin</div>     </div> </div>

Ở đây tôi tạo thẻ div .news  rộngđể chứa tin, mỗi tin tức .article  được format với thumb ở trên và tiêu đề bản tin ở dưới.

Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.news{     width: 100%;     height: auto;     padding: 5px;     background-color: #e6e6e6; } .article {     width: 200px;     height: 220px;     display: inline-block;     padding: 5px;     margin-left: 10px;     vertical-align:top; } .thumb {     width: 200px;     height: 150px;     background-color: #3e3e3e;     background-image: none;     background-repeat: no-repeat;     background-position: center center;     background-size: cover; }

Hãy chú ý vào phần style cho .thumb . Trọng yếu của kỹ thuật này chính là sử dụng hai thuộc tính background-size  và background-position . Để làm cho ảnh nền tự resize vừa theo kích thước của thẻ div, ta dùng thuộc tính background-size  với giá trị là cover . Sau đó dùngbackground-position  với giá trị center  để căn giữa ảnh vào khung nhìn của thumbnail.

Chú ý ở là trong đoạn css của .thumb , tôi đặt giá trị background-image  là none ? Do class.thumb  được dùng lại cho nhiều bản tin khác nhau, ta không thể set cứng cùng một hình ảnh được. Ta cần để lại phần set hình ảnh bằng cách nhúng trực tiếp trong code HTML. Sửa lại HTML như sau:

1 2 3 4 5 6

<div class="news">     <div class="article">         <div class="thumb" style="background-image: url(http://webfaver.com/thumbnail.jpg);"></div>         <div class="title">Tiêu đề bản tin</div>     </div> </div>

Hoàn thiện khi thao tác với PHP

Khi thao tác bằng PHP, ta có thể code như sau, giả sử đã có dữ liệu trong biến $article :

1 2 3 4 5 6

<div class="news">     <div class="article">         <div class="thumb" style="background-image: url(<?php echo $article->getThumbNail() ?>);"></div>         <div class="title"><?php echo $article->getTitle() ?></div>     </div> </div>

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