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:
Updated Code:
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.
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
(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.
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>
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>
HTML Code:
<!-- Fetch Polyfill for IE 10+ --> <script> (function() { if (!window.fetch) { var s = document.createElement('script'); s.async = false; s.src = 'https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js'; document.getElementsByTagName('head')[0].appendChild(s); } })(); </script>
Other Options: Select Yes to all starting from "Remove Tag If Empty" option
Button Image (optional): You could download this Instagram icon
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.
Comment