I'm looking for a possibility to embed instagram images to my website.
I tried the embed code from the "..." menu, but this code is way to long if I wanna use it a lot of times. Beside this, it doesnt work for me properly anyways.
I also found the old embed variant via iframe:
<iframe src="https://www.instagram.com/p/CJj1fHYpm7v/embed/" width="400px" height="610px" frameborder="0" scrolling="yes" ></iframe>
That's definitly something I prefer since it's just a little code. But I'm not sure if this is still officially supported.
I also read something about the API for it, but that solution is really confusing to me... not sure if this work for me.
So I wonder if anybody can tell me about other solutions how to embed images quick and easy, if the iframe solution is still a good way to go and other info which helps me to realize the plan.
You can get the data (urls and ids) in json format from that url:
https://graph.instagram.com/me/media?limit=25&fields=thumbnail_url,permalink,media_url,media_type&access_token=YOUR_ACCESS_TOKEN
limit controls how many items you get
You will get a response that looks like this:
{
"data": [
{
"permalink": "https://www.instagram.com/p/CJ54xbvlkY_/",
"media_url": "https://scontent.cdninstagram.com/v/t51.29350-15/137643256_251304213045078_6123570534757271423_n.jpg?_nc_cat=101&ccb=2&_nc_sid=8ae9d6&_nc_ohc=awl9dH0LssMAX9FBG6G&_nc_ht=scontent.cdninstagram.com&oh=fae6ccda08c19a6617dd5b1acf985fbe&oe=6025F7CC",
"media_type": "IMAGE",
"id": "18061654837271107"
}
]
}
To create an access token follow the steps in the documentation:
https://developers.facebook.com/docs/instagram-api/getting-started
A simple example (without errorhandling ect.) how you could use this (via php) would be:
<?php
$oJson = json_decode(file_get_contents('https://graph.instagram.com/me/media?limit=25&fields=thumbnail_url,permalink,media_url,media_type&access_token=YOUR_ACCESS_TOKEN'));
foreach($oJson->data as $entry): ?>
<a href="<?= $entry->permalink ?>">
<img src="<?=$entry->media_url ?>">
</a>
<?php endforeach ?>
Related
I have just installed Paid memberships Pro plugin and I want to pass a field into an iframe. Below is one of a number of attempts and what the subsequent source code looks like. I don't know if the issue is being caused by the fact that the PMP field also requires quotes or I am getting the syntax wrong. I have tried with quotes in the correct place (I think) see below:
<iframe src="https://www.************.com/assessment/****?email=[pmpro_member field=‘user_email']&fname=[pmpro_member field=‘first_name']&lname=[pmpro_member field=‘last_name']" style="width:100%; height:1000px;"></iframe>
I don't seem to be able to find any examples of anyone doing this (maybe you can't)?
If I put the PMP shortcode ([pmpro_member field="user_email”] directly into the HTML on a page then it picks up the correct email so I know this works. I can’t get it to pass this into the iframe though. I’m new to all this so any pointers would be appreciated.
HTML in WP page:
<iframe src='https://www.****************.com/assessment/****?email=[pmpro_member field="user_email”]' style="width:100%; height:1000px;"></iframe>
Source code:
<p><iframe src='https://www.************.com/assessment/****?email=[pmpro_member field="user_email”]' style="width:100%; height:1000px;"></iframe></p>
Hi I have managed to resolve this issue by using the 'advanced iframe pro' plugin (paid version). This allows you to take fields from the users profile and pass them into the iframe on another URL. Here is the HTML I used:
[advanced_iframe src="//www.***************.com/assessment/****?fname={usermeta-first_name}&lname={usermeta-last_name}&email={usermeta-nickname}" width="100%" height=1100px"]
This picks up the first and last name and nickname.
assuming you use it in the code, you will need to use the wp function do_shortcode
<iframe src="https://www.****************.com/assessment/****?email=<?php echo do_shortcode( '[pmpro_member field="user_email”]' ); ?>" style="width:100%; height:1000px;"></iframe>
if you use the editer you will need to enable shortcodes in iframe tag
look here for more info https://codex.wordpress.org/Function_Reference/wp_kses_allowed_html
I would like to display the content of a text file inside a HTML page (.rtf, .txt, .log,...) stored on the server.
I have tried with embed but seems that doesn't work.
<embed src="/path_to_text_file/text.rtf" width="500" height="300">
There is a "simple" method (or tag) to do that or I should scan for the content and print it with, for example, jQuery?
Something like this should do it:
<object data="/path_to_text_file/text.txt" type="text/plain"
width="500" style="height: 300px">
No Support?
</object>
Using a $.ajax() function with a .append() function inside you can easily grab the contents of a text document and display them on the page. Something along the lines of what you see below. Preform this on load of the page to immediately load the file in with the rest of the page.
$.ajax({
async:false,
url: 'folder/file.txt',
dataType: 'text',
success: function(data)
{
$('element').append(data);
}
});
Play around with it a little bit to get the correct result you are looking for. You could also use PHP but unless you really need to parse the data, PHP is a bit overkill in this situation.
is only for plugin content (flash, etc).
Try getting content using ajax, then write it with document.write;
Or use the include tag in a back end language (PHP, ASP, etc)
An iFrame might be useful in this context.
<iframe src="/path_to_text_file/text.rtf" width="500" height="300" frameBorder="0">
NOTE: apologies for the similarity to Keith V's answer and the fact he mentioned get requests - I only noticed his comment about get requests after posting my answer.
I find the following structure helpful, and allows me to style the text as a span rather than having to wield an object:
function append_url_content_to_div(url){
$.get(url, function(returned_data){
console.dir(returned_data);
var content = '<span>'+returned_data+'</span>';
$("#appendee_div").append(content);
});
}
append_url_content_to_div("https://dl.dropbox.com/s/euk874r7zd1cx0d/example_text.txt?dl=0"); //note that it has to be "dl." not "www." in dropbox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appendee_div"></div>
It works for me for dropbox content, but I don't see why it wouldn't work for publicly viewable text files. As you can see in the code, you need jquery.
I found the best way to insert HTML5 code into a website is to save the code onto a new text document and embed that document using . Then you can format the code using css and divs.
Just use php. Change the html format to php and use
echo file_get_contents("name_of_the_file.txt");
Simple as that.
You must use php because you have to output your text on the server side unless the info will not be shown to the client.
I think is the easiest way to do what you want.
I am wrapping a razor view in an iframe. The razor view is a web service on a different domain.
Here is what I am doing:
<!DOCTYPE html>
<html>
<body>
<p align="center">
<img src="http://somewhere.com/images/double2.jpg" />
</p>
<p align="center">
<iframe src="https://secure.somewhereelse.com/MyPortal?CorpID=12334D-4C12-450D-ACB1-7372B9D17C22" width="550" height="600" style="float:middle">
<p>Your browser does not support iframes.</p>
</iframe>
</p>
</body>
</html>
This is the header of the src site:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/cupertino/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>
I want the iframe src to use the CSS of the calling site.
Is there a way to pass in the CSS URL or have it inherit the CSS of the calling site?
I'd even settle for the css file location being a parameter being passed in from the originating site.
Anyone have any suggestions?
You cannot enforce your css on your site using an iframe. The css must be included in the source of the page included in an iframe. It used to be possible but in certain cases using javascript, and for the page to be on the same domain.
The only other way you may be able to use your own css is if the web service allows you to pass in the url of the css. But you would have to consult the documentation of the web service to find that out.
I would pass the CSS url as an argument to the iframe's src attribute:
<iframe src="http://somedomain.com/?styleUrl=#(ResolveStyleUrl())"></iframe>
Where ResolveStyleUrl might be defined as:
#functions {
public IHtmlString ResolveStyleUrl()
{
string url = Url.Content("~/Content/site.css");
string host = "http" + (Request.IsSecureConnection ? "s" : "") + "//" + Request.Url.Host + url;
return Raw(url);
}
}
This is of course assuming that the domain would accept a style url query string and render the appropriate <link /> on the remote page?
Eroc, I am sorry you cannot enforce your css on others' site using an iframe because most browsers will give an error like the one chrome gives:
Unsafe JavaScript attempt to access frame with URL http://terenceford.com/catalog/index.php? from frame with URL http://www.example.com/example.php. Domains, protocols and ports must match.
But this does not mean that you cannot extract the html from that page (which may be modified as per your ease)
http://php.net/manual/en/book.curl.php can be used for site scrapping with http://simplehtmldom.sourceforge.net/
First play with these functions:
curl_init();
curl_setopt();
curl_exec();
curl_close();
and then parse the html.
After trying yourself, you can look at this example below that I made for parsing beemp3 content, when I wanted to create a rich tool for directly downloading songs, unfortunately I couldn't because of the captcha but it is useful for you
directory structure
C:\wamp\www\try
-- simple_html_dom.php
-- try.php
try.php:
<?php
/*integrate results for dif websites seperately*/
require_once('simple_html_dom.php');
$q='eminem';
$mp3sites=array('http://www.beemp3.com/');
$ch=curl_init("{$mp3sites[0]}index.php?q={$q}&st=all");
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
//curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
$result=curl_exec($ch);
curl_close($ch);
$html=str_get_html("{$result}");
$ret = $html->find("a");
echo "<head><style type='text/css'>a:link,a{font-size:16px;font-weight:bold;font-family:helvetica;text-decoration:none;color:#458;}a:hover{color:#67b;text-decoration:underline;}a:visited{color:silver;}</style></head>";
$unik=array(null);
foreach($ret as $link)
{
$find="/(.{1,})(\.php)[?](file=.{1,})&song=(.{1,})/i";
$replace="$4";
if(preg_match("{$find}",$link->href))
{
$unik[]=$link->href;
if(current($unik)===prev($unik)){unset($unik);}
else{
echo "<a href='".$mp3sites[0].$link->href."'>".urldecode(preg_replace($find,$replace,$mp3sites[0].$link->href))."</a><br/>";
}}
}
?>
I know that you do not code in php, but I think you are capable of translating the code. Look at this:
php to C# converter
I spent time on this question because only I can understand what it means to offer bounty.
May be the answer seems unrelated (because I have not used javascript or html based solution), but because of cross-domain issues this is an important lesson for you. I hope that you find similar libraries in c#. Best of luck
The only way I know to achieve that is to make the HTTP request on your server side, fetch the result and hand it back to the user.
A minima, you'll need either to strip completely the header from the targeted site to inject the content in your page using AJAX, or to inject your own css in the page headers to put it into an IFRAME.
Either way you have to implement the proxy method, which will take the targetted URL as an argument.
This technique has many downsides :
You have to do the queries on you server, which can cost a lot of bandwidth and CPU
You have to implement the proxy
You cannot transmit the domain specific cookies from the user, though you can manage new cookies have by rewriting them
If you do a lot of requests you server(s) is/are likely to become blacklisted on the targeted website(s)
The benefits sound low compared to the hassles.
So what's strange is that the like buttons on my site will only work IF the like button has already been liked in the past. If there are no current likes, such as on this page:
http://www.narutomeetsbleach.com/naruto-shippuden-219.html
Then you can click like all you want, but you won't actually like anything. Does anyone know what's wrong? I got my like HTML directly from facebook and it's the exact same as the like buttons that are working.
Thanks so much!
You can use the Facebook LINT tool. It actually checks you meta tags and will point you in some direction what your problem is. (Check link below.. I have added a ?v=1 to the html page to avoid facebook server error response)
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.narutomeetsbleach.com%2Fnaruto-shippuden-219.html%3Fv%3D1
Type in your url and check your page.
Try changing your code to the following (is there a reason why you are using the appId/fbAsyncInit methods?):
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.narutomeetsbleach.com/naruto-shippuden-219.html?v=2" send="false" layout="button_count" width="450" show_faces="false" font="tahoma"></fb:like>
AND / OR
Use this link to generate your LIKE BUTTON Code
http://developers.facebook.com/docs/reference/plugins/like/
Generated Like Button Code (Iframe) :
<iframe src="http://www.facebook.com/plugins/like.php?app_id=137084976372144&href=http%3A%2F%2Fwww.narutomeetsbleach.com%2Fnaruto-shippuden-219.html%3Fv%3D3&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
Found it out! I had to remove the og:type meta tag. Found someone else on google who had a similar problem, that's what he did and now it seems to be working fine for me after I re-linted the url. Facebook's giving me a "warning" because I have og:type missing, but now it's working, so I guess that's all that matters. Thanks for all the help!
reference: Facebook "Like" produces "There was an internal error when updating the Page."
The Facebook button and all it's code comes from them and it's within an iframe with source from their server... you'll have little control over how that works. As long as you got your App ID and such entered correctly... otherwise, you're at their mercy.
Yes, even though it's just a "Like" button, you still need an App ID (appid). More detailed info below...
See the accepted answer to this: "Do I need an appid for the XFBML version of the Facebook Like button?"
And quoting this page, http://developers.facebook.com/docs/guides/web/:
"The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. The following example shows how to load the JavaScript SDK once you have your appId:"
Suppose I want to embed the latest comic strip of one of my favorite webcomics into my site as a kind of promotion for it. The webcomic has the strip inside of a div with an id, so I figured I can just embed the div in my site, except that I couldn't find any code examples for how to do it (they all show how to embed flash or a whole website).
Can someone please show me (or tell) how it's done?
PS I'd rather not use server side scripting or external services (which is what is often recommended for embedding RSS).
Update - Cross domain request with jQuery (on client side)
Yesterday I was browsing James Padolsey's blog, where he posted a great article, on how to do cross domain request with jQuery, also Chris Heilmann has a nice DEMO.
The principle is to use YQL -> a yahoo api for web page queries, where you receive a JSON with all the html. Happy scraping :)
Scrape remote data with php, load with jQuery
What about considering simple AJAX call, that would intercept the comic element and update with its contents your <div id="update-comic" /> primarily used for this purpose?
Also you will use a simple php to get the remote page, cause you cannot make ajax call on another domain
note: user must have JavaScript enabled, also following code uses jQuery library
Putting it all together
on your page, where you want to display remote comic strip create a div only for this purpose, lets call it update-comic
<div id="update-comic">
<!-- here comes scraped content -->
</div>
write down the php, call it comic-scrape.php, it will download the html from remote page, you should consider caching the response and updating it on a specified interval (e.g. 30min, 1hr, your call.. :))
server performance should not suffer after simple cache checking implementation
<?php
$url = 'http://www.example.com/';
$response = file_get_contents($url);
echo $response;
now comes the jQuery magic, where you make ajax call on your php scraper and take only the relevant element you are interested in. Place this script inside your view page (where you have your <div id="update-comic" />
<script type="text/javascript">
$(function () {
// set all your required variables
var
localUrl = '/comic-scrape.php',
elementId = '#remote-comic-id',
elementToUpdate = $('#update-comic');
// update the local elementToUpdate with elementId contents
// from your php in localUrl
elementToUpdate.load(localUrl + ' ' + elementId;
});
</script>
I hope, I covered everything.
Employing simplexml and xpath
As philfreo suggested in comment, a viable solution could also contain selecting the required id server-side. It is very easy with use of php's simplexml and a little xpath:
<?php
// set remote url and div id to be found
$elementId = 'remote-comic-id';
$url = 'http://www.example.com/';
// instantiate simple xml element and populate from $url
$xml = new SimpleXMLElement($url, null, true);
// find required div by id
$result = $xml->xpath("//div[id={$elementId}]");
// take first element from array, which is our desired div
$div = array_pop($result);
echo $div;
It's impossible because you cannot manipulate iframe/frame content. Using iframe tag will just modify content in tag, but not the src.
Neither with AJAX, because you have to be on the same domain.
So, for example, you can use PHP with cURL or quite simply with fopen.
You can just use an iframe. The content isn't literally on that page, but it looks like it.
Here's an example: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe
It looks like this:
<iframe src ="http://www.example.com/index.html" width="100%" height="300"></iframe>
<embed src="url of your comic" width="300" height="250" />