Thêm nút Pin vào website (Pinterest)

Thêm nút Pin vào website (Pinterest)

 

Thêm nút “Pin it” của Pinterest thủ công

Đầu tiên bạn cần làm là dán đoạn mã sau vào file footer.php của bạn ngay trước thẻ </body>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
&lt;script type="text/javascript"&gt;
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
&lt;/script&gt;

Sau khi bạn làm xong điều đó bạn hãy thêm đoạn mã(hiện nút Pin) dưới đây vào vị trí nào bạn muốn.

1
2
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

Đoạn mã trên được thiết kế cho nút chia sẻ thẳng đứng. Nếu bạn muốn đặt nút chia sẻ ngang, chỉ cần thay đổi thuộc tính “count-layout” để nút “Pin it” nằm ngang. Mình hy vọng là bạn sẽ thích thủ thuật này của mình.

1. Cách thêm Pinterest cho Blogger:

– Đăng nhập vào phần quản trị tài khoản
– Vào Design -> Edit HTML -> đánh dấu vào mục Expand Widget Templates

Tìm đoạn sau:

1
<data:post.body/>

Thêm vào bên dưới:

1
2
<a href="http://pinterest.com/pin/create/button/" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Bạn có thể thay đổi hình dáng của nút bằng cách thay đổi thuộc tính count-layout thành veritcal (dọc) hoặc none (không đếm). Lưu lại và chiêm ngưỡng thành quả của bạn

2. Cách thêm Pinterest cho WordPress:

– Để tránh bị lỗi do quá trình thay đổi code các bạn nên backup 2 file footer.php và single.php trước
– Mở file footer.php và thêm vào đằng trước thẻ:

1
</body>

đoạn code sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
(function() {
window.PinMe = window.PinIt || { loaded:false };
if (window.PinMe.loaded) return;
window.PinMe.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

– Lưu lại và tiếp tục mở file footer.php tìm đến mục mà bạn cần chèn nút Pinterest vào hoặc đoạn có các mạng xã hội khác chèn đoạn code sau vào:

1
2
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" count-layout="vertical">Pin It</a>

– Lưu lại và kiểm tra thành quả của mình nhé

3. Cách thêm Pinterest vào Thesis theme:

– Đầu tiên hãy backup file custom.php trước để tránh bị lỗi do quá trình sửa code.

* Nếu bạn đang sử dụng chức năng “Feature” của Thesis thì làm như sau:
– Mở file custom.php và thêm đoạn này vào:

+ Nút theo chiều ngang:

1
2
3
4
5
6
function pinterest_post_page_pin_horiz() {
global $post;
/* HORIZONTAL PINTEREST BUTTON */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_horiz' );

+ Nút theo chiều dọc:

1
2
3
4
5
6
function pinterest_post_page_pin_vert() {
global $post;
/* VERTICAL PINTEREST BUTTON */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_vert' );

+ Nút không có số lượng pin:

1
function pinterest_post_page_pin_no_count() { global $post; /* HORIZONTAL NO-COUNTER PINTEREST BUTTON */ printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) ); } add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_no_count' );

* Nếu bạn đang sử dụng chức năng “Teaser” của Thesis thì làm như sau:
– Mở file custom.php và thêm đoạn này vào:

1
2
3
4
5
function pinterest_teaser_pin() {
global $post;
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_teaser_headline', 'pinterest_teaser_pin' );

4. Cách thêm Pinterest vào Genesis theme:

– Mở thư mục theme hiện tại của bạn và tạo file tên là single.php
– Mở file single.php vừa tạo và chèn vào một trong những cách bên dưới đây:

+ Nút Pinterest theo chiều ngang:

1
2
3
4
5
6
7
8
9
10
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
 
/** Horizontal */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
 
}
 
genesis();

+ Nút Pinterest theo chiều dọc:

1
2
3
4
5
6
7
8
9
10
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
 
/** Vertical */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
 
}
 
genesis();

+ Nút không có số lượng pin:

1
2
3
4
5
6
7
8
9
10
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
 
/** No-count */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
 
}
 
genesis();

+ Nếu muốn thêm nút cả ở trên và dưới phần nội dung của bài viết các bạn làm như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
    
    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
add_action( 'genesis_post_content', 'pinterest_share_button_after' );
function pinterest_share_button_after() {
    
    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
genesis();

Trên đây là các cách thông dụng để chèn nút Pinterest vào website của bạn. Ngoài ra nếu các bạn đang sử dụng WordPress thì các plugin dạng chia sẻ mặc định đã update và hỗ trợ Pinterest rồi chính vì thế mà các bạn không cần phải chỉnh sửa như trong bài viết này nữa.

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

 

Thêm nút Pin vào website (Pinterest)

Leave a Reply

Your email address will not be published. Required fields are marked *