Back to menu
Facebook Graph Api 0 1014
Demo Download

Meta Platforms, Inc., doing business as Meta and formerly Facebook, Inc., is an American multinational technology conglomerate holding company based in Menlo Park, California. The company is the parent organization of Facebook, Instagram, and WhatsApp, among other subsidiaries.

Follow these steps :-

Step 1 : Create an app in facebook from : https://developers.facebook.com/apps/

Step 2 : Copy your Facebook Page ID

Step 3 : Generate Access Token from : https://developers.facebook.com/tools/explorer/ and copy

Step 4 : Extend Acess Token time https://developers.facebook.com/tools/debug/accesstoken/?access_token=your_access_token

Step 5 : copy Acess Token

Step 6 : Paste PageID and AcessToken in script file

Step 7 : Run index.html and done.

Create index.html

                            
                                
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">

    <title>Facebook Post</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><style></style>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
		<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet"> 
		<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
	
        <section class="hero">
         <div class="container">
          <div class="row">	 
		   <div class="col-lg-6 offset-lg-3">	
			   <div class="head">
				<h3 id="pagename">Bimash Maharjan</h3>
				<span>Followers (<span id="folow">0</span>)</span>
			   </div>
			<div id="post">
				
			</div>
           </div>
          </div>
         </div>
        </section>	
		<script type="text/javascript" src="script.js">
		</script>


</body></html>

Create style.css

                            
                                

.hero {
    padding: 6.25rem 0px !important;
    margin: 0px !important;
    }
    
    .media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    }
    
    .img-fluid{
    width: 48px !important;
    height: 48px !important;
    padding: 2px;
    border: 2px solid #f4f4f4;
    } 
    .media-body {
    -ms-flex: 1;
    flex: 1;
    padding: .4rem !important;
    }
    .media-body p{
    font-family: 'Rokkitt', serif;	
    font-weight: 500 !important;
    font-size: 14px;
    color: #88898a;
    }
    .media-body small span{
    font-family: 'Rokkitt', serif;	
    font-size: 12px;
    color: #aaa;
    margin-right: 10px;
    }
    
    .img-responsive{
    display: block;
    max-width: 100%;
    height: auto;
    }	
    .head{
        display: flex;
    }
    .head>h3{
        flex-grow: 1;
    }

Create Script.js

                            
                                
var posts = document.getElementById('post');

var accesstoken =`YOUR ACCESS TOKEN` ;
var pageid = `YOUR API`;

let facebook = () =>{
    fetch(`https://graph.facebook.com/v12.0/${pageid}?fields=posts%7Bid%2Cfull_picture%2Cmessage%2Ccreated_time%7D%2Cfollowers_count%2Cname%2Clikes%2Cpicture&access_token=${accesstoken}`)
    .then(response =>{
        return response.json()
    })
    .then (data =>{
            var lenght = data['posts'].data.length;

            //time ago
            const epochs = [
                ['year', 31536000],
                ['month', 2592000],
                ['day' , 86400],
                ['hour', 3600],
                ['minute', 60],
                ['second',1]
            ];

            const getDuration = (timeAgoInSeconds) =>{
                for(let [name , seconds] of epochs){
                    const interval = Math.floor(timeAgoInSeconds / seconds);
                    if(interval >=1 ){
                        return{
                            interval : interval,
                            epoch : name
                        };
                    }
                }
            };

            const timeAgo = (date) =>{
                const timeAgoInSeconds = Math.floor((new Date()- new Date(date))/1000);
                const{interval , epoch} = getDuration(timeAgoInSeconds);
                const suffix = interval == 1 ?'' : 's';
                return `${interval} ${epoch}${suffix} ago`;
            }

            //follower counts
            document.getElementById('folow').innerHTML = data.followers_count;

            //page name
            document.getElementById('pagename').innerHTML = data.name;

            //post
            for(i=0;i<lenght;i++){
                var messages = data["posts"].data[i].message;
                if(messages == undefined){
                    var messages = "";
                }

            posts.innerHTML += '<div class="card  mt-4  border-0 shadow-lg bg-white"><div class="p-2"> <div class="media m-0"> <div class="d-flex mr-3"><img class="img-fluid rounded-circle" src="'+data.picture.data.url+'" alt="User"></div> <div class="media-body"><p class="m-0">'+data.name+'</p> <small><span><i class="fas fa-globe-europe"></i> '+timeAgo(data["posts"].data[i].created_time)+'</span></small></div> </div> </div> <div class="card-body p-0"><p class="p-2">'+messages+'</p><img class="img-responsive" src="'+data["posts"].data[i].full_picture+'" alt="Image"></div> </div> ';
            }
    })
}

facebook();

Demo Download
Share
http://bimash.com.np/SourceCode/Code/facebook-graph-api

Popular Posts