كيفية إضافة Instagram Widgets الى مدونتك بلوجر بشكل جديد و رائع

خدمة Instagram عبارة عن منصة وسائط اجتماعية متخصصة على الصور وتعمل بجد في تقديم ميزات جديدة ، بدءًا من الميزات للخلاصات وقصصها.

يوجد الآن في Instagram أكثر من مليار مستخدم نشط في العالم حتى تتمكن شعبيته من التغلب على وسائل التواصل الاجتماعي التي كانت موجودة بالفعل في العالم ، مثل Twitter وغيرها من وسائل التواصل الاجتماعي.

 نظرًا لأن وسائل التواصل الاجتماعي الأكثر شيوعًا في الوقت الحالي ، توجد أوقات يرغب فيها الأشخاص الذين يتابعون مدونتك في معرفة آخر المنشورات من Instagram دون الحاجة إلى تسجيل الدخول إلى Instagram.  الأن سنشرح كيفية إضافة Instagram Widgets على مدونة بلوجر الخاصة بك ، سوف يسهل على متتبعي المدونات العثور على أحدث المشاركات من Instagram عبر موقعك.

 يرجى اتباع الخطوات التالية بدقة.

 كيفية إضافة Instagram Widgets على مدونة بلوجر

 قبل إضافة هذه الأداة ، تأكد من تثبيت Fontawesome على مدونتك.  إذا لم يكن موجود ، فأضف هذا الرمز قبل وسم <head/>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

أولاً افتح مدونة بلوجر انقر على المظهر ثم على زر تحرير HTML أضف رمز CSS قبل وسم <head/>

