I am creating a facebook webpart so I can wrap the settings.
When I have the following in my render()
this.domElement.innerHTML = `
<div class="${styles.facebook}">
<div class="${styles.container}">
<div
class="fb-page"
data-href="https://www.facebook.com/ME/"
data-tabs="timeline"
data-height="300"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
<blockquote
cite="https://www.facebook.com/ME/"
class="fb-xfbml-parse-ignore">
Yes, its me again</blockquote></div>
</div>
</div>`;
this.facebook.XFBML.parse();
I get the following error
ErrorUtils caught an error: "Blocked a frame with origin "https://www.facebook.com" from accessing a cross...". Subsequent errors won't be logged; see https://fburl.com/debugjs.
I suspect the framework is not impressed with facebook injecting an iframe
If I load facebook as follows :
this.domElement.innerHTML = '<iframe src="https://www.facebook.com/plugins/page.php.........
It works
I suppose, I could use the iframe approach and still inject my settings which are derived from properties.
Related
8/25/2020
I am working through an e-commerce example out of a book and the majority of the ASP.Net 3.1 Web App is in MVC. There are some simple pages where Razor Pages are used. And finally in administration we are using Blazor.
In setting up the routes in Startup.Configure() we have:
// MVC default endpoint
endpoints.MapDefaultControllerRoute();
// RazorPages endpoints
endpoints.MapRazorPages();
// Blazor endpoints
endpoints.MapBlazorHub();
// Map requests to SPA (Blazor)
endpoints.MapFallbackToPage("/admin/{*catchall}",
"/Admin/Index");
So I am thinking "/admin/{*catchall} would catch the following URLs (off of the base URL of course).
/admin
/admin/orders
/admin/products
Since Razor Pages are used to host a Blazor app, the Fallback when you go to /admin is really directed to /Pages/Admin/Index.cshtml which has this host file:
<!DOCTYPE html>
<html>
<head>
<title>SportsStore Admin</title>
<link href="/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<base href="/" />
</head>
<body>
<component type="typeof(Routed)" render-mode="Server" />
<script src="/_framework/blazor.server.js"></script>
</body>
</html>
which loads the Routed Component:
<Router AppAssembly="typeof(Startup).Assembly">
<Found>
<RouteView RouteData="#context" DefaultLayout="typeof(AdminLayout)" />
</Found>
<NotFound>
<h4 class="bg-danger text-white text-center p-2">
No Matching Route
</h4>
</NotFound>
</Router>
This loads the AdminLayout Component:
#inherits LayoutComponentBase
<div class="bg-info text-white p-2">
<span class="navbar ml-2">SPORTS STORE Administration</span>
</div>
<div class="container-fluid">
<div class="row p-2">
<div class="col-3">
<NavLink class="btn btn-outline-primary btn-block"
href="/admin/products"
ActiveClass="btn-primary text-white"
Match="NavLinkMatch.Prefix">
Products
</NavLink>
<NavLink class="btn btn-outline-primary btn-block"
href="/admin/orders"
ActiveClass="btn-primary text-white"
Match="NavLinkMatch.Prefix">
Orders
</NavLink>
</div>
<div class="col">
#Body
</div>
</div>
</div>
You can see in the AdminLayout two NavLinks which work fine.
And here are the top of the two files they link to.
a) /Pages//admin/orders.razor:
#page "/admin/orders"
#inherits OwningComponentBase<IOrderRepository>
b) /Pages/admin/products.razor
#page "/admin/products"
#page "/admin"
This is what all the routes look like at this point:
/admin: Typing URL directly in
You can see there is no active state on the Products button even though I am there I guess because it is specified on a NavLink taghelper in the layout and must be clicked to get the ActiveClass applied.
But the route is found.
Now if I click products this is what renders:
So both /admin and /admin/products get me there.
By clicking the NavLink button the active state is applied to the Products NavLink button.
These two URLs get me there because of the two routes specified in the Products component:
#page "/admin/products"
#page "/admin"
If I click the Orders NavLinkButton:
Orders ActiveState is applied from clicking the Orders NavLink button and matching this route at the top of the orders component:
#page "/admin/orders"
But now when I manually enter
/admin/products
or
/admin/orders
I get ambiguous route error message:
and for /admin/orders the same thing.
If I comment out the /admin route in Products.razor I get the NoRouteFound response from the Routed.razor file:
#page "/admin/products"
#*#page "/admin"*#
So routing has always been confusing to me.
I think what is happening is the catch all in startup:
// Map requests to SPA (Blazor)
endpoints.MapFallbackToPage("/admin/{*catchall}",
"/Admin/Index");
goes to the Index.cshtml Razor page as the host of the SPA app and initializes the Blazor app. From here on out there is a persistant HTTP connection to the Server (a little different from the likes of Angular) and routing now is handled by the Blazor app until the user clicks on or manually enters an endpoint registered before the Blazor endpoints in StartUp. So is this typical in an SPA or is there a way to make manual URL entries work. This may be cleared up as I work through the chapter but I am always fuzzy on routing in all of my technologies.
8/26/2020 - Update
Now when working in the products or orders components, every time I make a change, even a small HTML change, the browser says "reloading", and when I click reload or refresh, I get the ambiguous router thing again, so I am having to clean and rebuild after every little change to see the rendering in the browser. This is very annoying.
Does anyone else have this problem?
I had to add the route to the hosting Index.cshtml razor page:
#page "/admin"
Everything seems to work now.
I'm trying to integrate Facebook JS sdk with my BackboneJS spa.
When the page is new, ie; router has not navigated to any where, the Facebook share code works perfectly.
After I navigate to some other page. The FB.api() callbacks never fire.
The fb-root div <div id="fb-root"></div> is automatically getting created automatically.
But once i navigate to any other route, my body is getting cleared and new html will be loaded.
How to keep the <div id="fb-root"></div> in body while navigating to the other routes.
Or is there anyother way to getting though this issue.
pease help =)
Try to render your views in a new element, not directly in the body :
<body>
<div id="fb-root"></div>
<div id="container"></div> <!-- Here for example -->
</body>
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>
I have one site - example.com and ones mirror - example2.com. Both sites are completely similar and are established on one Jomla's base.
I have like bottom with ID to example.com and on the example2.com this bottom doesn't work (because of wrong ID).
Is it possible to solve this problem - to have two site names and wotking facebook like bottom?
Get rid of the ID and look into documenation on how to generate Like button. Here is Facebook Like Button API documentation/generator.
Like button takes URL as parameter. So simply do this:
Include the JavaScript SDK on your page once, ideally right after the opening tag. http://developers.facebook.com/docs/reference/javascript/
Place the code for your plugin wherever you want the plugin to appear on your page.
On Site #1:
<div class="fb-like" data-href="http://example1.com" data-send="true"
data-width="450" data-show-faces="true"></div>
On Site #2:
<div class="fb-like" data-href="http://example2.com" data-send="true"
data-width="450" data-show-faces="true"></div>
Or more dynamic:
<div class="fb-like" data-href="http://<?php echo $_SERVER['SERVER_NAME']; ?>" data-send="true" data-width="450" data-show-faces="true"></div>
Or Joomla Specific, get live_site configuration from config and display it:
$cfg -> reference to Joomla Config
<div class="fb-like" data-href="<?php echo $cfg->live_site; ?>" data-send="true" data-width="450" data-show-faces="true"></div>
An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!