إضافة أداة المشاركة الفورية لأي نص على تويتر

السلام عليكم أحبائي، نلتقي هذه المرة لأعرض عليكم إضافة بلوجر أخرى حصرية، بسيطة وجميلة جدا جدا، بل إنني أستخدمها شخصيا هنا على مدونتي. وقصد أن ترى مدى جماليتها يكفيك أن تقوم بتحديد جزء من نص في أي مكان على مدونتي هذه، وستلاحظ طائر تويتر يظهر فورا، وعند الضغط عليه ستقوم بمشاركة النص الذي قمت بتحديده على حسابك في تويتر. جميل أليس كذلك؟ ^_^ سأريك إذن طريقة تركيبها على مدونتك، تابع معي:

أداة المشاركة الفورية لأي نص تقوم بتحديده على تويتر

1. ادخل إلى لوحة تحكم المدونة بلوجر
2. توجه نحو: قالب ثم تحرير HTML
3. ابحث عن الوسم ]]></b:skin>
4. انسخ الكود الآتي كاملا وضعه قبل الوسم السابق مباشرة

.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/AVvXsEgvyLRFHwwimBTG6Y3hWYbEcrG-4EPga53OuijS41-5LVqO_tqShnutVQPrKougtPG8HKo0UajjfS8FK79yhUeqHQVQBIVRaYBqfw5qpwcYYVMNinDUBvKiA2uR04yQefW4vOVHm7xd39kY/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;
}

1. مجددا، ابحث عن الوسم </head> ثم ألصق الكود الآتي قبله مباشرة

<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>

1. أخيرا ابحث عن </body> والصق الكود الآتي فوقه

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

 بهذا أكون قد انتهيت من شرح طريقة تركيب هذه الإضافة المميزة والتي ستسهم حتما في زيادة تفاعل الزوار مع المدونة، والحصول على زوار جدد من موقع تويتر. سلام!