Web Developing Tutorial: January 2013

Wednesday, January 9, 2013

[PHP] Upload picture to facebook using Graph API

This code is intented to post photo to user's timeline using your website.
As of today: January 09, 2013 this code is 100% tested and working!

This code has 2 parts.

First: You can control what image you want to post like http://sharefavoritebibleverses.com/images/bible_verses.png

Second: The user will upload image coming from their computer file.

First Part
You can control what image you want to post like http://sharefavoritebibleverses.com/images/bible_verses.png

<?php
      $app_id = "YOUR APP ID";
      $app_secret = "YOUR APP SECRET";

    //Take NOTE: this must include http://
    //ex. http://sharefavoritebibleverses.com/fb_connect.php
      $post_login_url = "THE PAGE WHERE YOU ARE GOING TO SAVE THIS FILE";

    //Take NOTE: this must include http://
      $photo_url = "http://sharefavoritebibleverses.com/images/bible_verses.png";

    //you can add link to your image caption, but you can't use this tag <a href='http://link.com' >visit my link</a>
      $photo_caption = "create another verse at http://sharefavoritebibleverses.com";

$code = $_REQUEST["code"];

//Obtain the access_token with publish_stream permission
if (!$code)
{
    $dialog_url= "http://www.facebook.com/dialog/oauth?"
      . "client_id=" . $app_id
      . "&redirect_uri=" . urlencode( $post_login_url)
      . "&scope=publish_stream";

    echo("<script>top.location.href='" . $dialog_url
      . "'</script>");
}
else
{
    $token_url="https://graph.facebook.com/oauth/access_token?"
      . "client_id=" . $app_id
      . "&client_secret=" . $app_secret
      . "&redirect_uri=" . urlencode( $post_login_url)
      . "&code=" . $code;

    $response = file_get_contents($token_url);
    $params = null;
    parse_str($response, $params);
    $access_token = $params['access_token'];

    // POST to Graph API endpoint to upload photos
    $graph_url= "https://graph.facebook.com/me/photos?"
      . "url=" . urlencode($photo_url)
      . "&message=" . urlencode($photo_caption)
      . "&method=POST"
      . "&access_token=" .$access_token;

    echo '<html><body>';

       echo file_get_contents($graph_url);

    echo '</body></html>';
}
?>

This will output something like this
{"id":"517833744917123","post_id":"100000713303095_517823648251456"}

you can change this

    echo file_get_contents($graph_url);

into this

    $ok = file_get_contents($graph_url);

    if($ok)
        echo'<script language="JavaScript">window.location="index.php";</script>';


so you can direct them to any page you want after they submitted the photo.
or you can do any conditions you want.

**************************************************************************************************

Second Part
The user will upload image coming from their computer file.

<?php
      $app_id = "YOUR APP ID";
      $app_secret = "YOUR APP SECRET";

    //Take NOTE: this must include http://
    //ex. http://sharefavoritebibleverses.com/fb_connect.php
      $post_login_url = "THE PAGE WHERE YOU ARE GOING TO SAVE THIS FILE";

       $code = $_REQUEST["code"];

       //Obtain the access_token with publish_stream permission
       if(empty($code))
       {
          $dialog_url= "http://www.facebook.com/dialog/oauth?"
           . "client_id=" . $app_id
           . "&redirect_uri=" . urlencode( $post_login_url)
           . "&scope=publish_stream";

          echo("<script>top.location.href='" . $dialog_url
          . "'</script>");
         }
        else
        {
          $token_url="https://graph.facebook.com/oauth/access_token?"
           . "client_id=" . $app_id
           . "&redirect_uri=" . urlencode( $post_login_url)
           . "&client_secret=" . $app_secret
           . "&code=" . $code;

          $response = file_get_contents($token_url);
          $params = null;
          parse_str($response, $params);
          $access_token = $params['access_token'];

         // Show photo upload form to user and post to the Graph URL
         $graph_url= "https://graph.facebook.com/me/photos?"
         . "access_token=" .$access_token;

         echo '<html><body>';
         echo '<form enctype="multipart/form-data" action="'
         .$graph_url .' "method="POST">';
         echo 'Please choose a photo: ';
         echo '<input name="source" type="file" ><br/><br/>';
         echo 'Say something about this photo: ';
         echo '<input name="message"
             type="text" value=""><br/><br/>';
         echo '<input type="submit" value="Upload"/><br/>';
         echo '</form>';
         echo '</body></html>';


      }
?>

this will output something like this

{
"id": "517839871583123",
"post_id": "100000713303022_517839881583112"
}

Friday, January 4, 2013

Customize Google +1 button

If you don't have code given by the google plus yet,
get it here

https://developers.google.com/+/plugins/+1button/

You will get the code like this from them

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

To customize the button...

#1 CSS

.Wrapper {
display:block;
padding:0px;
margin:0px;
text-decoration:none;
border:none;
width:32px; /*adjust to the width of your icon*/
height:32px; /*adjust to the height of your icon*/
overflow:hidden;
background:url(images/customize_image.png) left top no-repeat; /*Edit to match your custom icon. If you prefer to use an <img> in the div you should remove this line.*/
}
.Wrapper div {
padding:4px 0px !important; /*the original button would have a height of 24px. Add padding to the top and bottom to align it vertically. If your custom icon is 24px tall or less you dont need this line.*/
}
.Wrapper {
!display:none; /*IE7 hack. If one day google decides to support IE7 you can remove this. I dont think you want to display something that doesnt work.*/
}
.Wrapper iframe {
opacity:0;
filter:alpha(opacity=0);
zoom:1;
}

#2 HTML

*********************************************************************

This is the complete code.

Simply copy and paste it to the HTML or even PHP page.

<style>

.Wrapper {
display:block;
padding:0px;
margin:0px;
text-decoration:none;
border:none;
width:32px; /*adjust to the width of your icon*/
height:32px; /*adjust to the height of your icon*/
overflow:hidden;
background:url(images/customize_googleplus.png) left top no-repeat; /*Edit to match your custom icon. If you prefer to use an <img> in the div you should remove this line.*/
}
.Wrapper div {
padding:4px 0px !important; /*the original button would have a height of 24px. Add padding to the top and bottom to align it vertically. If your custom icon is 24px tall or less you dont need this line.*/
}
.Wrapper {
!display:none; /*IE7 hack. If one day google decides to support IE7 you can remove this. I dont think you want to display something that doesnt work.*/
}
.Wrapper iframe {
opacity:0;
filter:alpha(opacity=0);
zoom:1;
}

</style>

<div class="Wrapper">

 <div class="g-plusone" data-annotation="inline" data-width="300"></div>

</div>

Thursday, January 3, 2013

PHP - Problem in saving the image using imagepng

Probably you are familiar with the code below.

I am assuming that you successfully prints the image

and only having a problem in saving it.

This code will do the solution!

Tested and working!





header( "Content-type: image/png" );


 
// this will print your image 
imagepng($img);
 
// set where you want your image to be saved 
// take note that you have to save the image 
// into another directory for this to work. 
$filename = "any_name"; 
$directory = "folder/".$filename.".png";
 
// set the directory with 0755 permission
chmod($directory,0755);
 
// this will save your image 
imagepng($img, $directory, 0, NULL);
 
 
imagedestroy($img);