This question is of type: What is your suggestion? If it does not respect SO guideline, I am sorry.
I am developing a RESTful application that will be available in Facebook Pages. The backend is developed in PHP using CodeIgniter with RESTful library for it.
The frontend is developed using BrunchIO in CoffeeScript.
The starting point of the application is home.php, a CodeIgniter controller, which loads a view looking like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fBoutik - Shop</title>
<meta name="viewport" content="width=device-width">
<script>
require('initialise');
</script>
</head>
<body>
</body>
</html>
(Left out other data).
When initialise file is loaded, some stuff is executed. including initialising a User Marionette (Backbone) model.
A users logs in with Facebook on the frontend and a POST is made to the server to a controller, where I set some data on SESSION.
This is a little cumbersome, because every time the app is loaded, the Facebook login dialog appears (which goes away in a moment) and a POST is made on the server.
Is there a better way to sync the user data between frontend and backend ?
If you need more details, I'll update this post.
Related
I've noticed while I deploy my flutter web project with nginx, after doing a "flutter build web" that if I don't delete the cache the old files are still in my chrome browser. Is there a way to force a refresh for users automatically if I deploy updates?
Every browser does caching and is completely normal when you don't immediately see the changes on the client browser. It does take some time for the browser to realize the code has been changed on the server and needs to update its local cache. And is completely depends on the client browser settings and client's connection speed.
But if your situations demand the client to have an updated version of the website in no time, there is a workaround.
The main.dart.js file is something like this below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
In order to force browsers to reload the app each time we want that, add a unique parameter to the main.dart.js script-src (for example a version, though it can be anything, even just a random number after ?). The new index.html will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js?version=1" type="application/javascript"></script>
</body>
</html>
Cons:
You have to manually add the incremented version number every time you want to deploy. Maybe you can write a script for doing that.
It does still take time if the client has slow internet connection. The problem arises when browsers like Chrome show Lite(cached) version of the website untill internet connection is fast enough.
Previous versions still persist to live on the client's browser till timeout
I have a HTML page where I am using javascript to load contents based on query string value..
In javascript, I have some dynamic code to load separate data on the page based on this query string value.
Now my page link looks like
https://example.com?datatype=1
https://example.com?datatype=2
https://example.com?datatype=3
Based on this my page data will vary.
Now I want to Add Facebook and LInked in Sharing on this and want to send custom information to share on facebook and LinkedIn.
As per my R&d, this data can be posted using metatags.
As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
Can anyone suggest how I can Post URL, title, and description to this linkedIn and facebook.
Thanks in Advance
So, I want to focus in on one thing you have stated here:
As per my R&d, this data can be posted using metatags. As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
That's actually not the complete story. Even if your webpage is "pure client-side", you still absolutely need to have an HTML framework to hold this, even if it's as minimal as: <html><head><script type="text/javascript" src="...."></head></html>. What you will need to do is to edit the document being served for your client-side application.
You did not mention a language, so, let's just assume you're using ReactJS. The procedure here will be the same for other client-side pages.
After making a react project, I have this file, ./public/index.html, and in it is...
<!doctype html>
<html lang="en">
<head>
<title>Scheduler</title>
<meta charset="utf-8" />
<link id="css-root" href="" rel="stylesheet" type="text/css" />
</head>
...
</html>
All you need to do is to insert the og: tags to your for LinkedIn. Just use the tags as described by the Official LinkedIn Share Documentation. This should look like this...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Hope this helps!
I am currently integrating a HTML5 app into Facebook and testing the iFrame mechanism. I am self-hosting the game content however when I point the Facebook app system to the content, the page is not being displayed.
My hosted page is a simple Hello World app for now as illustrated below, and can be found at: https://bluebeck.space/alienz/fb/
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Alienz</title>
</head>
<body>
<div><p>Hello, World!</p></div>
</body>
</html>
The app configuration in the Facebook app developer console appears as:
I have used the following HTTPS url which has a valid SSL certificate as required:
The app page contents are empty and upon inspection of the Facebook app page DOM, it is apparent that the iframe contents have been stripped from the hosted page:
My expected result would be that the contents of the self-hosted webpage would be visible in the Facebook app page. The actual result is that the contents are empty and the DOM contains an iframe tag with empty head and body tags.
Thanks to #cbroe I was able to pin this down to an X-Frame-Options error. My solution has been to include the following php headers to the page:
<?php
header('X-Frame-Options: ALLOW-FROM https://apps.facebook.com/');
header('Content-Security-Policy: frame-ancestors https://apps.facebook.com/');
?>
I have a question regarding the embedding of a GWT application.
The problem concerns getting the address of the client, and match it to the ip in the tag's src attribute. So the structure is Host html page (hosted on server a), embedding a gwt application hosted on server b.
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Embedding gwt app</title>
<script type="text/javascript" src="http://192.168.0.1:8080/myapp/myapp.nocache.js?rootpanel=divone"></script>
</head>
<body>
<div id="divone" style="width:100px;height:100px;"></div>
</body>
</html>
What we have tried before is get the host path by using GWT.getHostPageBaseURL(), but this returns the host page's ip (we expected this..)
Are we trying to achieve something impossible? considering that the script file gets downloaded first, and then the onModuleLoad gets called when the script is ready on the client.
You can make a RPC request to the server side, and the server can do the following to get the client's IP: getThreadLocalRequest().getRemoteAddr();
Or if you don't want to make a request and want to do the work on the client side, you can make a GWT native JS method and try one of the suggestions from this stackoverflow post: How to get client's IP address using javascript only?
I'm experiencing problems adding a like button to an iFrame based page within my FB fan pages tabs. I'm using the JavaScript SDK and the Open Graph to specify the page I'd like the user to "like" (which is the current page within my FB pages).
The page is iFrame based, is an app in FB, and is accessed via the FB Page tabs of my FB Page. The problem is that Facebook is assigning the Like to my FB Page itself (my FB page homepage if you will) rather than the page In question (my test page – it’s set up as an app and appears in my FB Pages tabs under the name “og test”).
I’ve tried running the target page for the iFrame through the FB linter and its giving a strange error saying I’ve supplied the Open Graph Type of “Other” (I haven’t, I’ve supplied “website” in my META tag) see below:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.airport-parking-quote.co.uk%2Ffacebook%2Fog-test.php
Also, from looking at the debug page it seems that Facebook is either ignoring the QueryString in my “og:url” value and therefore only seeing my FB page’s vanity URL, or there is some kind of block on being able to Like iFrame based app pages.
Can anyone shed any light on this? I thought from this article it would be possible to achieve what I am trying to do:
http://www.insidefacebook.com/2010/09/09/like-buttons-app-content/
The code for the iFrame target page is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Test Like</title>
<meta property="og:title" content="OG Test"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.facebook.com/EssentialTravel?sk=app_275969292428556"/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="fb:admins" content="100002424161307"/>
<meta property="fb:app_id" content="275969292428556"/>
<meta property="og:description" content="OG test through canvas page"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '275969292428556',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
</script>
Test Page<br>
<script src="http://connect.facebook.net/en_US/all.js#appId=156081301143077&xfbml=1"></script><fb:like href="https://www.facebook.com/EssentialTravel?sk=app_275969292428556" send="false" width="450" show_faces="false" action="recommend" font=""></fb:like>
</body>
</html>
Anybody have any ideas?
Thanks,
Pjordanna
Unfortunately you can't set up a like button for an actual tab on a page.
As you have found out, trying to make a like button using a url such as https://www.facebook.com/EssentialTravel?sk=app_275969292428556 will just make a like button for the page not the individual tab.
The best way to make a like button for that specific tab would be to just use the URL of the app sitting on your server eg. http://YOURDOMAIN.com/YourAppDirectory