Ok this is might be the dumbest question ever.. but i cannot for the life of me figure out how to add one of my Facebook apps to one of my Facebook pages. When I would look at my app settings on developers.facebook.com there used to be a link to view the App Profile Page. Then from there I could click an Add to Page link. But I have no clue how to do this now grrr.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Frederick Behrends" />
<title>Facebook PageTab Dialog Generator</title>
</head>
<body>
AppID:<input type="text" id="AppID" value=""/><br />
<input type="button" value="Add to page" onclick="AddToPage();"/>
<script>
function AddToPage(){
var Next,AppID;
AppID = document.getElementById('AppID').value;
if(isNaN(AppID) === true){
alert('AppID ungültig');
return false;
}
if(Next == '' || typeof Next == 'undefined')
Next = 'http://www.facebook.com/';
window.open("http://www.facebook.com/dialog/pagetab?app_id="+AppID+"&next="+Next,"PageTab","width=800,height=500");
return false;
}
</script>
</body>
</html>
Use this html file.
Try this
http://www.facebook.com/add.php?api_key=__APP_ID__&pages
where __APP_ID__ is the application ID of the application you wish to add. Pretty simple.
Related
I just learned how to create and append items. I wanted to practice using a button to submit the text to be appended. It works, however, the page seems to refresh right afterwards and removes the text from the list. What am I doing wrong?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="ToDo.css">
</head>
<body>
<h1>To Do:</h1>
<ul>
<li class="todo">Create another todo.</li>
</ul>
<form>
<input type="text" placeholder="Add another item!">
<button onclick="output()">Add</button>
</form>
<script src="ToDo.js"></script>
</body>
</html>
JS:
let ul = document.querySelector('ul');
newItem = document.querySelector('input');
function output() {
let item = newItem.value;
let newTodo = document.createElement('li');
newTodo.innerText = item;
newTodo.classList.add('todo');
ul.append(newTodo);
}
Your button is submitting the form which is causing the page to refresh. Buttons are made to be type submit by default.
It looks like you don't actually need the form so you could either remove it or set the type on the button:
<button type="button" onclick="output()">Add</button>
file://localhost/C:/Users/kürşat/Desktop/yeni%20site/faq%20-%20Kopya/kopya.html
this is my photography tutorial page. I'm did manage to toggle on/off when someone clicks a question.
What I can't do : the top right button can expand all but it cannot contract all questions.
I should contract/expand all even if some of them were previously opened. At first my code was doing the opposite of previous state.
How can I do that?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$(this).next().toggle("fast");
$(li).css("background-color","#999");
$(article).css("background-color","#FDFEE9");
});
$(document).ready(function(){
$("#expand").click(function(){
$("article").toggle(true);
$(this).text($(this).text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
$("article").toggle();
});
});
</script>
</head>
<body>
<div id="page"><h1>Temel Fotoğrafçılık Bilgileri<button id="expand">Genişlet</button></h1>
<div class="faq">
<!-- The FAQs are inserted here -->
<ul>
<li>question 1?</li>
<article> <p>answer 1.</p></article>
<li>question 2?</li>
<article> <p>answer 2.</p></article>
<li>question 3?</li>
<article> <p>answer 3.</p></article>
</ul>
</div>
</body>
</html>
Here is the working JSfiddle version:
http://jsfiddle.net/reJu9/
Change the expand click callback to
$("#expand").click(function(){
var $this = $(this);
if($this.text() == 'Genişlet')
$('article').show();
else
$('article').hide();
$this.text($this.text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
Demo: http://jsfiddle.net/joycse06/reJu9/1/
Maintain a variable, which tells you if the button should expand or collapse questions.
Check this updated fiddle
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
i used this tutorial https://developers.facebook.com/docs/opengraph/tutorial/ to make my first App but i want to use php variable for my og:title like this <meta property="og:title" content="<?php echo $title; ?>" /> . This php variable is changing constantly every time the page loads but when I post my action in the facebook appears with the old title!
Here's the code:
<?php
$title = ' Hello world';
// <---- This php variable is changing every time
the page loads but the title is not being recognised
?>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fitnessgod: http://ogp.me/ns/fb/fitnessgod#">
<meta property="og:locale" content="en_US" />
<meta property="fb:app_id" content="My app Id" />
<meta property="og:type" content="fitnessgod:news" />
<meta property="og:url" content="https://www.fitness-god.com/share-facebook.php" />
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:description" content="let's do sport" />
<meta property="og:image" content="https://www.fitness-god.com/images/sport dinamic.png" />
<script type="text/javascript">
function postCook()
{
FB.api('/me/fitnessgod:share' +
'?news=https://www.fitness-god.com/share-facebook.php','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'My App id', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Sports News"
src="https://www.fitness-god.com/images/sport dinamic.png"
width="550"/><br />
</p>
<form>
<input type="button" value="Share news" onClick="postCook()" />
</form>
<fb:activity actions="fitnessgod:share"></fb:activity>
</body>
</html>
You need to correct the meta tags definition. Use attribute name, not property:
E.g.:
<meta name="og:title" content="<?php echo $title; ?>" />
You can use the debugger to test your code:
http://developers.facebook.com/tools/debug
Also note that when you click share, the content of your page might be cached. But, the debugger, always gets the latest content.
It appears you are experiencing "freezing" of og:title that Facebook performs after a number of actions – 50 likes, shares and/or comments – were performed with that link.
One of the main reasons why Facebook does this, is to prevent many people sharing a seemingly safe link and then having the site owner replace the title with offensive content and have it display on people's timelines.
For additional information, see this link.
I'm trying to implement step two of the Recipe Box Facebook app tutorial. I have followed the instructions in step one to set up my app on Facebook and have uploaded the code pasted below to my server as per the instructions in step two of the tutorial. When I load the web page and click the add-to-timeline link I get a Facebook error stating:
Given URL is not allowed by the Application configuration.
Any insight would be greatly appreciated.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<head/>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'328617653826422', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Stuffed Cookies"
src="http://example.com/cookie.jpg"
width="550"/>
</p>
</body>
</html>
In your app settings, be sure that domain you specify is the same domain as where this code lives. Also in the example code, their <head> tag looked like <head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">. Also you appear to be missing the og: tags in your head section as well.
Here's the example code I just downloaded from their site, did I grab the wrong link? Or are you basing yours on old example code?
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://YOUR_URL/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://YOUR_URL/cookie.html">
<script type="text/javascript">
function postCook()
{
FB.api('/me/YOUR_NAMESPACE:cook&recipe=http://YOUR_URL/cookie.html','post', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://YOUR_URL/cookie.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
</body>
</html>