طريقة اختيار نص و نشره علي تويتر

بسم الله الرحمن الرحيم

مرحبا بكم في مدونة مسطرة ... و اليوم موضوعنا عن طريقة اختيار نص و نشره علي تويتر How to Select Text and Share it to Twitter ...

طريقة اختيار نص و نشره علي تويتر

How to Select Text and Share it to Twitter

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

ما هو تحديد النص و نشره في تويتر؟

هي اضافة تساعد بفاعلية بحيث تعطي للمستخدمين القدرة على تحديد أي نص على المدونة الخاصة بهم أو موقع لمشاركته في الموقع الاجتماعي تويتر المفضل لديهم. فمن السهل للغاية تثبيتها واستخدامها.

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

يمكنك معاينة الاضافة من هنا.

كيفية تثبيت هذه الاضافة؟

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

اذهب الي القالب >> تعديل HTML >> ابحث عن ]]></b:skin> و فوقها مباشرة قم باضافة الكود التالي:

.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/AVvXsEilZdbZvLYePducNp_bMLH1FUBl-wZ6IaErZTFoFAIYUGR8cHyB54OXaCm4hSGOeGFBedv-RT_n12OadQQGWgIdTNgeo-5BIMY_m6eXjwfC87xGioRgZbTogPcZBoRLeLuE9AHUFD8uG9da/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;
}

بعد اضافة الكود السابق ... ابحث عن هذا الكود </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>

و اخيرا ... لظهور الاضافة يجب وضع كود HTML في القالب ... ابحث عن هذا الكود </body> وفوقه مباشرة قم باضافة هذا الكود:

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

و الان احفظ القالب ... و مبروك عليك الاضافة الجديدة ... اذهب الي المدونة الخاصة بك و اختار اي نص و قم بتظليله و ستري ماذا سيحدث بعد ذلك ...

و بكده نكون انتهينا من موضوع اليوم و هو طريقة اختيار نص و نشره علي تويتر How to Select Text and Share it to Twitter ... و السلام عليكم و رحمة الله و بركاته ...

شارك هذا المنشور