Announcement

Collapse
No announcement yet.

Instagram BBCode [Updated]

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.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      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.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          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.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          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.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              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.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


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

                  Comment


                    #26
                    I'm going to give adding this BBcode a go.

                    Glenn, I was also curious, how you added / changed the Social Media Share Icons in your Postbit (I guess that is correct term), below your Avatar.

                    Thanks.

                    Comment


                      #27
                      That's the "User Social Network Icons in Postbit" mod.

                      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
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                      • slowstreamer
                        slowstreamer commented
                        Editing a comment
                        Thanks for the link Glenn. I got the Instagram BBcode working. I will ask our BOD if they would like for me to add additional Social Network Icons.

                      #28

                      testing

                      ​​​​​​​

                      Comment


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

                        Any ideas? I'm using vBulletin Cloud.

                      • glennrocksvb
                        glennrocksvb commented
                        Editing a comment
                        Do not include the slash "/" character.

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

                      Comment


                        #30
                        Here's the IG post you were trying to post. I removed the slash.

                        ​​​​​​
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"