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

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

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

    يوجد الآن في Instagram أكثر من مليار مستخدم نشط في العالم حتى تتمكن شعبيته من التغلب على وسائل التواصل الاجتماعي التي كانت موجودة بالفعل في العالم ، مثل Twitter وغيرها من وسائل التواصل الاجتماعي.
    كيفية إضافة Instagram Widgets الى مدونتك بلوجر بشكل جديد و رائع
     نظرًا لأن وسائل التواصل الاجتماعي الأكثر شيوعًا في الوقت الحالي ، توجد أوقات يرغب فيها الأشخاص الذين يتابعون مدونتك في معرفة آخر المنشورات من 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 الذي نسخته قبل قليل.

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

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

    مقالات متعلقة

    1. اخي عصام السلام عليكم ورحمة الله وبركاته ارجو منك مساعدتي فا انا بامس الحاجه الي مساعدتك انني تقدمت بطلب الاشتراك بمدونتي الي ادسنس وتم رفضها بسبب انتهاك السياسة ولا ا لم ما هوا الجزء او الموضوع الذي ينتهك سياسة ادسنس اعلم ان هذا خارج نطاق الموضوع ولكن مدونتك دائما مرجع لي في كل شيء احتاج الية ارجوك ان تساعدني في هذه المشكلة رابط مدونتي https://www.yom7.ga مع العلم ان رابط المدونة هوا رابط مجاني من شركة فرينوم وجميع زياراتي من جوجل ويوتيوب اتمني تساعدني صارلي شهرين بحاول الانضمام ولكن يتم الرفض لهذا السبب

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

        حذف
      2. مشكور اخي عصام علي ردك الكريم ولكن لدي سوال اخر لو جعلت الدومين blogspot هل من الممكن ان يتم قبولها ام لازم دومين مدفوع وهل يوجد مخالفات بموقعي غير الدومين ام الدومين فقط ولك جزيل الشكر والتقدير على ردك الكريم

        حذف
      3. العفو اخي من الافضل شراء دومين مدفوع ضع رابط مدونتك في التعليقات لأعاينها و اقول لك ماهي السلبيات و الاجابيات

        حذف
      4. هذا هوا رابط مدونتي اخي الكريم
        https://www.yom7.ga

        حذف
      5. راسلني عبر هذا الحساب
        https://facebook.com/issam4011

        حذف
      6. لقد راسلتك الان اخي الكريم

        حذف

    مواقع[posts6]

    قوالب بلوجر[posts1]

    اندرويد[posts3]

    حماية[posts4]

    متصفحات[posts5]

    اختراقات[posts2]