إضافة مشاركة الفيديو على فيس بوك لرؤيته في مدونات بلوجر

السلام عليكم ورحمة الله وبركاته



أقدم لكم اليوم إضافة على مقاطع فيديو يوتيوب في مدونات بلوجر والطريقة تعمل على حجب رئية الفيديو حتى يتم مشاركة الفيديو على فيس بوك.

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

أما إذا كنت تنشر فيديوهات قديمة وغير مهمة لا حاجة لهذه الإضافة لان فيديوهات مدونتك متوفرة وسوف يستغني الزوار عنها


معاينة الإضافة إضغط هنا


طبعاً الطريقة سوف نطبقها فقط على مدونات بلوجر صراحة أنا لا أدري إذا كانت تعمل على مواقع أو مدونات أخرى غير بلوجر لكن يمكن تطبيق الشرح نفسه في أي موقع يمكن أستخدام فيه 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>
ملاحظة هامة: الرمز المشار إليه باللون الأحمر إذا كان متوفر متوفر أحد إصدارات منه لا تقم بإضافته مرة أخرى حتى ولو كان إصدار أخر من ajax لا مشكلة سوف تعمل الإضافة

الآن أبحث عن الرمز
<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 == &quot;item&quot;'>
<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>

طيب ماهو معرف الفيديو وكيف أحصل عليه؟ شاهد الصورة التوضيحية


أي إستفسار آخر تحت الخدمة :)

مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق