شرح وضع فيديو من الفيس بوك على مدونات بلوجر

 

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

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

كيف أضيف الفيديو من الفيسبوك الى مدونة بلوجر بدون أن تتأثر سرعة مدونتى؟

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

أ- عليك بداية وضع الكود التالى أعلا الوسم …شاهد الصوره التاليه :

شرح وضع فيديو من الفيس بوك على مدونات بلوجر

]]></b:skin>

وهذا هو الكود :

.facebook,.facebook_box{margin:0 auto;width:100%}
.facebook-resposive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0}
.facebook img{width:100%;height:auto;display:block;z-index:1}
.facebook iframe{position:absolute;top:0;left:-2px;width:calc(100% + 4px);height:100%;z-index:3;}
.facebook-resposive:after{content:"";cursor:pointer;margin:auto;width:80px;height:80px;background-image:url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><path style='fill:#ffffff' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z'></path></g></svg>");background-position:center;-webkit-background-size:111px 111px;background-size:111px 111px;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:all .2s ease-out;z-index:2;display:inline-block!important;border-radius:100%;overflow:hidden}
.facebook-resposive:before{content:"";cursor:pointer;margin:auto;width:80px;height:80px;background-color:#000;opacity:.3;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;border-radius:100%}
.facebook-resposive:hover:before{opacity:.7}
@media screen and (max-width:960px){.facebook-resposive:after,.facebook-resposive:before{width:66px;height:66px;}
.facebook-resposive:after{-webkit-background-size:92px 92px;background-size:92px 92px;}
}

ب- عليك أيضا أعلا الوسم

</body>

ضع الكود التالى :-

<script>
//<![CDATA[
function videoPlay(n){return n.innerHTML=n.innerHTML.replace("<!--","").replace("-->",""),n.onclick=null,!1}
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>

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

 كيف أضيف الفيديو من الفيسبوك الى مدونة بلوجر بدون أن تتأثر سرعة مدونتى؟

1- توجه الى الفيسبوك واختر أى فيديو يروق لك وتريد وضعه بمدونتك داخل أحدى المشاركات لتوضيح شىء ما
2- خذ لقطة شاشة بواسطة أى برنامج لتصوير الشاشه مثل برنامج Snagit مثلا أو اى صوره تراها ذات صله بمضمون الفيديو ،واحفظ الصوره بجهازك بأى صيغة كانت jpg او png او ……….الخ .
3- قم بتحويل المشاركة الى وضعية HTML وحدد المكان الذى تريد ان يظهر الفيديو فيه بالمشاركه.
4- فى مكان وضع الفيديو ضع الكود التالى وغير مايلزم كما سأوضح تباعا :

<div class="facebook_box">
<div class="facebook" onclick="videoPlay(this)">
<div class="facebook-resposive">
<picture>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxfGMwnoMxAsgM0QE5GJTmluRRQz-vUG-fRBXiZ_LAOQ7oiMteDCEc1IAvKzQPj0b6gUq2HOb4jpS3lFZ2_QS97e_7fSzYdUuMomTVZu4bHPT5p5BLs7D7qvc6AiX7bwCZW7vQH0KJw4/s1600-rw/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/webp"/>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxfGMwnoMxAsgM0QE5GJTmluRRQz-vUG-fRBXiZ_LAOQ7oiMteDCEc1IAvKzQPj0b6gUq2HOb4jpS3lFZ2_QS97e_7fSzYdUuMomTVZu4bHPT5p5BLs7D7qvc6AiX7bwCZW7vQH0KJw4/s1600/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/jpg"/>
  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxfGMwnoMxAsgM0QE5GJTmluRRQz-vUG-fRBXiZ_LAOQ7oiMteDCEc1IAvKzQPj0b6gUq2HOb4jpS3lFZ2_QS97e_7fSzYdUuMomTVZu4bHPT5p5BLs7D7qvc6AiX7bwCZW7vQH0KJw4/s1600/52590739_2195779350751978_3300639387238268928_n.jpg" alt="Video Thumbnail" width="1280" height="720"/>
</picture>
    <!-- <iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/ayohviralkan/videos/296545157683703/&width=500&show_text=false&height=280&autoplay=1&mute=0" width="500" height="280" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media; autoplay" allowFullScreen="true" data-autoplay="true"></iframe> -->
</div>
</div>
</div>

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

شرح وضع فيديو من الفيس بوك على مدونات بلوجر

وعند قيامك بتغيير كل مايلزم بالكود كما وضحنا ستكون النتيجه كما يلى :
فيديو تجربه

شرح وضع فيديو من الفيس بوك على مدونات بلوجر