<style type='text/css'>
/* Instagram Widget */
.instagram-widget{height:100%;background:#ccc;overflow:hidden;min-height:250px;transition:all .3s ease}
.instagram-widget .widget{margin-bottom:0!important}
#insta .title{background:#4776e6;padding:20px;text-align:center;color:#fff;font-size:18px;display:inline-block;position:absolute;border-radius:20pc;top:100px;left:43%;z-index:1}
.instagram-logo{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;text-align:center;color:#fff;left:50%;position:absolute;margin-left:-26px;z-index:1;font-size:30px;margin-top:100px;background:#fff;background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);box-shadow:0 5px 15px rgba(0,0,0,0.15)}
body.boxed-layout .instagram-logo{margin-top:72px}
ul.il-instagram-lite{padding:0;margin:0}
li.il-item{float:left;list-style:none;padding:0;width:16.6666666%;height:250px;overflow:hidden;position:relative;font-size:14px}
body.boxed-layout li.il-item{height:200px}
body.boxed-layout .instagram-widget{min-height:200px}
li.il-item:before{content:"";font-family:Fontawesome;display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.1)}
li.il-item img{height:100%;width:100%;overflow:hidden;object-fit:cover;transition:all .3s ease}
.il-photo__meta{position:absolute;bottom:-65px;text-align:center;left:0;right:0;padding:20px;transition:all .3s ease;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.34),rgba(0,0,0,0.55),rgba(0,0,0,0.68))}
.il-photo__likes{width:43%;color:#fff;float:left;text-align:right}
.il-photo__comments{width:43%;color:#fff;float:right;text-align:left}
li.il-item:hover .il-photo__meta{bottom:0;transition:all .3s ease}
.il-photo__meta a{color:#fff}
.il-photo__likes:before{content:"\f08a";font-family:Fontawesome;margin-right:5px}
.il-photo__comments:before{content:"\f0e5";font-family:Fontawesome;margin-right:5px}
@media screen and (max-width: 768px) {
li.il-item{float:left;list-style:none;padding:0;width:50%;height:150px}
.instagram-widget{background:#fff;overflow:hidden;height:100%}
.instagram-logo{margin-top:200px}}
</style>

أضف بعد ذلك هذا الكود قبل وسم <body/>

<script type='text/javascript'>
//<![CDATA[
// Instagram Widget
!function(t){t.fn.instagramLite=function(e){if(!this.length)return this;plugin=this,plugin.defaults={accessToken:null,limit:null,list:!0,videos:!1,urls:!1,captions:!1,date:!1,likes:!1,comments_count:!1,error:function(){},success:function(){}};var i=t.extend({},plugin.defaults,e),s=t(this),a=function(t){for(var e=t.split(" "),i="",s=0;s<e.length;s++){var a;if("@"==e[s][0])a='<a href="http://twitter.com/'+e[s].replace("@","").toLowerCase()+'" target="_blank">'+e[s]+"</a>";else if("#"==e[s][0]){a='<a href="http://twitter.com/hashtag/'+e[s].replace("#","").toLowerCase()+'" target="_blank">'+e[s]+"</a>"}else a=e[s];i+=a+" "}return i};!function(){if(i.accessToken){var e="https://api.instagram.com/v1/users/self/media/recent/?access_token="+i.accessToken+"&count="+i.limit;t.ajax({type:"GET",url:e,dataType:"jsonp",success:function(t){200===t.meta.code&&t.data.length?(function(t){for(var e=0;e<t.length;e++){var o,n,l=t[e];if("image"===l.type||!i.videos){if(o='<img class="il-photo__img" src="'+l.images.standard_resolution.url+'" alt="Instagram Image" data-filter="'+l.filter+'" />',i.urls&&(o='<a href="'+l.link+'" target="_blank">'+o+"</a>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+='<a href="'+l.link+'" target="_blank"><div class="il-photo__meta">'),i.captions&&l.caption&&(o+='<div class="il-photo__caption" data-caption-id="'+l.caption.id+'">'+a(l.caption.text)+"</div></a>"),i.date){var r=new Date(1e3*l.created_time),c=r.getDate(),d=r.getMonth()+1,u=r.getFullYear();r.getHours(),r.getMinutes(),r.getSeconds(),o+='<div class="il-photo__date">'+(r=d+"/"+c+"/"+u)+"</div>"}i.likes&&(o+='<div class="il-photo__likes">'+l.likes.count+"</div>"),i.comments_count&&l.comments&&(o+='<div class="il-photo__comments">'+l.comments.count+"</div>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+="</div>")}"video"===l.type&&i.videos&&l.videos&&(l.videos.standard_resolution?n=l.videos.standard_resolution.url:l.videos.low_resolution?n=l.videos.low_resolution.url:l.videos.low_bandwidth&&(n=l.videos.low_bandwidth.url),o='<video poster="'+l.images.standard_resolution.url+'" controls>',o+='<source src="'+n+'" type="video/mp4;"></source>',o+="</video>"),i.list&&o&&(o='<li class="il-item" data-instagram-id="'+l.id+'">'+o+"</li>"),""!==o&&s.append(o)}}(t.data),i.success.call(this)):i.error.call(this)},error:function(){i.error.call(this)}})}}()}}(jQuery);
// Activate Instagram
$(function(){$(".il-instagram-lite").instagramLite({accessToken:instaCode,urls:!0,limit:6,captions:!1,likes:!0,comments_count:!0,success:function(){console.log("The request was successful!")},error:function(e,s){console.log("There was an error with the request")}})});
//]]>
</script>

ثم أضف كود htm هذا في أي مكان بين علامتي <body/> و <body> ، على سبيل المثال في المدونة التجريبية التي أضفتها فوق الفوتر مباشرة

<div class='instagram-widget'>
   <b:section class='insta' id='insta' maxwidgets='1' showaddelement='no'>
     <b:widget id='HTML120' locked='true' title='Instagram Widget' type='HTML' version='1'>
       <b:widget-settings>
         <b:widget-setting name='content'>1456802197.1677ed0.6b8580776ddf4d4486b8259d82998273c</b:widget-setting>
       </b:widget-settings>
       <b:includable id='main'>
            <div class='widget-content'>
               <script type='text/javascript'>
                  var instaCode = '<data:content/>' ;
               </script>
            </div>
         </b:includable>
     </b:widget>
     <b:widget id='HTML121' locked='true' title='hide Instagram Widget' type='HTML' version='1'>
       <b:widget-settings>
         <b:widget-setting name='content'/>
       </b:widget-settings>
       <b:includable id='main'>
            <b:if cond='data:content == "hide"'>
               <style>
                  .instagram-widget {
                  display: none;
                  }
               </style>
            </b:if>
         </b:includable>
     </b:widget>
   </b:section>
   <ul class='il-instagram-lite'/>
   <span class='instagram-logo'>
   <i aria-hidden='true' class='fa fa-instagram'/>
   </span>
</div>

تغيير رمز access token مع وصول الرمز المميز لحساب Instagram الخاص بك.  ثم انقر فوق حفظ المظهر.

كيفية إضافة Instagram Widgets على مدونة بلوجر

 كيفية الحصول على رموز access token إلى حساب Instagram

 للحصول على رمز الدخول إلى Instagram الخاص بك ، تأكد من الذهاب الى المتصفح تسجل في فيسبوك او البريد الإليكتروني الخاص بالحساب والوصول إلى موقع Instagram. ، يرجى زيارة هذا الموقع instagram pixelunion  انقر فوق الزر "Generate Access Token"

ملاحظة : هذا الموقع هو الذي يربط بين الكود و حسابك الخاص لكن لاتقلق فهو آمن و لن يتم سرقة حسابك أو شيء من هذا القبيل

إذا لم تظهر الصفحة التالية بعد النقر فوق الزر "Generate Access Token" ، فعليك تنشيط VPN في متصفحك.  احصل على تطبيق vpn قوي من منا

 بعد تنشيط VPN ، انقر فوق الزر Generate Access Token مرة أخرى ثم انسخ الرمز الذي حصلت عليه ثم اذهب الى التخطيط سوف تجد واجهة تعامل Instagram وفي الأخير ضع رمز access token الذي نسخته قبل قليل.

 ثم الأن اذهب و راجع النتائج على مدونتك.

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