Say, I have a media ID (eg. 1075297042445691366_195350057). How to get the Embed HTML using the oEmbed API?
This API accepts only shortcode (which is different from media ID).
Or How to get the shortcode of an media ID?
Any media object returned by the API has a field called 'link' that is the URL representation of the media. You can use this link as 'url' parameter of the oembed endpoint.
If anyone finds this question in the future I spent quite a while trying to solve it.
This implementation deserves 99.9% credit to this answer by Nick Hanshaw. All I did was include a CDN link to the BigInteger.js library which is required, but not part of Nick's code. This is currently working for me right now by passing the Media ID as a string into the function, then returning the full string of the Instagram photo URL:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.40/BigInteger.min.js"></script>
<script type="text/javascript">
function getInstagramUrlFromMediaId(media_id) {
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
var shortenedId = '';
media_id = media_id.substring(0, media_id.indexOf('_'));
while (media_id > 0) {
var remainder = bigInt(media_id).mod(64);
media_id = bigInt(media_id).minus(remainder).divide(64).toString();
shortenedId = alphabet.charAt(remainder) + shortenedId;
}
return 'https://www.instagram.com/p/' + shortenedId + '/';
}
</script>
Related
I'm using the PowerBI REST API along with ADAL.js and getting Dashboards. I want to embed a Dashboard in an IFrame. I'm using Angular.JS
So what did was something like this. Notice I have used "*" as the IFrame Target Origin. dashboardEmbedUrl is obtained from the API call
<iframe id="PBDashboard" ng-show="dashboardVisible" src="{{dashboardEmbededUrl}}" frameborder="0" style="height: 100vh; width: 100%"></iframe>
and in my controller
var iframe = document.getElementById("PBDashboard")
const loadIframeDashboardEventListner = function() {
const token = localStorage.getItem('adal.access.token.keyhttps://analysis.windows.net/powerbi/api');
iframe.contentWindow.postMessage(JSON.stringify({
action: "loadDashboard",
accessToken: token
}), "*") //target is *. what should be the specific URL needed here
}
and
iframe.addEventListener("load",loadIframeDashboardEventListner);
This works perfectly fine but using "*" triggers a security warning in SonarCloud. It says to specify a target. I'm not sure what the target should be. The API call also gives a webUrl along with the embedUrl. I used the webUrl instead of the "*" and it rendered the IFrame data but also gave the following error in console
On first sign I have the following code:
Accounts.onCreateUser(function(options,user){
if (typeof(user.services.facebook) != "undefined") {
user.services.facebook.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
}
return user;
});
Which results in the following URL string
http://graph.facebook.com/[myfacebookid]/picture/?type=large
Yet when it renders that url and returns
<img scr="http://graph.facebook.com/[myfacebookid]/picture/?type=large" alt="My Name">
All I see is a broken image. How can I pull this in so that it renders the facebook profile picture?
I use a helper function based off of the Facebook ID of the user to grab the image on the server. I notice my url has /picture? and your has /picture/? Hope this helps.
userPicHelper: function() {
if (this.profile) {
var id = this.profile.facebookId;
var img = 'http://graph.facebook.com/' + id + '/picture?type=square&height=160&width=160';
return img;
}
},
I don't know how I missed this before, but is this the src attribute on the image tag is actually written as scr:
<img scr=
Should be...
<img src=
You have http instead of https.
So:
"https://graph.facebook.com/" + id + "/picture/?type=large";
This was my problem.
hi i'm having a problem with sharepoint web part
so i want to call message box everytime user input is wrong
so for example if user input password more than 15 than there will be message box that says"Password lenght max 15"
when i wrote
Messagebox.show("Password lenght max 15") it works fine,but if i try to fill password more than 15 than it return error that says sharepoint cannot support message box
so i'm wondering if there's a way to use message box in sharepoint
any help will be appreciated
FYI i put the Messagebox.show in my save button click
thank you
sorry if my english are bad
Message box is not supported in ASP.NET Application so similar in Sharepoint.
SharePoint Support MessageDialog.
SP.UI.ModalDialog.showModalDialog(options)
If you want to open through server side, then you need to create JS function and call it through C# or as below
hyperLink.NavigateUrl = "javascript:SP.UI.ModalDialog.ShowPopupDialog('" + url + "')";
You can send proper string as well using options.
This may be old post, but accepted answer does not work too good in Sharepoint 2013, at least for me. Instead, I have to use this script:
<script ID="callMyFunction">
function myFunction() {
var element = document.createElement('div');
element.innerHTML = 'Hello World, I am the dialog content';
var options = {}
options.title = "Name of dialog";
options.width = 400;
options.height = 300;
options.html = element;//MSDN states it should be string, which is wrong. This is supposed to be DOM element
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);//This starts function "showModalDialog" after loading "sp.ui.dialog.js", if it was not loaded yet.
}
</script>
and call it from my WebPart like this:
Page.ClientScript.RegisterStartupScript(this.GetType(), "callMyFunction", "myFunction()", true);
If you want to use Ali Murtaza answer, remember to load script below, as it seems to be not loaded by default:
<script type="text/javascript" src="_layouts/15/sp.ui.dialog.js"></script>
I need to load the YouTube API locally (Google Extension not allowing external scripts). So I downloaded the files into my directory:
https://www.youtube.com/player_api
https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
However, when I try to programmatically inject this via a content script, it gives the following error:
Uncaught ReferenceError: YTConfig is not defined
To the OP: You were almost there! I'd like to acknowledge Jonathan Waldman, MSDN author, for mentioning this technique during one of his training sessions...
To review, YTConfig is defined at:
http://www.youtube.com/iframe_api
And here:
http://www.youtube.com/player_api
The iframe_api is the preferred link to use.
To recap, the links you provide above each link to JS code:
https://www.youtube.com/player_api
https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
You also need a Div tag with an id of "player" and another Script tag that lets you specify which video you want to see. So there are four Script tags total:
For content in iframe_api
For content at https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
For the player Div tag:
<div id="player"></div>
For JavaScript that configures the video
This translates loosely to:
<script>...place the player Div here</script>
<script>...place code from www-widgetapi-vfl4qCmf3.js here...</script>
<script>...place code from iframe_api here...</script>
<script>...place the code below here</script>
Here is the code for the final Script tag (note that you will likely want to change the videoId property so that it points to the ID of the desired video on the YouTube site):
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
When I did the above, the page worked and I had all of the YouTube code local to my development machine.
In the web app I am making, I use the classical Express+Jade to render client pages and also expose some REST API (let's say : "user list API").
These client pages use provided API to retrieve "user list" and display it. To display it, I use the handlebars template library once the data is retrieved.
It seems a bit dirty to me, using two template engines, parsing the code twice, how to make it better ?
Note : I already optimized the thing by sending the initial data within the client page by inserting it a script variable. This variable is then displayed the same way data received by API would be. The API is only used in case of data refresh.
UPDATE : using jade both server and client side is a good idea but how to seperate / specify ? Wich part of the rendered template should be done by when serving the page and what part will be used by the client ?
That's very easy to use Client side + Server side templating.When we are building some web apps,we should use ajax to get some data and use the callback function to deal with it.So we should render these data on the client side.
The question is how to render them on client side?
Now We just need a client side jade.js.
Follow this document : https://github.com/visionmedia/jade#readme
First
git clone https://github.com/visionmedia/jade.git
Second
$ make jade.js ( in fact the project has already compile the file for us )
so we just need to copy this file to the path that we use.
Third
read my demo below :
<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
<script type='template' id='test'>
ul
li hello world
li #{item}
li #{item}
li #{item}
</script>
<script>
var compileText = $("#test").text();
console.log( typeof( compileText ) );
var fn = jade.compile( compileText , { layout : false } );
var out = fn( {item : "this is item " } );
console.log( out );
$("body").append( out );
</script>
Now you can see the output result in the body
hello world
this is item
this is item
this is item
After reading this demo I think that you would know how to seperate jade server side and client side.If you can understand which one compile the jade template,then all the questions are easy.
Maybe you would have another question now.How to write some jade template codes in *.jade?The document also provide us a way to do it.This Tutorial may help you.
index.jade
!!!5
html
head
title hello world
body
ul#list
script#list-template(type='template')
|- for( var i in data )
| li(class='list') \#{ data[i].name }
|- }
index.js
/* you javascript code */
var compileText = $('#list-template').text();
var compile = jade.compile( compileText , { layout : false } );
var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
var outputText = compile( data );
$("#list").append( outputText );
Use http://github.com/flatiron/plates template engine which will work both on the client side and server side.
A few weeks ago I wrote an npm package for Handlebars templates to share them between client and server. It's pretty basic, but it's been working really well for me so far:
https://github.com/jwietelmann/node-handlebars-precompiler
Edit: I'm separately using "hbs" as the package for server-side rendering. The precompiler just delivers precompiled templates to my public javascripts directory whenever I update my hbs views.