Welcome to vbmods.rocks! Get FREE and paid vBulletin mods, plugins, addons, API extensions, custom modules, custom BB Codes, vBCloud mods, CORE hacks, JS hacks, custom coding by Glenn, an ex-vBulletin Developer. You must register before you can post, download the files or copy the code from the free plugins.
Should it work on vbulletin 4? Because so far it doesn't, at least on my side
The one that jjblaze does work but defining width and height is an issue so would be great if you guys could help me to make the initial version work
Thanks for reporting. I investigated and found out this is not a vB 5.4.5 issue or a vB issue in general. This issue also occurs here (which is currently at 5.4.2 as of this writing) in the demo in the first post of this topic.
Starting Chrome 68 (can't tell for other browsers), it blocks external resource (https://api.instagram.com/oembed/ JS embed in this case) from being loaded on the page. I'm still trying to figure out a workaround. If there's no workaround, I would be forced to find a totally different solution.
It turns out it's not totally caused by Chrome but by Instagram itself returning wrong MIME type for oembed JS call. Instagram is returning Content-Type:application/json instead of Content-Type:application/javascript. This causes Chrome to block it.
Fleiding, try using this as Replacement code replacing the original. After updating the BBCode, don't forget to clear system cache in AdminCP for the changes to take effect on existing Instagram BBCode.
Code:
<div data-ig-param="{param}"></div>
<script>
!function(){function k(e,t){var a=Element.prototype;return(a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||function(e){return-1!==[].indexOf.call(document.querySelectorAll(e),this)}).call(e,t)}
function g(a,c){if(a.closest){return a.closest(c)}
return a?k(a,c)?a:"HTML"===a.tagName?null:g(a.parentNode,c):null}
var b="{param}",a,e=document.getElementsByTagName("script"),e=e[e.length-1],f;if(b.indexOf('http')===0){var x=b.split('/');var y=x[x.length-1];b=(!y)?x[x.length-2]:y}
f=e.parentNode.querySelector('[data-ig-param="{param}"]:empty'),(a=g(f,".js-post"))?a=a.getAttribute("data-node-id"):(a=g(f,".js-post-sm"),a=a.getAttribute("data-nodeid")),a="ig_"+(a||"")+"_"+b,window[a]=function(a){f.innerHTML=a.html;if(!window.instgrm||!window.instgrm.Embeds||!window.instgrm.Embeds.process){a=f.getElementsByTagName("script");for(var c,d=document.getElementsByTagName("head")[0],b=0;b<a.length;b++)a[b].src?(c=document.createElement("script"),c.src=a[b].src,d.appendChild(c)):eval(a[b].textContent)}else{window.instgrm.Embeds.process()}};fetch("https://api.instagram.com/oembed/?url="+encodeURIComponent("https://instagr.am/p/"+b+"/")).then(function(r){return r.json()}).then(function(j){window[a](j)})}()
</script>
This does not support IE browser. If you care about IE, then add the below script tag in the head_include template for self-hosted version. For vBCloud owners, utilize the AdminCP > Settings > Options > Search Engine Tools > Google Ownership Verification HTML tag or Bing Ownership Verification HTML tag and paste the code there. Make sure the corresponding Enable Ownership Verification options is set to Yes.
HTML Code:
<!-- Fetch Polyfill for IE 10+ --><script>
(function() {
if (!window.fetch) {
var s = document.createElement('script');
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js';
document.getElementsByTagName('head')[0].appendChild(s);
}
})();
</script>
Please let me know if this works and I'll update the first post.
Last edited by glennrocksvb; 11-25-2018, 03:23 AM.
See the now working embedded Instagram post in post #6 which uses the full Instagram post URL https://www.instagram.com/p/Bek6dtKgdQQ/ instead of just Bek6dtKgdQQ
This vBulletin 5 modification displays user's social network profile links in postbit.
Features:
Admins have ability to choose from up to 20 social networks and can selectively choose which social network icons to enable. Available social networks are:
Facebook
Twitter
Instagram
Skype
YouTube
Pinterest
Vimeo
For me nothing shows. The same thing happens on my own forum. The dialog box appears allowing me to paste the url but when posted it's just empty space.
When adding or without the slash, I'm afraid the result is the same. I've been in other forums and the same will happen to me. Where should I be looking to resolve ?
I hoped another machine and the result is the same.
No, it doesn't work in vB6. The online/offline status icon has changed to Font Awesome icon in vB6 and the HTML and CSS classes have changed as well....
Comment