The question may seem confusing so let me clarify.
Github lets you see the source code of a files in a repo. I want to include them in iframes but am unsure how and suspect someone has already done this before.
In my case I want to add https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee to an iframe so that from my website people can see the code as it evolves.
A GitHub page itself wouldn't be put directly in a iframe (because of the X-Frame-Options: deny HTTP header).
That leaves you with the GitHub API for contents
GET /repos/:owner/:repo/contents/:path
Like: https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.
You should be able to put that content in a iframe (as in this answer)
Here's a concrete example of how this can be done via the GitHub API. We request the encoded content and insert it directly into the iframe.
<iframe id="github-iframe" src=""></iframe>
<script>
fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
.then(function(response) {
return response.json();
}).then(function(data) {
var iframe = document.getElementById('github-iframe');
iframe.src = 'data:text/html;base64,' + encodeURIComponent(data['content']);
});
</script>
Here's the code in action https://jsfiddle.net/j8brpdsg/2/
I just found a way to do this using Gist-it
Usage
Take a github file url and prefix it with http://gist-it.appspot.com and embed the result within a tag:
<script src="http://gist-it.appspot.com/http://github.com/$file"></script>
Here's a test I just made. Works! :)
You'll need to hack the iframe and css a bit to get it to work without tags in your document, but it's possible:
https://www.arctype.co/blog/embedding-github-gists-via-iframe
<iframe frameborder=0 style="min-width: 200px; width: 60%; height: 460px;" scrolling="no" seamless="seamless" srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src="https://gist.github.com/sundbry/55bb902b66a39c0ff83629d9a8015ca4.js"></script></body></html>'></iframe>
Related
I am using Firebase Dynamic Links REST API to generate short links.
If I paste that link into the browser it redirects and loads the appropriate image. But when I use the same link to load image in <img> tag in my webpage it fails.
I created a sample(codesandbox link below) trying to load the same image. I put two image tags, one with bit.ly shortener and one generated with the firebase dynamic links generator. The bit.ly link loads fine.
Sample codesandbox : https://codesandbox.io/s/using-img-tag-forked-ufnd31?file=/index.html
Sample short link for a image : https://files.flux.chat/vs4fy3cY7s1aMnS57
Create dynamic link payload
URL : https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=WEB_API_KEY
BODY : {
"dynamicLinkInfo": {
"domainUriPrefix": "https://files.flux.chat",
"link": "https://firebasestorage.googleapis.com/v0/b/fluxchathq.appspot.com/o/business%2F5Nmu0449tlNVWVdOpo8h%2Fincoming%2FNA?generation=1654498929454543&alt=media&token=664c135f-48f3-4de8-8ba7-d75ca3a5362f",
"navigationInfo": {
"enableForcedRedirect": true
}
},
"suffix": {
"option": "UNGUESSABLE"
}
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<img class="image" src="https://files.flux.chat/vs4fy3cY7s1aMnS57" />
<img class="image" src="https://bitly/3Lr8Bq1" />
</div>
</body>
</html>
I don't have any experience with this, but I think shortened urls won't work as an image source-- they don't point to an image directly, they redirect to an image.
Here's an old answer that seems relevant: https://stackoverflow.com/a/27062627/954986
That is not possible unless you own the domain where you want the shortened URL. For example, to do that, you would need to own (or have access to) the website bit.ly.
bit.ly is not hosting your video or your image, it only redirects them to the real URL when you click on the link.
[...]
You will see that your image is NOT in the code. It only redirects to the page that DOES contain your image.
Perhaps you could make an XHR request in javascript, and see if it returns a 3** status with some other location, and use that as the source for the image? (edit: the short link doesn't have CORS enabled, so this probably won't work)
I just tested with curl (well, httpie which is far superior), and the sample shortlink you provided gives a 302, with the Location response header being the actual image.
edit: I tested your sandbox, and the flux.chat image source shows a GET request resulting in a 403 Forbidden status code in the browser console. Maybe it's because it's being called from localhost? But firebase sees something about the request it doesn't like (maybe origin being localhost, maybe it being in an image source, maybe ..?) and that's preventing it from loading.
Sorry I don't have anything more concrete for you, definitely a strange issue.
so I'm aware there are already similar questions on here, the reason I ask this question is because I cannot get any of the other solutions to work.
So what I've do is I have an iframe in my html like so:
<iframe name="frame1" id="frame1" scrolling="auto" frameborder="no" onload="resizeIframe(this)" style="width:100%; height:1000px;" src="https://www.treeofgnosis.com/community/discussion/151/faq"></iframe>
and then I have added the code to add custom CSS to the iframe like so directly below in the html:
<script type="text/javascript">
jQuery(function($) {
var $head = $('#frame1 head');
var url = "/wp-content/themes/layerswp/iframe.css";
$head.append('<link rel="stylesheet" type="text/css" href="' + url + '" />');
});
alert("Alert\$head function us running");
</script>
From what I can tell, the code is all running (the iframe shows and so does the alert) - but the custom is not appending into the iframe's content's head when I check the DOM.
When I manually insert the into the head after the page has loaded, the css does apply, so the error isn't there.
Here is a link to the page I'm working on, the iframe is right at the bottom of the screen: https://www.treeofgnosis.com/faq/
Any help would be appreciated, I have no idea why things aren't working. I have also tried some other code variations - but the situation remains pretty much the same. So really, I am really looking for WHY things aren't working.
(PS in the console log, there are no errors related to this)
I am trying to convert my IPython notebook to an html file so that I can put it on my wordpress blog. I have used the following command to generate an html file for the notebook
ipython nbconvert notebook.ipynb
then I copied the html code and pasted it into the 'text' tab. The resulting blog post sort of looks like the ipython notebook, however the problem is that the markdown equations do not show up and the headings look strange. Has anyone managed to display an IPython notebook in a wordpress blog post successfully? If so, how?
In this November 2013 blog article http://www.josephhardinee.com/blog/?p=46, the author goes quickly through the conversion process.
He mentions the need to install the Simple Mathjax plugin to make equation display work.
Now, what I have tested to work on my self-hosted Wordpress blog:
Copy paste the html output of nbconvert (only what is inside the <body> tag) in the "Text" tab.
disable the Worpress html code parsing because otherwise images do not display (as explained in the blog post). See below for two possible methods.
Activate Mathjax: either with a plugin or manually in the post code
Mathjax With plugin
I have not tested the Simple Mathjax plugin, but I have LaTeX for WordPress which works for me.
Manual Mathjax activation
Copy paste from nbconvert output the two <script> tags that activate Mathjax:
1) Load the library:
<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
2) Launch it:
<script type="text/javascript">
init_mathjax = function() {
if (window.MathJax) {
// MathJax loaded
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
},
displayAlign: 'left', // Change this to 'center' to center equations.
"HTML-CSS": {
styles: {'.MathJax_Display': {"margin": 0}}
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}
init_mathjax();
</script>
Disabling code HTML parsing
The blog post suggests to activating the PS Disable Auto Formatting plugin to make the notebook images work. I have tested it successfully but it has one drawback: it messes up with the rendering of all the other posts... that's quite an issue!
I have tested instead the Raw HTML plugin which enable a per-post tuning. I've made images work by selecting the Disable automatic paragraphs option (the plugin creates a new box in the post editor).
Remaining issues:
while the notebooks should display fine with this method, there is still work to get the syntax highlighting of code cells to display properly. However the Python source code is already parsed by CodeMirror, so it should just be about loading the appropriate CSS code.
One approach is to embed the notebook using an iframe. This original idea came from the blog post http://onsnetwork.org/eimd/2014/08/08/how-to-enter-ipython-notebooks-to-wordpress/, but I've made several improvements. The straightforward way to do this is to:
Install the Raw HTML plugin to Wordpress. This only needs to be done once.
Convert the notebook to HTML ipython nbconvert YOUR_NOTEBOOK.ipynb
Upload the resulting HTML to Wordpress as a media file. Take note of the URL where it is uploaded to.
Insert the iframe between raw tags in your post. For example:
[raw]
<iframe id="ipython_notebook_frame"
style="height: 500px; width: 100%; padding: 0; border: none;"
src="URL_OF_NOTEBOOK">
</iframe>
[/raw]
Unfortunately, this straightforward approach doesn't work very well since the height is never right and one tends to get annoying horizontal scroll bars. However, since the uploaded html is hosted on the same domain as the blog post, this can be fixed using some javascript. The following recipe seems to work reasonably well for getting the width and height right, resulting in a clean blog post:
[raw]
<script type="text/javascript">
function resizeIframe(ifrm) {
ifrm.style.height = ifrm.contentWindow.document.body.scrollHeight + 'px';
// Setting the width here, or setting overflowX to "hidden"both
// seem to work. It may be that one turns out to be better; for
// now I set the height.
ifrm.style.width = ifrm.contentWindow.document.body.scrollWidth + 'px';
}
</script>
<script type="text/javascript">
function onLoad() {
var ifrm = document.getElementById('ipython_notebook_frame');
setTimeout(resizeIframe, 0, ifrm);
}
</script>
<iframe id="ipython_notebook_frame"
style="height: 500px; width: 100%; padding: 0; border: none;"
src="URL_OF_NOTEBOOK">
</iframe>
<script type="text/javascript">
// By deleting and reinstating the iframe src, and by using setTimeout
// rather than resizing directly we convince Safari to render the
// page. I've lost the link for where I found this trick, so
// can't properly credit it.
var iframe = document.getElementById('ipython_notebook_frame');
iframe.onload = onLoad;
var iSrc = iframe.src;
iframe.src = '';
iframe.src = iSrc;
</script>
[/raw]
For a little more detail on this, as well as an example you can take a look at this post: http://www.bitsofbits.com/2015/01/19/ipython-notebooks-in-wordpress
I couldn't find any solutions on google which can make the newly introduced facebook posts embed to responsive. Does anyone got a solution or tricks? Thanks
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore">Post by Facebook Security.</div></div>
Set data-width to auto to use fluid width:
<div class="fb-post" data-href="url" data-width="auto"></div>
I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-width attribute, we can listen for width changes on our page, update the data-width attributes and then re-render the plugins.
See http://jsfiddle.net/brohde/GRcen/
Usage: $('#post').autoResizeFbPost();
Plugin logic:
On document ready:
Save original HTML of $('#post') to preserve any <div class="fb-post"> elements – the Facebook SDK removes this from the DOM.
The Fix: Update all <div class="fb-post"> elements with the correct data-width attribute (Uses $('#post').width() ).
On window resize, run The Fix again and also call FB.XFBML.parse(); to render the Facebook plugin(s). The plugin will wait 1 second after the last window resize to avoid multiple DOM updates and FB.XFBML.parse(); calls.
If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:
Can I customize how the post is displayed on my web page?
Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.
If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.
Details:
Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.
Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:
[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.
so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...
Another option would have been to just try on an http:// site only. At that point, I got the following errors:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
This confirms my suspicion -- you need an app ID. I added an app ID and it works.
Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.
Added - style="overflow-x: auto; max-width: 100%;"
To result in the following fb-post portion of the embed;
<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">
If you want a little more elegance can always implement styling on the scrollbar.
CSS Webkit Scrollbars - http://css-tricks.com/custom-scrollbars-in-webkit/
jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/
Hope someone finds this useful.
If yours posts are video, you can use Embed Videos instead of Embed Posts, they are responsive. You can get all others datas from open graph and create your own design.
https://developers.facebook.com/docs/plugins/embedded-video-player
Well I want to use Google api translator in my website and when I am putting this api code in my html page it's working fine.
----------------------------------google translator code :-----------------------------
<div id="google_translate_element" ></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
I want to put the code in when I am putting this code in iframe then it shows everything.
But while changing the language it changes the language of elements in the iframe it doesn't affect outside the iframe.
I guess this is why the iframe tag is used to include an external document into an existing one.
Google Translator will translate the content of the iframe only, since it has no clue about the container document.
Please see also:
http://forums.macrumors.com/showthread.php?t=467248