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

0

شرح وضع فيديو من الفيس بوك على مدونات بلوجر ،كيف أضع فيديو من الفيس بوك على بلوجر مباشرة دون أن اقلل من سرعة المدونه،طريقة وضع الفيديو من الفيس بوك وتركيبه على بلوجر مباشرة 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  data-srcset="https://3.bp.blogspot.com/-DhomcsJuE4E/XRK3gpdpkDI/AAAAAAAADpI/15LkgOEsryUGnFj2F_ZuuQtRZcPK1RO7gCLcBGAs/s1600-rw/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/webp"/>
  <source srcset="https://3.bp.blogspot.com/-DhomcsJuE4E/XRK3gpdpkDI/AAAAAAAADpI/15LkgOEsryUGnFj2F_ZuuQtRZcPK1RO7gCLcBGAs/s1600/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/jpg"/>
  <img  data-src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://3.bp.blogspot.com/-DhomcsJuE4E/XRK3gpdpkDI/AAAAAAAADpI/15LkgOEsryUGnFj2F_ZuuQtRZcPK1RO7gCLcBGAs/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 للفيديو فى الوقت الحالى. وذلك عبر متصفح جوجل كروم مثلا كما بالصوره التاليه ..

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

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

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

إقرأ مقالى هذا أيضا : كيف اجعل فيديوهات اليوتيوب فى مدونتى بلوجر متجاوبه مع كافة الاجهزه الذكية

اتمنى ان اكون وفقت فى الشرح
وسأوالى تحديث المشاركه
تحياتى لك

close

أهلا بك زائرنا الكريم 👋
مدونة تعلم سيو بلوجر أنشأناها من أجلك لشرح تهيئة المواقع لمحركات البحث SEO مجانا لك سواء موقعك على بلوجر أو الووردبريس ... فمتابعتك تشرفنا وسيصلك كل جديد على إيميلك فور نشرة

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

نحن لا نرسل البريد العشوائي! اقرأ سياسة الخصوصية الخاصة بنا لمزيد من المعلومات.

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

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More