خدمة Instagram عبارة عن منصة وسائط إجتماعية متخصصة على الصور وتعمل بجد في تقديم ميزات جديدة، بدءاً من الميزات للخلاصات وقصصها.
يوجد الآن في Instagram أكثر من مليار مستخدم نشط في العالم حتى تمكن من التغلب على وسائل التواصل الإجتماعي التي كانت موجودة بالفعل في العالم، مثل Twitter وغيرها من وسائل التواصل الإجتماعي.
نظراً لأن وسائل التواصل الإجتماعي الأكثر شيوعاً في الوقت الحالي، توجد أوقات يرغب فيها الأشخاص الذين يتابعون مدونتك في معرفة آخر المنشورات من Instagram دون الحاجة إلى تسجيل الدخول إلى Instagram أو قد يحتاج بعض المدونين لأضافة منشور من Instagram فى مدونة بلوجر وذلك إما لعمل شرح لها أو ربطها بمحتوى الموضوع، الأن سنشرح كيفية إضافة Instagram Widgets على مدونة بلوجر الخاصة بك، فيرجى إتباع الخطوات التالية بدقة:
1. أولاً إفتح مدونة بلوجر وإنقر على التخطيط في القائمة على الجانب الايمن.
2. بعدها إنزل الى قسم Fooer أو أي قسم ترغب في إضافة Instagram Widgets فيه.
3. قم بالضغط على إضافة أداة، ومن النافذة الجديدة إختر Html/ JavaScript.
4. قم بترك حقل العنوان فارغ، وفي حقل المحتوى قم بلصق الكود الأول التالي في الأسفل، وبعدها إضغط حفظ.
<style>.playground2 .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground2 .result .posts{position:relative;display:block;margin:0;width:16.666%;overflow:hidden}.playground2 .result .posts img{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.playground2 .result .posts .meta{position:absolute;right:0;bottom:0;display:block;width:100%;height:100%;color:#fff;font-size:15px;text-decoration:none;background: rgba(64,64,64, .7);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:0;line-height:1.4}.playground2 .result .posts:hover .meta{opacity:0.7; background: rgba(64,64,64, .7)}.playground2 .result .posts .meta p{margin:0 0 20px;opacity:0;visibility:hidden;-webkit-transition:all .5s ease;transition:all .5s ease}.playground2 .result .posts .stats{position:absolute;width:100%;right:0;top:50%; overflow:hidden;opacity:0;text-align:center;color:#fff;-webkit-transform:translate(0,-50%) }.playground2 .result .posts .stats i{margin:0 0 0 10px}.playground2 .result .posts .stats .likes{display:block;margin:0}.playground2 .result .posts .stats .comment{display:block;margin:0}.playground2 .result .posts::after{display:block;padding-top:100%;content:''}.playground2 .result .posts:hover .stats {opacity:1;visibility:visible}}@media only screen and (max-width:767px){#instafeed-footer .instathumb{flex-basis:25%}.playground .result .posts{width:49%}.playground2 .result .posts{width:25%}}</style><script>/*<![CDATA[*/!function(e){e.fn.instastory=function(t){let s=this,n="",o=e.extend({get:"",type:"",imageSize:640,limit:6,link:!0,template:"",after:function(){}},t);if(!s.length)return console.group("Instastory.js log"),console.warn("The DOM element you tried to initiate the plugin on, does not exist"),console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/instastory.js"),console.groupEnd(),!1;if("string"==typeof t&&(o.get=t),""==o.get)return console.group("Instastory.js log"),console.warn("You failed to specify what you want"),console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/instastory.js"),console.groupEnd(),!1;const r=function(e){const t=o.imageSize;if("number"!=typeof t)return"raw"==t?e.display_url:e.thumbnail_resources[0].src;switch(t){case 150:return e.thumbnail_resources[0].src;case 240:return e.thumbnail_resources[1].src;case 320:return e.thumbnail_resources[2].src;case 480:return e.thumbnail_resources[3].src;case 640:return e.thumbnail_resources[4].src;default:return e.thumbnail_resources[0].src}},a=function(e){String.prototype.allReplace=function(e){let t=this;for(let s in e)t=t.replace(new RegExp(s,"g"),e[s]);return t};let t={"{{accessibility_caption}}":e.accessibility_caption,"{{caption}}":e.edge_media_to_caption.edges.length>0?e.edge_media_to_caption.edges[0].node.text:"","{{comments}}":e.edge_media_to_comment.count,"{{image}}":r(e),"{{likes}}":e.edge_liked_by.count,"{{link}}":"https://www.instagram.com/p/"+e.shortcode};return o.template.allReplace(t)};var i,c;(i=o.get).indexOf("@")>-1?(o.type="user",o.get=i.substring(i.indexOf("@")+1)):i.indexOf("#")>-1?(o.type="hashtag",o.get=i.substring(i.indexOf("#")+1)):(o.type="hashtag",o.get=i),c=o.type,n="user"==c?"https://www.instagram.com/"+o.get+"/?__a=1":"https://www.instagram.com/explore/tags/"+o.get+"/?__a=1",e.ajax({url:n,success:function(e){s.html(function(e){let t="",s={};switch(o.type){case"user":s=e.edge_owner_to_timeline_media;break;default:s=e.edge_hashtag_to_media}let n=s.edges;for(var i=0;i<o.limit;i++)if(void 0!==n[i]){let e=n[i].node,s="";""!=o.template?s=a(e):(s="<img src='"+r(e)+"' alt='"+e.accessibility_caption+"'>",o.link&&(s="<a href='https://www.instagram.com/p/"+e.shortcode+"'>"+s+"</a>")),t+=s}return t}(e.graphql[o.type])),o.after()}}).fail(function(e){switch(e.status){case 404:console.warn("The "+o.type+" do not exsists, please try another one");break;default:console.warn("An unknow error happend")}})}}(jQuery);/*]]>*/</script>
5. قم أيضاً بالضغط على إضافة أداة ثانية جديدة لكي نقوم بإضافة الكود الثاني، ومن النافذة الجديدة نختار Html/ JavaScript، وقم أيضاً بترك حقل العنوان فارغ، وفي حقل المحتوى قم بلصق الكود الثاني التالي في الأسفل، وبعدها إضغط حفظ.
( مع ملاحظة تغيير إسم المستخدم "USER" الموضح باللون الأحمر في الكود الى إسم المستخدم الخاص بك في Instagram.
<!-- Instagram Footer Widget --><script type="text/javascript">var tags=["div","a","button","article","section","strong","i","input","script"],attr=["class","src","href"];function highlight(t){t=(t=t.replace(new RegExp("<","g"),"<")).replace(/"(.+?)"/g,'<span data-type="val">"$1"</span>');for(var a=0;a<tags.length;a++)t=(t=t.replace(new RegExp("<"+tags[a],"g"),'<<span data-type="tag">'+tags[a]+"</span>")).replace(new RegExp("</"+tags[a],"g"),'</<span data-type="tag">'+tags[a]+"</span>");for(a=0;a<attr.length;a++)t=t.replace(new RegExp(attr[a],"g"),'<span data-type="attr">'+attr[a]+"</span>");return t=t.replace(/span>>(.*)</,'span>><span data-type="plain">$1</span><')}$(document).ready(function(){$(".highlight-me").each(function(){$(this).html(highlight($(this).html()))}),$("#demo1").instastory("#coding");let t={get:"@cena1web",imageSize:640,limit:6,link:!0,template:'<div class="posts"><a target="_blank" href="{{link}}"><img src="{{image}}" alt="{{accessibility_caption}}"><span class="meta"></span><span class="stats"><span class="likes"><i class="fa fa-heart"></i>{{likes}}</span><span class="comment"><i class="fa fa-comment"></i>{{comments}}</span></a></div>'};$("#playground2-result").instastory(t),setTimeout(function(){$("#playground2-result .posts").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>350&&(a=t.substring(0,347)+"..."),$(this).find(".meta p").text(a)})},2e3),$("#new-feed").click(function(){let a=$("#hashtag-input").val(),e=$("#limit-input").val();""!==a&&(t.get=a),""!==e&&(t.limit=e),$("#playground2-result").instastory(t),setTimeout(function(){$("#playground2-result .posts").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>390&&(a=t.substring(0,387)+"..."),$(this).find(".meta p").text(a)})},2e3)})});</script><div class="playground2"><div id="playground2-result" class="result"></div></div>
وللمزيد من التفصيل يمكنكم متابعة الفيديو في الأسفل...
الكود لا يعمل
ردحذف