Created
April 25, 2018 23:31
-
-
Save whoisryosuke/ce4cb2605c41b55efcd7dbb467b62a32 to your computer and use it in GitHub Desktop.
Instagram component to quickly embed IG posts inside a component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default class BlogPost extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
'instagram': false | |
}; | |
} | |
componentDidMount() { | |
if (window.instgrm || document.getElementById('react-instagram-embed-script')) { | |
if(this.state.instagram == false) | |
{ | |
window.instgrm.Embeds.process() | |
} | |
} else { | |
// Create script element with Instagram embed JS lib | |
const s = document.createElement('script') | |
s.async = s.defer = true | |
s.src = `//www.instagram.com/embed.js` | |
s.id = 'react-instagram-embed-script' | |
const body: HTMLElement | null = document.body | |
if (body) { | |
body.appendChild(s) | |
} | |
// Run Instagram function to show embeds | |
if (window.instgrm && this.state.instagram == false) { | |
window.instgrm.Embeds.process() | |
} | |
// Set IG state to true so the process doesn't run again | |
this.setState({ | |
'instagram': true | |
}); | |
} | |
} | |
render() { | |
return( | |
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BcdHbhHBWZc/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:28.055555555555557% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BcdHbhHBWZc/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">#Dabs anyone? 🍯🔥🔩💨 @californiagold_concentrates #hightimes #harvestcup #errl #dabstagram #wax #weedporndaily #recycler #glassporn</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/weedprndaily420/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> WeedPornDaily</a> (@weedprndaily420) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-12-08T20:38:11+00:00">Dec 8, 2017 at 12:38pm PST</time></p></div></blockquote> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment