Posts

Home Facebook

Display Facebook Videos To Your Website Script

Update 2: Hi guys! The script on this page is not actively developed anymore, but we have the alternatives!

Learn how to display other Facebook page data using these scripts too!

Hi guys! After my post about displaying Facebook photos and events to website, some of you requested this post – how to display Facebook Fan Page Videos to your website or webpage.

This one is useful if you want your Facebook videos to be shown in your website in a synchronized way.

Once you uploaded a video in your fan page, it will be automatically shown to your website too.

The advantages and risks of this is almost the same with what I discussed in my first post related to this one.

fbvideos

DOWNLOAD CODE LIVE DEMO

On the demo, I just uploaded some random videos of mine, taken using my Android phone. Haha!

In this post I’ll show you the code on:

  • How to pull videos from you Facebook Page and display it to your website.
  • We will retrieve just the video’s title, date it was created, the actual video and its description.

We were able to achieve this using the FQL, Facebook PHP SDK. As of this posting, the current PHP SDK version I downloaded is v.3.1.1. And of course, creating a Facebook App so you can have your own AppId and App Secret Id.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>
        <title>The Code Of A Ninja Dummy Page Videos</title>
        <style type=’text/css’>
            #page_title{
                font-size:16px;
                font-weight:bold;
                margin: 0 0 10px 0;
            }
           
            .date_created{
                font:italic 12px Arial, Helvetica, sans-serif;
                color:#fff;
                margin:0 0 5px 0;
            }
           
            .video_desc{
                font:12px Arial, Helvetica, sans-serif;
                color:#fff;
                margin:0 0 5px 0;
            }
           
            .video_item{
                width:320px; /*i tried it with a bigger video and it’s 400px*/
                float:left;
                padding:5px;
                background-color:brown;
                margin: 5px;
            }
           
            .video_title{
                font:20px Arial, Helvetica, sans-serif;
                font-weight:bold;
                color:#fff;
            }
        </style>
    </head>
<body>
<div class=’page_title’>
    These videos are synchronized with this
    <a href=’https://www.facebook.com/video/?id=221167777906963′ target=’_blank’>
        Dummy Page Videos
    </a>
</div>
<?php
require ‘fb-sdk/src/facebook.php’;

//specify you appId and secret
$facebook = new Facebook(array(
  ‘appId’  => ‘change_to_your_app_id’,
  ‘secret’ => ‘change_to_your_app_secret’,
  ‘cookie’ => true, // enable optional cookie support
));

//query to get videos
//specify you fan page id, I got 221167777906963
//you can also use the LIMIT clause here if you want to show limited number of videos only
$fql = “SELECT
            vid, owner, title, description, thumbnail_link,
            embed_html, updated_time, created_time
        FROM
            video
        WHERE owner=221167777906963″;
           
$param  =   array(
 ‘method’    => ‘fql.query’,
 ‘query’     => $fql,
 ‘callback’  => ”
);
$fqlResult   =   $facebook->api($param);

//loop through each videos
foreach( $fqlResult as $keys => $values ){
   
    echo “<div class=’video_item’>”;
        echo “<div class=’video_title’>” . $values['title'] . “</div>”;
        echo “<div class=’date_created’>Date Created: “ . date( ‘l, F d, Y’, $values['created_time'] ) . “</div>”;
        echo $values['embed_html'];
        echo “<div class=’video_desc’>” . $values['description'] . “</div>”;
    echo “</div>”;
}
?>
   
  </body>
</html>

You can also retrieve other videos information if you want, please see the videos table of Facebook.

Home Android

How To Get A Job In Tech

How To Get A Job In Tech? Well, I currently have a job in the IT industry but not in these big and amazing  companies such as Google, Apple and Facebook. Honestly, I've been dreaming of getting a job at Google. Haha! I choose Google because I love their products such as GMail, Google Docs, Android, Search Engine and many others even though there are some ads, for me it's just fine and natural. It enable me to enjoy great technologies free. :)

