Embedding Instagram via JavaScript - javascript

We are using Instagram's oEmbed-API to get embed codes. However, we do not want to solely rely on that API and generate embed codes ourselves. The embed code as provided by the API (or the website) includes a lot of html, css image data and text content, all of that already has to be there before you can work the embed js on it. This is a problem because we cannot implement a generic embed code but have to know the instagram content for each photo or video in advance.
My question is: Ist there a generic embed code, something like this, for instagram?
<script async defer=\"defer\" src=\"//platform.instagram.com/en_US/embeds.js\"></script>
<script>instgrm.Embeds.genenerate('some instragram ID for instance')<script/>

You can use iframe to embed like this:
<iframe src="https://www.instagram.com/p/BFKjVxkBsCC/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
adding /embed to instagram post URL will give you image that can be embedded
adding /embed/captioned will add caption to the image
Here is link to easily generate embed code: https://www.picodash.com/instagram/embed#https://www.instagram.com/p/BFKjVxkBsCC/

Related

Displaying the video in the TinyMCE editor

Good afternoon, I will explain the problem in details. I'm connecting the TinyMCE editor version 4.6.4 to my site. It has plugins in the Media plugin through which you can insert media files into the editor.
Thus, I add video to the editor. Actually, you can add a video in different ways, and one of them is to give the editor a direct link, and I do so.
There is a parameter media_live_embeds in the initialization of the editor, which can be inserted into the position true or false, and if the parameter is inserted into true, then, the added video can be played directly in the editor.
The problem is that if I give a link to a video from my site (vvv.mp4 example), then, it does not play (as if the parameter is inserted in media_live_embeds: false).
But if for example I add a video link from youtube (example https://www.youtube.com/watch?v=q6_yRWPd4Yc) then it works.
Here on the screen there are 2 videos, the first one with youtube link, and the second with a link from the site, the first one is played directly from the editor, and the second one is not.
What's my mistake? Who had this problem?
Here is the editor, you can test yourself.
The name of the property is media_live_embeds so this will permit to played directly in the editor embeds media. When you insert a video URL, tinyMce construct embed video code integration :
<iframe width="560" height="315" src="https://www.youtube.com/embed/LIMYj5mpMM4" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
But when you insert a video from your website without create a url access to content video or from local files, tinyMce will create a html element : <video><video>. So you couldn't play it in the editor since it wasn't and embeds media url.

enable embedded youtube videos "allowfullscreen" through CSS

I am using opencart 2.3 (opensource CMS, it is an eCommerce)
I have embeded youtube videos, but after adding multiple products, I noticed that "full screen" is not enabled.
From what I read, all I need to do is add the attribute "allowfullscreen" in the HTML code to something like this
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_drgwergwwe" frameborder="0" allowfullscreen></iframe>
Now I found the javascript code that generates the attributes and I can add the "allowfullscreen" attribute to be generated as well for future products I add, but what do I do about all the products already created without said attribute?
Can I add this attribute through the use of CSS? I am able to change the iframe width, height, but what about the "allowfullscreen" attribute?
Anything would be helpful really.
Thanks :)

auto-detect and auto-embed youtube videos. PHP or Javascript?

I run a 4chan style imageboard. When users post youtube or soundcloud links, I would like for the board to give a second link which, when clicked, would embed the video.
If I am not mistaken, 4chan uses JS to accomplish this. I have also seen many forum admins using php to do this. I know that wordpress uses php to do this.
If I went with php, I was thinking of going with something based on this:
https://www.warpconduit.net/2013/04/13/automatically-embedding-video-using-only-the-url-with-the-help-of-oembed/
For JS I am not entirely sure how to go about it. I would probably use a regex to detect youtube urls and then convert that information to an embed
You don't need RegEx, PHP or oEmbed to do this. Both sites allow iFrame embeds. So when a user gives a link just add the iframe embedding part yourself (around their link) and output that as part of the user's post.
Use String functions like indexOf to see if the link contains the word "soundcloud" or "youtube" then adjust user's given link to correct format for the iframe embedding.
Some examples:
Youtube : format = youtube.com/embed/ + User Link
User puts https://www.youtube.com/watch?v=KKE0Py64jmk so your code makes it as...
<iframe width="500" height="300"
src="https://www.youtube.com/embed/KKE0Py64jmk">
</iframe>
SoundCloud : format = w.soundcloud.com/player/?url= + User Link
User puts https://soundcloud.com/thenextmen/sofa-feat-pupajim then your code changes it to...
<iframe width="500" height="300"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com/thenextmen/sofa-feat-pupajim">
</iframe>

Youtube Iframe Api get video title

I am using the youtube iframe api to embed newest uploaded videos from a youtube channel onto my webpage. I am successfully able to do this; however, I need to get the title of each video as well and display it within the html next to each video. So far, I cannot find a solution to do so.
This is my code to retrieve one video. I am using this method so that I can embed the videos within a carousel that I have made, with each embedded video fetching the next latest upload (a different index from the same playlist).
<iframe width="300" height="300" src="http://www.youtube.com/embed?autoplay=0&max-results=1&controls=0&showinfo=1&rel=0&listType=user_uploads&list=channelName&index=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Can anyone provide me with some tips on how to obtain the title (and possibly other information related to the video such as a date)?
All help is greatly appreciated!
Thank You!
-TT
With the new YouTube API there's no way to do this using Javscript or jQuery. However, there seems to be solutions that use PHP:
Solution Using PHP
If you're not comfortable with PHP and/or you're not uploading a lot of YouTube Videos, I would suggest either hard-coding the titles into your HTML or creating a column(s) in your database for the relevant information.

I'm trying to add a facebook recommend button to a product page

I've already gone to the facebook developers page about this, and almost everything works when I use the resource they give me, which only requires that I provide the URL to be liked before generating the code. The problem is that it takes the website's image instead of the product's image, and I was wondering if someone knew how to edit or add to the code Facebook Dvelopers gave me so that I can choose the image that will appear on everyone's facebook walls when they choose to share. Here's the inframe code:
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.4-hmall.org%2FProduct%2Fclubsupplies-bags-totes%2FBAG2.aspx&width&layout=standard&action=recommend&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
Not 100% sure this is what you are looking for but it sounds like it might be.
Try using the FB Image Meta Tag on your page
<meta property="og:image" content="img/facebook.png"/>
here is a good article about all the FB meta tag stuff
http://davidwalsh.name/facebook-meta-tags
Use facebook's og:image meta tag. If it does not work check that facebook has not already cached the header image before you added meta data. Put your URL into this site and facebook will help you out:
http://developers.facebook.com/tools/debug

Categories