Announcement

Collapse
No announcement yet.

Instagram BBCode

Collapse
This is a sticky topic.
X
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    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

    Comment


      #17
      No, this is only for vB5.

      Comment


        #18
        Not working anymore since the upgrade to 5.4.5.

        Comment


          #19
          Originally posted by Fleiding View Post
          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.

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            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.

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

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            I have updated the code above. It now also works using the Instagram post URL aside from just the post ID.

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            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

          #21
          Working again!

          Comment


            #22
            The initial version did not work. Now everything is OK. Thanks!

            Comment


              #23
              Thanks. The code in the first post is now updated.

              Comment


                #24
                For those who care about IE, I have updated the code in the "Fetch Polyfill for IE 10+" script for IE. Please refer to post #1.

                Comment


                  #25
                  Never mind, I found the problem
                  Last edited by tehfalloutshelter; 02-22-2019, 10:23 AM. Reason: I found my problem....

                  Comment

                  Working...
                  X