But anyway, I'm happy with my current job, developing Google Android applications and utilizing lots of their web development tools such as of Google Code, Analytics, and Webmaster tools.

I wondered how to get at job in these awesome companies. So I thank this info-graphic for giving me some idea. Haha! Let's see:

Computers – A Chronological Timeline

I love computers. This is where I do most of my stuff. I do Web and Android programming, made my dream of being a writer come true by blogging, connecting with friends via social networking site such as facebook and twitter, researching, having a conversation with other Software Developers around the world via StackOverflow and other Q and A or forum sites, helping and inspiring others, playing games such as Angry Birds and Red Alert, etc. 
My career wouldn't exist without it. 
Computers changed the world - how we work, think and live. Most businesses in the world won't run without computer systems, and they won't get promoted without a website.

So, it is such a joy to see some of its history, how it evolved from generation to generation.

It was so nice that I came across this infographic here. :)

Home Facebook

Google+ vs. Facebook: Mark Zuckerberg’s Reaction

Alright, so I watched this video for about 10 times now and I know I'm gonna be watching this one tomorrow and in the future. Hahaha! This one really makes me laugh. Well I know some of you might not find it funny but this one is really hilarious for me! I mean, I was like ROFL! This is about MySpace, Facebook and Google+. We all know the competition they had or they're having. The actors are really good.

Real Tom, Fake Tom :))

Fake Zuck, Real Zuck. Well yeah, Fake Zuck looks Gay here. :))

The movie clip were made by the Rooster Teeth. Thanks to them for making my day. :))

Here are some of my favorite lines on that video:

------

Zuck: Listen, we're friends right?
Guy: Sure yeah, we're on the same, circle of friends.

------

Zuck: Do I know you from somewhere?
Tom: Let me give you a hint.

------

Tom: I'm sorry I didn't get your name
Zuck: It's not important, listen, I have to go.

------

Tom: I'm not gonna hurt you, you know why Zuckerberg? I don't have to.

------

There's a lot more. Well, to understand those lines more, just watch it:


The real Tom Anderson had his personal comment on this video:

"G+ / FB / MySpace Parody :-) Takes awhile to get goin' :) Sorta a video version of the comic I shared a few days ago. Update: Some people reacted to this post by suggesting I'm eager to see Zuckerberg / Facebook go down. You're not reading my posts at all if you think that. As I've started a few times, Mark has always been a gentleman to me, and I admire what he's done, and am looking forward to what he will do. The competition between G+, Twitter and Facebook will make all three companies better. Who wins? Us, the users. Did Facebook even have a "status update" before Twitter? FB grew and became better because of that competition. And as for me, my ownership of MySpace was sold in the initial 2005 sale not in the recent fire sale (see previous post). From my perspective, I'm grateful and feel lucky both for the money I made and the long run MySpace did have (I left in early 2009)."

He said that on his Google+ account. Yes, he posted it in his personal G+ account. I admire Tom for being really cool, he has such a great sense of humor. He's a good sport. Tom, "Invented Friends" should be one of your bragging rights in your Google Plus account!

:))))

Home PHP

How To Customize reCAPTCHA

Have you ever received unsolicited (Spam) messages, comments or notifications in your email, facebook account, or to other services you are using online? Probably yes. I think almost all people using the internet experienced it already. There are trillions of spam messages sent every year.

One effective way to prevent those spam messages to your form is using a “Completely Automated Public Turing test to tell Computers and Humans Apart” or CAPTCHA in short. Google, Facebook, Yahoo, and other big internet companies uses this method. So today we are going to do a script that uses Google reCAPTCHA for our form. This tool by Google is widely used in the internet, maybe you’re familiar with the red box image below:

Home>PHP How To Customize reCAPTCHA

Customizing your Google Recaptcha

DOWNLOAD SOURCE CODE LIVE DEMO

Step 1: Download the recaptcha library here.

Step 2: We’re going the have the following code on our index.php file.

<html>
<head>
<title>https://www.codeofaninja.com/ - Customized reCAPTCHA For Your Form using PHP</title>
<style type='text/css'>    
/*
the customization of our recaptcha field
recaptcha_widget id is what we're customizing
*/

#recaptcha_widget{
    magin: 0;
}

#recaptcha_widget a{
    color: #000;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 15px 0 0 0;
    padding: 2px 4px 2px 4px;
    background-color: #F5DEB3;
}

#recaptcha_widget a:hover{
    background-color: #DEB887;
}

.text{
    margin: 0 0 5px 0;
}

/*
just some message box style
when form is submitted
*/
#error-box{
    border: 4px solid #FF0000; 
    background-color: #FA8072;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    width: 430px;
    margin: 0 0 5px 0;
    padding: 4px;
}

#success-box{
    border: 4px solid #32CD32; 
    background-color: #00FF7F;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    width: 430px;
    margin: 0 0 5px 0;
    padding: 4px;
}
</style>
</head>
<body>
<?php
//defining indexes
isset( $_REQUEST['action'] ) ? $action = $_REQUEST['action'] : $action = '';
isset( $_REQUEST['email'] ) ? $email = $_REQUEST['email'] : $email = '';
isset( $_REQUEST['user_password'] ) ? $user_password = $_REQUEST['user_password'] : $user_password = '';
isset( $_REQUEST['recaptcha_challenge_field'] ) ? $recaptcha_challenge_field = $_REQUEST['recaptcha_challenge_field'] : $recaptcha_challenge_field='';
isset( $_REQUEST['recaptcha_response_field'] ) ? $recaptcha_response_field = $_REQUEST['recaptcha_response_field'] : $recaptcha_response_field='';

require 'recaptcha/recaptchalib.php'; 
/* ---------------------------recaptcha code----------------------- */
//use your own private key here
$privatekey = "6LdUOcYSAAAAAGT-EbCqOldQ54GJhqG3ZdMkwLBG";
$resp = recaptcha_check_answer ($privatekey,
                        $_SERVER["REMOTE_ADDR"],
                        $recaptcha_challenge_field,
                        $recaptcha_response_field);

if (!$resp->is_valid) {
    $recaptcha = 'wrong';
} else {
    $recaptcha = 'correct';
}
/* ---------------------------recaptcha code----------------------- */
    
//when the form is submitted
if( $action == "signup" ){

$error_msg = '';

//if( empty($email) || empty($user_password)){
if( $email == '' || $user_password == ''){
    $error_msg .= "<div>-{$email}{$user_password}Field cannot be empty.</div>";
}

if( $recaptcha == 'wrong' ){
    $error_msg .= "<div>-You should enter characters that match the word verification.</div>";
}

if( $error_msg != '' ){
    echo "<div id='error-box'>";
        echo $error_msg;
    echo "</div>";
}else{
    echo "<div id='success-box'>";
        echo "Form successfully submitted.";
    echo "</div>";
}

}

?>

<!-- 
-this script is needed since we
are customizing recaptcha 
-it comes first before the form tag - always
-->
<script type="text/javascript">
var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
};
</script>

<!-- form tag comes first before table tag - always. -->
<form action='#' method='post' class='form'>
<table>
    <tr>
        <td align='right'>Email:</td>    
        <td><input type='text' name='email' /></td>
    </tr>
    <tr>
        <td align='right'>Password:</td>
        <td><input type='text' name='user_password' /></td>
    </tr>
    <tr>
        <td valign='top'>Word Verification.: </td>
        <td>
        
<div style='margin: 0px auto; text-align: center; width: 360px;'>
    

        <div class="field-space" style='text-align: left;'>
        
<!-- the id recaptcha_widget is what we're customizing -->
<div id="recaptcha_widget" style="display:none">

    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect, please try again</div>

    <div class="recaptcha_only_if_image" style='margin-bottom: 10px;'>Enter the words above : </div>
    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

    <div><input type="text" id="recaptcha_response_field" name="recaptcha_response_field" size='30' class='text' /></div>
    
    <span><a href="javascript:Recaptcha.reload()">Get Another Challenge</a>  </span> 
    <span class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Try Audio</a>  </span>
    <span class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Try Image</a>  </span>

    <span><a href="javascript:Recaptcha.showhelp()">Help</a></span>

