vb.org Archive - BB Code Enhancements - [vBMods.rocks] 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>

Example: [ig]InstagramPostIdHere[/ig]
Other Options: Select Yes to all starting from "Remove Tag If Empty" option

Button Image (optional): /path/to/instagram/icon.png

You could download this Instagram icon: https://vborg.vbsupport.ru/external/2017/09/1.jpg
Right click and choose "Save image as..." and then upload to your server. Then specify the image path in the Button Image option. If specified, a new button for this BB Code will appear 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

Demo:

See demo here

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 in vB5. This version of mine works in those scenarios.

This mod uses the latest way to embed Instagram posts via the oEmbed endpoint. See more info at https://www.instagram.com/developer/embedding/

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.00904 seconds Memory Usage 1,717KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (1)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: