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


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


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

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


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

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

هي اضافة تساعد بفاعلية بحيث تعطي للمستخدمين القدرة على تحديد أي نص على المدونة الخاصة بهم أو موقع لمشاركته في الموقع الاجتماعي تويتر المفضل لديهم. فمن السهل للغاية تثبيتها واستخدامها.
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(http://4.bp.blogspot.com/-HCutv6Nw8iM/VK_Q-v7WT1I/AAAAAAAAFTY/rbxVAhvs_dM/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>

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










تعلم طريقة اختيار نص و نشره علي تويتر تعلم طريقة اختيار نص و نشره علي تويتر بواسطة walid al Bana on 12:47:00 ص القسم: 5

ليست هناك تعليقات :

يتم التشغيل بواسطة Blogger.