</div>

<!-- user your own public key after "k="-->

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LdUOcYSAAAAALa38Uxegl8owzKXGomiSkV498n_"></script>
<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdUOcYSAAAAALa38Uxegl8owzKXGomiSkV498n_" height="300" width="500" frameborder="0"></iframe>
    <br>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            
        <!-- our hidden field and submit button here -->
        <div class="submit" style='float: left;'>
                <input type='hidden' name='action' value='signup' />
                <input type='submit' value='Sign Up!' />
        </div>
        
        </td>
    </tr>
</table>
</form>

</body>
</html>

That’s it! :)

display-facebook-events-on-website

How To Display Facebook Page Events on Website using PHP?

Before we start coding, you might be someone NOT interested in coding. If that's the case, you should use a website plugin like SociableKIT. Watch the following video.

Need to embed a single Facebook page event on your website? Watch this tutorial.

What's next? You can try SociableKIT now, view a live demo here and here or continue with the code tutorial below.

Let's code!

Do you have an event manager on your website? Do you create events on your Facebook page? If your answer is both YES, you're wasting a lot of time managing your brand's events information online.

What if there's a way to create an event ONCE, and then let it appear both on your Website and Facebook page? Will you be happy saving your precious time? Our code for today will make you happy then, just like we are!

Today we're gonna talk about how to display publicly available Facebook Page EVENTS on your website. This one is great if you want your Facebook page events to be shown in your website in a synchronized way.

Once you created or updated an event on Facebook, it will be automatically reflected on your website too. The advantages and risks of this is almost the same with what I discussed in my first post  related to this one.

Read more

display-facebook-photos-on-website-1

How To Display Facebook Page Photo Albums on Website Using PHP?

Before we start coding, you might be someone NOT interested in coding. If that's the case, you should use a website plugin like SociableKIT. Watch the following video.

Need to embed a single Facebook page photo album on your website? Watch this tutorial.

What's next? You can try SociableKIT now, view a live demo here and here or continue with the code tutorial below.

Let's code!

Do you have a photo manager on your website? Do you upload photos on your Facebook page as well?

If your answer is both YES, you're wasting a lot of time managing your brand's photos online.

What if there's a way to upload your photo albums ONCE, and then let it appear both on your Website and Facebook page?

Will you be happy saving your precious time?

Read more

Home Facebook

Social Network Integration

Social Network Integration
Familiar huh?

Facebook? Twitter? You are probably very familiar or even addicted to them. To date, it is almost impossible for people who use the internet to miss an account with them. They are free, easy to use and lets you connect with your friends or people no matter where on earth they are. Wikipedia defines social networking service as “…an online service, platform, or site that focuses on building and reflecting of social networks or social relations among people, e.g., who share interests and/or activities”. There are so many social networking service sites out there and two of the most popular includes facebook and twitter.

Most internet users are visiting their facebook account everyday. It just shows that the world has gone social. When you log in to your facebook account, you can check and see how many of your friends are online. Large number of people are getting online every day and make it as essential part of their life. They connect with each other, playing games, sharing activities, interests, etc. with their network of friends. They join conversations and discover contents that can be of meaningful value for them. The social network is active and authentic since it is made up of real people - and these people can be the consumers for your business.

With that said, we can conclude that it is beneficial for businesses to integrate social networks, such as facebook and twitter, to their web presence or websites. Once a user like, recommend or tweet your website, it will be shared to their network of friends and this personal recommendation is a powerful kind of endorsement. Your website will have more opportunity to be visited that offers your products and/or services to be known to customers.

Maybe you are aware of how many people can find your facebook page or tweets? According to Wikipedia, facebook now has over 600 million active users all over the world while twitter has 200 million (as of January 2011). It’s now a privilege for your business to join these social networking sites to keep in touch of your customers and get the edge by integrating it to your website.


I have the following tutorials related to Social Network Integration: