I have a Timeline App that creates a wall posting via the Graph API. The wall posting indicates that the posting was created by the App, which is fine. However, the link for the app points to the Canvas page: http://apps.facebook.com/app_name_space.
I need the link to point to the timeline version of the App: http://www.facebook.com/pages/PAGENAME/PAGEID?sk=app_APPID
I have tried the "actions" parameter on the Post call, but that didn't solve the problem.
Redirecting the Canvas page
Since you cannot use a 301 redirect for this purpose, here is what I did (asp.net):
1) Create a folder named 'canvas' under the website root.
2) Add a default.aspx file to the folder (can't use a static file as an app landing page)
3) Add the following javascript to the head tag:
<script type="text/javascript">
var parentPageName = '<%=ConfigurationSettings.AppSettings["ParentPageName"]%>';
var appID = '<%=ConfigurationSettings.AppSettings["AppID"]%>';
var myHREF = "http://www.facebook.com/" + parentPageName + "?sk=app_" + appID;
top.location.href = myHREF;
</script>
4) Change your App Canvas url to point to the 'canvas' folder.
That's how it works, the 'via' link goes to your app, not to an arbitrary page the app is installed on, because it could be installed on any Facebook page.
Redirect users that land on the canvas app to the page tab, if that's what you want
Related
I have built my project using NextJS and deployed it on Vercel. My project's Vercel URL is https://my-project.vercel.app. My domain (added to project settings in Vercel dashboard) is www.example.com
When I use Facebook Sharing Debugger to inspect the meta tags on a particular url, the meta tags are picked up correctly when using the my-project.vercel.app domain and not my actual domain www.example.com. The project loads correctly in the browser , including meta tags, for both domains.
For example, for a url /foo on my website, the og tags are picked up correctly for https://my-project.vercel.app/foo but not for https://www.example.com/foo.
Have a look at these screenshots. Note that the domain shown in the screenshots (esourcing.in) is added to the project esourcing-frontend.vercel.app, in the Vercel dashboard.
Here is the screenshot from my browser:
Answering my own question. There was a bug in my code
The bug
I am using a Wrapper component to wrap all my pages. I was setting the og_url after componentDidMount. I am using a functional component so the useEffect hook executes after component mount. Until that happens I set the og_url to https://example.com.
However this component mounting never happens when the page is crawled by Facebook. So you can imagine that the og:url property was being set to https://example.com for all pages when the Facebook crawler scraped these pages.
import Head from "next/head";
import { useEffect } from 'react'
const Wrapper = (props) => {
const [og_url, setog_url] = useState("")
useEffect(() => {
setog_url(window.location.href)
}, [])
return (
<>
<Head>
... other meta tags ...
<meta property="og:url" content={og_url ? og_url : "https://example.com"} />
</Head>
{props.children}
</>
)
Fix
og:url essentially tells Facebook that forget the OG tags on this page and use the OG tags from the page whose url is set to the value of og:url. I set the og:url to "" and now the sharing debugger picks up the right OG tags.
i downloaded the ionic2 starter sidemenu template, now it is showing homepage as first page with sidemenu which is set in app.component.ts as below
rootPage: any = Home;
i'm planning to set my newPage as first page, there should be no side menu, from which i can navigate to the home page by clicking a button,
i added a page 'NewPage' already but no idea about where to set this page.
my ionic version : rc5
Just change the root page to your new page:
rootPage: any = NewPage
What I am trying to achieve is to find a way of displaying a wiki page content in a floating iFrame ( and of course keep the styling ) for a tool that I am developing for our employees. Right now the tool I made is using jQuery dialog box to display a specific document / pdf, For compatibility and usability purposes I would really like to upgrade that so it uses a wiki page instead of documents / PDFs.The problem that I am facing is that there is no really direct link to the content of a Sharepoint wiki page instead the only available direct link is the one to the page all together with all the navigation menus, option panel, user panel etc. I want to avoid using javascrip to strip away these elements. Instead I am simply trying to find out if sharepoint 2013 has some more elegant way of providing the content such as: Web service or javascript SP API.
My ideas so far:
REST Url to give the content back? I know for sure it works for lists and libraries but I couldn't find anything in the REST API About wiki page content
SP.js ? Couldn't find anything about that either
Anyways, it could be possible that I have overlooked things, or probably haven't searched hard enough. However, any help is very very welcome. If you don't know about a concrete solution I would be very happy with nice suggestions too :)
If there is nothing out of the box I will have to get to my backup plan of a jQuery solution to get the page and strip off all unnecessary content and keep the styling.
I believe you are on the right track with REST API, in Enterprise Wiki Page the content is stored in PublishingPageContent property.
The following example demonstrates how to retrieve Enterprise Wiki Page content:
var getWikiPageContent = function (webUrl,itemId,result) {
var listTitle = "Pages";
var url = webUrl + "/_api/web/lists/GetByTitle('" + listTitle + "')/items(" + itemId + ")/PublishingPageContent";
$.getJSON(url,function( data ) {
result(data.value);
});
}
Usage
getWikiPageContent('https://contoso.sharepoint.com/',1,function(pageContent){
console.log(pageContent);
});
And something for those of you who like to have more than one different examples:
var inner_content;
var page_title = "home";
$.ajax({
url: "https://mysharepoint.sharepoint.com/MyEnterpriseWikiSite/_api/web/Lists/getbytitle('Pages')/items?$filter=Title eq '" + page_title +"'",
type: "GET",
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function (data) {
if (data.d.results[0]) {
inner_content = data.d.results[0].PublishingPageContent;
}
},
error: function(){ //Show Error here }
});
That's what did the job for me.
This example fetches the inner content of an Enterprise wiki page by Title( make sure you are not using the Name of the page, although Title and Name can be given the same string value, they are different fields in sharepoint 2013 )
Here is the situation:
I have a webservice that returns a form.
This form is then used by many other sites in an iFrame element.
I need the form to "wear" the hosting site's background, color, or in other words CSS (but i will settle for background and logo if this is easier).
My webservice and the other sites are not on the same domain.
I have full control over my webservice and i can define general requirements for all sites.
What is the best way to handle this?
There are several ways to accomplish this:
1 - Pass in a stylesheet as a parameter into the iframe:
Pass in a CSS stylesheet as a query parameter in the src attribute of the iframe. This is perhaps the easiest method, and it gives the owner of that stylesheet more control over how the form looks on that person's site.
<body>
<!-- This is the client's website -->
<!-- This is your form -->
<iframe src="http://example.com/form/abc/?css=http://example.com/file/formStyle.css" />
2 - Pass in the color and logo into the iframe:
This is the same basic idea as in the first example, except you're not referencing an external stylesheet:
<iframe
src="http://example.com/form/abc/?color=#AAAAAA&logo=http://example.com/logo.png" />
3 - Use PostMessage:
Another option is to use the postMessage API. With postMessage, you can pass a message from one context to another, across domains. Thus, the client page could pass the background color to the iframe page, and this could be reused to pass other types of information and data as well.
Iframe code:
// register to listen for postMessage events
window.addEventListener("message", changeBackground, false);
// this is the callback handler to process the event
function changeBackground(event)
{
// make sure the code you put on the client's site is secure. You are responsible
// for making sure only YOU have cross domain access to his/her site.
// NOTE: example.org:8080 is the client's site
if (event.origin !== "http://example.org:8080")
return;
// event.data could contain "#AAAAAA" for instance
document.body.style.backgroundColor = event.data;
// do other stuff
}
}
Top Level Client Page:
// pass the string "#AAAAAA" to the iframe page, where the changeBackground
// function will change the color
// targetOrigin is the URL of the client's site
document.getElementById("theIframe").contentWindow.postMessage("#AAAAAA", targetOrigin);
This solution only works in modern browsers, including IE8, FF3.6+, Chrome 13+, Safari 5+, etc. See the Mozilla Developer Center for more information on HTML5 postMessage.
How to pull the CSS parameter from the query string?
Use the gup function in the iframe page to get the value of the CSS parameter:
function gup(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
Afterwards, you can then use it to create a link CSS tag:
// get url parameter from iframe src:
var cssPath = gup("cssPath");
// create link and append to head
var linkElem = document.createElement("link");
linkElem.setAttribute("href", cssPath);
linkElem.setAttribute("rel","stylesheet");
document.getElementsByTagName("head")[0].appendChild(link);
OR
var color = gup("color");
document.body.setAttribute("style","background-color:" + color);
I'm using facebook JS api and
FB.ui({
method: 'apprequests',
message: 'You should learn more about this awesome game.',
data: 'tracking information for the user'
});
but its not working on tab , the pop-up stats to load and then automatically become hidden .
http://developers.facebook.com/docs/reference/dialogs/
You can only use iframe in facebook apps, probably also on tab pages.