- Messages
- 601
- Reaction score
- 0
- Points
- 26
https://developers.facebook.com/
Click > Get Started
Register as a Facebook Developer
Do you accept the Facebook Platform Policy and the Facebook Privacy Policy? > YES > Next
We need to verify your account to complete your registration.
Your phone number will be added to your timeline but won't be visible to your friends.
Confirmation via phone or CC
Confirm Code
Create a New App
Display Name - your desired Name (GoT)
Create New ID
Add Product
-> Facebook Login
Choose Platform > Web
Getting our Site URL - kung wala pa kayong domain/website libre si heroku
Go to https://www.heroku.com/ > Sign Up
First name*
Last name*
Email Address*
Company name
Country*
Primary Development Language* > PHP
Confirm you account in your email and set your password and proceed
https://dashboard.heroku.com/apps
Select PHP
Introduction > Im ready
Set up > Select & Download the Heroku CLI for Windows 32 or 64 > Install ( it will install GIT - needs to access your php files and saves
it to your xampp/htdocs or wamp/www) *basic installation of xampp/wamp and to run simple "Hello World". (to contnue Go to :Setup
Open Git GUI > Create New Repository > Directory > C:\xampp\htdocs\my_project
Menu > Repository > Git Bash
$ heroku login
Enter your Heroku credentials.
Email: [email protected]
Password:
...
****if error found: "Login is currently incompatible with git bash/Cygwin/MinGW"
try using cmd prompt > open cmd > type heroku - it will update Heroku Command Line Interface (CLI)
$ heroku login
Enter your Heroku credentials.
Email: [email protected]
Password:
...
It should say "Loggen in as <[email protected]>"
***fyi only not really important***
Checking your php version
$ php -v
Checking your composer version
$ composer -V
Checking your git version
$ git --version
:Setup:
I have installed the Heroku Click
Prepare the app - skip
Open Git GUI > Create New Repository > Directory > C:\xampp\htdocs\my_project
Menu > Repository > Git Bash
Deploy the app
type> heroku create
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added
$ git clone https://git.heroku.com/sharp-rain-871.git
"C:\xampp\htdocs\my_project\sharp-rain-871\index.php"
add a file called "index.php"
<?php
echo "hello world";
?>
$ git remote add origin https://git.heroku.com/sharp-rain-871.git
$ git add .
$ git commit -m "initial commit"
$ git push origin master
visit your link
https://sharp-rain-871.herokuapp.com/
Done First Setup
Step Two
Selecting Your Character ( for me is Game of Thrones )
Javasript Button & Random select
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GOT</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button type="button" id="button">Who is your GOT Character</button>
<!--height="249" width="476"-->
<img id="image">
<script>
$("#button").click( function()
{
var random = Math.floor((Math.random() * 3) + 1);
if(random == 1){
$("#image").attr("src", "jon.jpg").css("height","249px").css("weight","476");
}else if(random == 2){
$("#image").attr("src", "danaerys.jpg").css("height","249px").css("weight","476");
}else{
$("#image").attr("src", "cersei.jpg").css("height","249px").css("weight","476");
}
$(this).hide();
}
);
</script>
</body>
</html>
$ git add .
$ git commit -m "initial commit"
$ git push origin master
visit your link
https://sharp-rain-871.herokuapp.com/
Step 3
Share your result
Back to your site URL
Site URL> https://sharp-rain-871.herokuapp.com/
copy and insert the ff code after <body> tag
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<your app id>', //it should be generated automatically
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
//****Share Button
//****https://developers.facebook.com/docs/plugins/share-button#
<div class="fb-share-button" data-href="https://sharp-rain-871.herokuapp.com/"
data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore"
target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsharp-rain-871.herokuapp.com%2F&src=sdkpreparse">Share</a></div>
to make you app live and available to public
https://developers.facebook.com/apps/
click your app
App Review
Make Game of Thrones public? Yes
***debugger for image
https://developers.facebook.com/tools/debug/sharing/
finished Product
View attachment 318996
Click > Get Started
Register as a Facebook Developer
Do you accept the Facebook Platform Policy and the Facebook Privacy Policy? > YES > Next
We need to verify your account to complete your registration.
Your phone number will be added to your timeline but won't be visible to your friends.
Confirmation via phone or CC
Confirm Code
Create a New App
Display Name - your desired Name (GoT)
Create New ID
Add Product
-> Facebook Login
Choose Platform > Web
Getting our Site URL - kung wala pa kayong domain/website libre si heroku
Go to https://www.heroku.com/ > Sign Up
First name*
Last name*
Email Address*
Company name
Country*
Primary Development Language* > PHP
Confirm you account in your email and set your password and proceed
https://dashboard.heroku.com/apps
Select PHP
Introduction > Im ready
Set up > Select & Download the Heroku CLI for Windows 32 or 64 > Install ( it will install GIT - needs to access your php files and saves
it to your xampp/htdocs or wamp/www) *basic installation of xampp/wamp and to run simple "Hello World". (to contnue Go to :Setup
Open Git GUI > Create New Repository > Directory > C:\xampp\htdocs\my_project
Menu > Repository > Git Bash
$ heroku login
Enter your Heroku credentials.
Email: [email protected]
Password:
...
****if error found: "Login is currently incompatible with git bash/Cygwin/MinGW"
try using cmd prompt > open cmd > type heroku - it will update Heroku Command Line Interface (CLI)
$ heroku login
Enter your Heroku credentials.
Email: [email protected]
Password:
...
It should say "Loggen in as <[email protected]>"
***fyi only not really important***
Checking your php version
$ php -v
Checking your composer version
$ composer -V
Checking your git version
$ git --version
:Setup:
I have installed the Heroku Click
Prepare the app - skip
Open Git GUI > Create New Repository > Directory > C:\xampp\htdocs\my_project
Menu > Repository > Git Bash
Deploy the app
type> heroku create
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added
$ git clone https://git.heroku.com/sharp-rain-871.git
"C:\xampp\htdocs\my_project\sharp-rain-871\index.php"
add a file called "index.php"
<?php
echo "hello world";
?>
$ git remote add origin https://git.heroku.com/sharp-rain-871.git
$ git add .
$ git commit -m "initial commit"
$ git push origin master
visit your link
https://sharp-rain-871.herokuapp.com/
Done First Setup
Step Two
Selecting Your Character ( for me is Game of Thrones )
Javasript Button & Random select
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GOT</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button type="button" id="button">Who is your GOT Character</button>
<!--height="249" width="476"-->
<img id="image">
<script>
$("#button").click( function()
{
var random = Math.floor((Math.random() * 3) + 1);
if(random == 1){
$("#image").attr("src", "jon.jpg").css("height","249px").css("weight","476");
}else if(random == 2){
$("#image").attr("src", "danaerys.jpg").css("height","249px").css("weight","476");
}else{
$("#image").attr("src", "cersei.jpg").css("height","249px").css("weight","476");
}
$(this).hide();
}
);
</script>
</body>
</html>
$ git add .
$ git commit -m "initial commit"
$ git push origin master
visit your link
https://sharp-rain-871.herokuapp.com/
Step 3
Share your result
Back to your site URL
Site URL> https://sharp-rain-871.herokuapp.com/
copy and insert the ff code after <body> tag
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<your app id>', //it should be generated automatically
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
//****Share Button
//****https://developers.facebook.com/docs/plugins/share-button#
<div class="fb-share-button" data-href="https://sharp-rain-871.herokuapp.com/"
data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore"
target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsharp-rain-871.herokuapp.com%2F&src=sdkpreparse">Share</a></div>
to make you app live and available to public
https://developers.facebook.com/apps/
click your app
App Review
Make Game of Thrones public? Yes
***debugger for image
https://developers.facebook.com/tools/debug/sharing/
finished Product
View attachment 318996
