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

    Official - Free Instagram BBCode

    One way to integrate social media with forums is to embed posts from Instagram into forum posts.

    Go to AdminCP > Custom BB Codes > Add New BB Code and enter the following information:

    Title: Instagram
    BB Code Tag Name: ig
    Replacement:
    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;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()}};var h=document.createElement("script");h.src="//api.instagram.com/oembed/?url="+encodeURIComponent("http://instagr.am/p/{param}/")+decodeURIComponent("%26")+"callback="+a,e.parentNode.appendChild(h)}();
    </script>
    
    Updated Code:
    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>
    The updated code above 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>
    Example: [ig]InstagramPostIdHere[/ig]

    Other Options: Select Yes to all starting from "Remove Tag If Empty" option
    Button Image (optional): You could download this Instagram icon Click image for larger version  Name:	instagram-21x21.png Views:	1 Size:	1.1 KB ID:	6114 (right click and choose "Save image as...") and then upload to your server. Then specify the image path in this option. If specified, a new button for this BB Code will appear in the editor. I've implemented this on this site, See Instagram icon in the editor.


    How to Get Instagram Post ID:
    While in an Instagram post in an overlay, click the "..." in a post and then click "Go to post". The post will be opened in a new tab/window. The ID is in the URL. If you are already in a post in a new tab/window and not in overlay, then just look for the ID in the URL. The URL has this format:

    https://www.instagram.com/p/XXXXXXXXX/

    where XXXXXXXXX is the post ID

    NOTE: With the updated code, using the full Instagram URL is now also working.

    Demo:
    This: [ig]BS2kMaZl2XO[/ig]

    will be rendered as:



    This also supports Instagram Video posts.



    And also Instagram Slideshow posts.




    Other sites may implement this same Instagram BBCode but the embedded Instagram post may not appear when reply is posted or when editing and saving or when previewing which is all done via AJAX. This version of mine works in those scenarios.
    Last edited by glennrocksvb; 11-26-2018, 11:25 AM. Reason: Updated code

    #2
    This is a free mod but it's not easy to implement as it looks. It took me several hours to finish it to make sure the embedded Instagram post works when saving, editing, previewing, clicking See More in Activity Stream. As vB5 uses AJAX to do those actions, it is not straightforward to implement a Javascript-based BBCode that works on all those scenarios.

    Please consider donating if you find this BBCode useful.

    Comment


      #3
      I'm having a hard time getting this to work right...

      I used the code you provided, and used the post ID in the correct area, yet it isn't working....

      any suggestions on what I'm doing wrong? I attached a screenshot. Click image for larger version

Name:	Screen Shot 2017-12-07 at 5.30.43 PM.png
Views:	1
Size:	238.5 KB
ID:	8127

      Comment


        #4
        hijabforum, you didn't follow this:
        Originally posted by glennrocksvb View Post
        Other Options: Select Yes to all starting from "Remove Tag If Empty" option
        And Button Image option should be the Instagram icon URL not HTML tags. In my case, it is https://vbmods.rocks/images/instagram-21x21.png

        Comment


          #5
          Thank you its working now

          Comment


            #6
            Don't work..... where is the issue? Tried with option YES and NOT (NOW THE OPTION ARE ALL on YES)

            Click image for larger version  Name:	insta-err-1.jpg Views:	1 Size:	87.9 KB ID:	9111

            http://www.daidegasforum.com/images2...nsta-err-1.jpg

            Testing... but...

            http://www.daidegasforum.com/forum/a...ione-sul-forum




            The code to instert is like this?

            [ig]https://www.instagram.com/p/Bek6dtKgdQQ/[/ig]
            Last edited by glennrocksvb; 11-25-2018, 03:21 AM.

            Comment


              #7
              Did you put the correct Instagram post id inside the ig tag?

              Comment


              • mito22
                mito22 commented
                Editing a comment
                Yes.... on your forum RUN... on mine not....

                Example...












                http://www.daidegasforum.com/images2...sta-errore.jpg

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

              Comment


                #9
                Originally posted by glennrocksvb View Post
                Is "Allow BB Code" set to Yes in the Channel Manager for the corresponding forum channel?
                Yes..... on ALL the forum and subforum

                Comment


                  #10
                  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?

                  Comment


                    #11
                    Originally posted by glennrocksvb View Post
                    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.....

                    Comment


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

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

                      Comment


                        #13
                        Originally posted by jjblaze View Post
                        I also have the same issue with the IG code. The twitter code works fine. My IG code that works is:

                        Code:
                        <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

                        Comment


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

                          Click image for larger version

Name:	6EFEBC29-917B-4112-90C7-96EA73D03F74.jpeg
Views:	1
Size:	49.0 KB
ID:	9910

                          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)

                          Comment


                          • glennrocksvb
                            glennrocksvb commented
                            Editing a comment
                            It's due to how iPhones apparently paste copied URLs as formatted hyperlinks without an option to paste as plain text like Android does.

                          #15
                          testing

                          Comment

                          Working...
                          X