إضافة مشاركة الفيديو على فيس بوك لرؤيته في مدونات بلوجر
السلام عليكم ورحمة الله وبركاته
أقدم لكم اليوم إضافة على مقاطع فيديو يوتيوب في مدونات بلوجر والطريقة تعمل على حجب رئية الفيديو حتى يتم مشاركة الفيديو على فيس بوك.
إذا كنت تملك فيديوهات حصرية على مدونتك فهذه الإضافة سوف تجعل مدونتك لها أهمية كبيرة وسوف تتلقى زيارات لا تعد ولا تحصى من خلال فيس بوك بعد تركيب الإضافة على مدونتك.
أما إذا كنت تنشر فيديوهات قديمة وغير مهمة لا حاجة لهذه الإضافة لان فيديوهات مدونتك متوفرة وسوف يستغني الزوار عنها
معاينة الإضافة إضغط هنا
طبعاً الطريقة سوف نطبقها فقط على مدونات بلوجر صراحة أنا لا أدري إذا كانت تعمل على مواقع أو مدونات أخرى غير بلوجر لكن يمكن تطبيق الشرح نفسه في أي موقع يمكن أستخدام فيه ajax
نأتي لكيفية عملها على مدونة بلوجر
أولاً أنصح بأخذ نسخة أحتياطية من قالب مدونتك ثم أتجه إلى القالب مرة أخرى ثم قم بالضغط على تحرير html
الآن بستخدام مفتاح الأختصار بلوحة مفاتيح الكمبيوتر ctrlوf ثم قم بالبحث عن الرمز </head> ثم ألصق الكود التالي فوقه مباشرةً
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>
</script>
<style>
#youtubeblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youtubeblocker iframe {
display:;
}
#youtubeblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youtubeblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubM3S-jsa6iGXCRiJ1yDhc9kInhnLhX16XTdfQj6BWYA0YZsSmypcl6nfAnLxeUO_DHkaSw1CDLbNJfNk1vdEZSwFseAEj4iqA13a2cxiIfRXdAIJQ0GMxjNdXw0nBxC_OSIXhkausb6b/s1600/play.png);
border:0px solid #000;
z-index:1;
}
#youtubeblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youtubeblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYsP4nhdtX9T4Gjxhd8GRiSOHIF786P3aI4RJIHiingVvHK03bZDhp467JiO0i0-tw3Czd0ML7SkXSMSeiyYZVbAPt7JZFz8tatjKPm3uW6umj05GUn5GfgG74tf49PhRCwvUsKZN4LCg/s1600/play-2.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeC8Xw0uy7VfmNPdH-gRqqBmlPnfSw7A6LM9bmLIMgmp4SmvTqqfElwtlkfXiJko6WB6vm5Gq23-mcxeqxLZezdSljHQZZeLIvgKSp0332gvQINU9eLvVtZzFQz6SK1SabyePcSC-91mu/s1600/sharebut.png);
border:0px solid #000;
z-index:2;
}
</style>
الآن أبحث عن الرمز
<body>
أو
<body
وهو سوف يكون دائماً أسفل الرمز </head> بقليل بعد أن وجدت الرمز <body>
أضف الكود التالي أسفله مباشرةً:
<div id='fb-root'/>
<script>
//<![CDATA[
(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/es_LA/all.js#xfbml=1&appId=1439152689637274";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '1439152689637274',
status: true,
xfbml: true
});
// by: www.madad2.com
};
function youtubeblocker() {
FB.ui( {
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL,
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
//alert('');
}
}
);
};
function sharebox(){
$("#sharebox").show();
}
function youtube (IDyoutube) {
var output1 = '<div id="youtubeblocker"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="youtubeblocker();"></div></div><iframe width="640" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
//]]>
</script>
</b:if>
الآن إضغط على حفظ القالب ونأتي إلى كيفية إضافة الفيديوهات في داخل المواضيع حتى يعمل
أولا قم بنسخ معرف الفيديو الذي ترغب في إضافته ثم لصقه داخل الكود في المكان المشار إليه
<script>youtube("معرف الفيديو هنا");</script>
طيب ماهو معرف الفيديو وكيف أحصل عليه؟ شاهد الصورة التوضيحية
