Instagram BBCode [Updated]

[glennrocksvb]

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.

<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.

<!-- 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.

[glennrocksvb]

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.

[glennrocksvb]

Not working anymore since the upgrade to 5.4.5.

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.

[Fleiding]

Not working anymore since the upgrade to 5.4.5.

[glennrocksvb]

No, this is only for vB5.

[artyx]

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

[naijafinder]

View this post on Instagram

testing

[glennrocksvb]

It's due to how iPhones apparently paste copied URLs as formatted hyperlinks without an option to paste as plain text like Android does.

[vhforum]

This is my only option when I hit the three dots..



Also, when I copy/paste the link is pastes as a link. No way to even get to ID #. Both Tweet and IG BBCodes not working for me. (I’m on cloud)

[glennrocksvb]

I also have the same issue with the IG code. The twitter code works fine. My IG code that works is:

<iframe src="//instagram.com/p/{param}/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<div data-ig-param="{param}"></div>

But I do not want to define the height and width.

mito22 who initially said the IG bbcode was not working but it has been working since. I don't remember what he did though. Take a look at one of the threads in his forum that has IG at http://www.daidegasforum.com/forum/a...ione-sul-forum

[jjblaze]

I also have the same issue with the IG code. The twitter code works fine. My IG code that works is:

<iframe src="//instagram.com/p/{param}/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<div data-ig-param="{param}"></div>

But I do not want to define the height and width.

[mito22]

I have no idea why the [ig] tag is not parsed on your forum.

Do you have other custom BBCodes and do they work? Or is it just the Instagram BBCode that is not working?

I've got some BB codes... and they work.....

[glennrocksvb]

I have no idea why the [ig] tag is not parsed on your forum.

Do you have other custom BBCodes and do they work? Or is it just the Instagram BBCode that is not working?

[mito22]

Is "Allow BB Code" set to Yes in the Channel Manager for the corresponding forum channel?

Yes..... on ALL the forum and subforum

[glennrocksvb]

Is "Allow BB Code" set to Yes in the Channel Manager for the corresponding forum channel?