Cách thêm button “Like to Unlock” vào bài viết Blogspot
Bước 1 : Đầu tiên, bạn cần thêm thư viện jQuery vào blog bằng cách thêm đoạn sau vào phía dưới thẻ
<head><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Nếu bạn nào đã từng thêm thư viện jQuery vào blog rồi thì có thể bỏ qua bước này
Bước 2 : Tiếp theo, hãy thêm đoạn code dưới đây vào phía trên thẻ đóng
</body><script type='text/javascript'>
//<![CDATA[
/* Facebook */
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
$.event.trigger({
type: "pageShared",
url: href
});
});
};
/* Twitter */
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
$.event.trigger({
type: "pageShared",
url: event.target.baseURI
});
});
});
/* Google Plus */
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
console.log(obj);
$.event.trigger({
type: "pageShared",
url: obj.href
});
}
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
if(e.url == window.location.href){
$(".hide").show();
$(".show").hide();
}
});
//]]>
</script>Bước 3 : Thêm đoạn code dưới đây vào phía trên thẻ
]]></b:skin>.hide {
display: none;
background: #f9f9f9;
color: #111;
border-radius: 5px;
border-bottom: 4px solid #f1f1f1;
padding: 20px;
}
.show {
padding: 20px;
background: #f9f9f9;
color: #111;
border-radius: 5px;
border-bottom: 4px solid #f1f1f1;
text-align: center;
}
.show .fb-like {
margin-top: 0;
top: -7px;
position: relative;
}
.show .twitter-share-button {
margin-right: 25px;
}Đăng bài
Tiếp đó, điền đoạn code dưới đây vào vị trí muốn sử dụng
<div class="hide"> .......... </div> <div class="show"> To unlock the content, use one of the social buttons below. Thank you for your support and love. <span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="chiase78" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>
trong đó : …….. là phần nội dung sẽ bị ẩn đi
Cuối cùng, hãy xuất bản bài viết. Bây giờ, để xem phần nội dung bị ẩn đi, người dùng sẽ buộc phải like, twitter, +1 bài viết của bạn.
Chúc các bạn thành công
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh
ad xem lại code xem. m làm rồi ko hoạt động
Trả lờiXóaSAO NÓ CHỈ ÁP DỤNG CHO twitter KO NHẤN GOOGLE VỚI LIKE NÓ KO HIỆN NỘI DUNG
Trả lờiXóa