Chọn 1 đoạn văn bản ngẫu nhiên và chia sẻ nó lên Twitter trong blogger

  Làm sao để chia sẻ 1 đoạn văn bản lên Twitter trong blogger

Chọn một đoạn văn bản trong bài viết và chia sẻ nó lên Twitter trong blogger, cách tự động share lên Twitter khi bôi đen văn bản trong blogger,cách chia sẻ bài viết lên Twitter trong blogspot, làm sao để chia sẻ văn bản lên Twitter trong blogger, chọn 1 đoạn văn bản bất kỳ và chia sẻ nó lên Twitter trong blogger, share on Twiter...
Rất nhiều câu hỏi liên quan đến việc làm sao để chia sẻ 1 bài viết hay 1 đoạn văn bản ngẫu nhiên trong bài viết và chia sẻ nó lên Twitter trong blogger

làm sao để chia sẻ văn bản lên Twitter trong blogger

Hôm nay, tôi sẽ hướng dẫn mọi người cách thêm một widget Twitter cho trang web BlogSpot của bạn vừa độc đáo và hiệu quả, đủ để giúp blog các bạn có thể tiếp cận nhiều hơn với các lượt vew..trên Twitter của bạn với sự giúp đỡ của Twitter.Trong bài viết này, tôi sẽ cho bạn thấy làm thế nào để chọn văn bản và chia sẻ nó với widget Twitter trong blogger.

Chọn văn bản và chia sẻ nó với Twitter là gì?

Nó là một plugin hiệu quả cho phép người dùng của bạn một khả năng chọn bất kỳ văn bản trên blog hoặc website của bạn để chia sẻ nó (văn bản đã chọn) trên trang mạng Twitter xã hội ưa thích của họ. để làm được việc có thể chọn 1 đoạn văn bản bất kỳ và chia sẻ nó lên Twitter thì rất đơn giản thôi

chia sẻ 1 lên Twitter

 Trong hình trên,tôi đã chỉ ra cách thức tiện ích này hoạt động. Bất cứ khi nào bạn chọn 1 phần văn bản, một đoạn văn bản nhỏ thì tiện ích Twiter sẽ xuất hiện và bạn có thể share lên Twitter ngày lập tức, Khi click chuột và bôi đen đoạn văn bản.. thì icon Twitter sẽ xuất hiện và bạn chỉ việc chia sẻ nó lên Twitter thôi,làm cho việc chia sẻ dễ dàng hơn

Làm thế nào để cài đặt tiện ích này?

Hướng dẫn cài đặt cách tự động share lên Twitter khi bôi đen văn bản trong blogger. Điều đầu tiên, bạn cần phải làm là đăng nhập vào tài khoản blogger của bạn và chọn blog bạn sẽ muốn cài đặt các widget trên. Bây giờ để Template >> Edit HTML >> Tìm kiếm thẻ  ]]></b:skin>  bằng cách bấm tổ hợp phím Ctrl + F  và dán nó vào trước thẻ ]]></b:skin>  đoạn mã CSS sau đây.

 

 

\.MBLSharetip {
display:none;
top:0;
background:#333;
color:#f16786;
width:40px;
height:32px;
position:absolute;
margin-left:-20px;
opacity:0;
filter:alpha(opacity=0);
z-index:99;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
}
.MBLSharetip span {
position:absolute;
content:" ";
border:solid rgba(0,0,0,0);
height:0;
width:0;
top:100%;
border-top-color:#333;
left:50%;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
border-width:7px;
margin:0 0 0 -7px;
}
.MBLSharetip a {
color:#f16786;
}
.MBLSharetip:hover {
background:#3D566E;
}
.MBLSharetip:hover span {
border-top-color:#3D566E;
}
.tooltipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.tooltipContainer a {
width:100%;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-STJzkUaZE-mbNmYJV6RiW3azIUIMbz1v3mFdq7zHgnOICXKToE2g20yNs4B10D9SaXdd1tHqnE7SP_233P49mEWk4nGACN_xDsi7HgcHOc0cqZaDm4blJK30iYwaofThXKikRm4XLMTQ/s1600/sprites.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.sharingLink {
display:block;
position:absolute;
text-indent:-9999px;
}

Sau khi thêm các mã CSS ở trên, bạn tìm thẻ đóng </head> 

</head> tag và dán ở trên đoạn  mã jQuery sau đây:

 

 <script type='text/javascript'>
 /*<![CDATA[*/
 $(document).ready(function() {
    textToShare = '';
    $(document).mousemove(function(m) {
        generateTooltipPosition();
    });
});
$(document).mouseup(function() {
    $(document).mousemove(function(m) {
        generateTooltipPosition()
    });
    var textToShare = getTextToShare();
    var MBLSharetip = document.getElementById("MBLSharetip");
    if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
    var textToShare = getTextToShare();
    var tooltipTitle = null;
    var newTooltipTitle = $("#MBLSharetip").attr("title");
    if (newTooltipTitle == "") return;
    if (newTooltipTitle !== tooltipTitle) $('#MBLSharetip').animate({
        opacity: 0
    }, 30);
    if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
    if ($('#MBLSharetip').show()) {
        $('#MBLSharetip').animate({
            opacity: 0
        }, 30);
    }
});
function showMeTooltip() {
    var pageURL = window.location.toString();
    var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;
    $('#MBLSharetip').show();
    $('#MBLSharetip').animate({
        opacity: 1
    }, 30);
    $('#sendToTwitter').attr('href', twitterLink);
}
function getTextToShare() {
    shareTxt = '';
    if (window.getSelection) {
        shareTxt = window.getSelection();
        generateTooltipPosition();
    } else if (document.getSelection) {
        shareTxt = document.getSelection();
        generateTooltipPosition();
    }
    return shareTxt;
}
function generateTooltipPosition() {
    var selection = window.getSelection && window.getSelection();
    if (selection && selection.rangeCount > 0) {
        range = selection.getRangeAt(0);
        pos = $(window).scrollTop();
        selection_text = selection.toString(), rect = range.getBoundingClientRect();
        $('#MBLSharetip').css({
            top: (rect.top + pos - 20) - 32 + 'px',
            left: rect.left + (rect.width / 2) + 'px',
        });
    }
}
/*]]>*/
</script>

Bây giờ cuối cùng, để hiển thị các widget Twitter chúng ta cần phải thêm mã HTML trong template.Tìm kiếm  thẻ đóng  </body> tag và dán trên nó đoạn mã sau: 

 

 <script>var twitterAccount = "mybloggerlab";</script>
    <div class="MBLSharetip" id="MBLSharetip">
         <div class="tooltipContainer"><a id="sendToTwitter" href="" class="sharingLink twitter"><span></span></a></div>
     </div>

 

Sau khi hoàn tất việc thêm tiện ích share Twitter thì bạn Save Html lại vậy là đã thành công với việc tự động chia sẻ nội dung khi bôi đen vào vị trí bất kỳ nào trong bài viết blogger

 

sau bài viết này tôi hy vọng mọi người sẽ có thể có 1 tiện ích khá hay cho blog của mình
 

Có thể bạn sẽ quan tâm