WordPress Facebook Widget

WordPress Facebook Widget

-- Functions.php

    // http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/
    // Creating the widget 
    class meor_widget_facebook extends WP_Widget {

        function __construct() {
            parent::__construct(
                // Base ID of your widget
                'meor_widget_facebook', 

                // Widget name will appear in UI
                __('Meor Facebook Widget', 'aqua-skin-care'), 

                // Widget description
                array( 'description' => __( 'Widget to allow simple Facebook display', 'aqua-skin-care' ), ) 
            );
        }

        // Creating widget front-end
        // This is where the action happens
        public function widget( $args, $instance ) {
            $title          = apply_filters( 'widget_title', $instance['title'] );
            $fb_page_id     = apply_filters( 'widget_fb_page_id', $instance['fb_page_id'] );
            $access_token   = apply_filters( 'widget_access_token', $instance['access_token'] );
            $limit          = apply_filters( 'widget_limit', $instance['limit'] );
           
            // before and after widget arguments are defined by themes
            echo $args['before_widget'];
            
            if ( ! empty( $title ) )
                echo $args['before_title'] . $title . $args['after_title'];

                // $facebook = new Facebook(array(
                //     'appId' => '1950952471796792',
                //     'secret' => '345d7a080fd2e6dc7a17d56447659d73',
                // ));
                // $fbApiGetPosts = $facebook->api('/413802048671396/feed?limit=4');

                // http://findmyfbid.com
            
                // https://graph.facebook.com/oauth/access_token?client_id=1950952471796792&client_secret=345d7a080fd2e6dc7a17d56447659d73&grant_type=client_credentials

                // access_token=1950952471796792|bTPhRfMw03iV3cm2VS-Eo6TgJ4A


                // https://www.codeofaninja.com/2014/10/display-facebook-page-feed-on-wordpress-or-website.html


                // to get 'time ago' text
                function time_elapsed_string($datetime, $full = false) {
                 
                    $now = new DateTime;
                    $ago = new DateTime($datetime);
                    $diff = $now->diff($ago);
                 
                    $diff->w = floor($diff->d / 7);
                    $diff->d -= $diff->w * 7;
                 
                    $string = array(
                        'y' => 'year',
                        'm' => 'month',
                        'w' => 'week',
                        'd' => 'day',
                        'h' => 'hour',
                        'i' => 'minute',
                        's' => 'second',
                    );
                    foreach ($string as $k => &$v) {
                        if ($diff->$k) {
                            $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : '');
                        } else {
                            unset($string[$k]);
                        }
                    }
                 
                    if (!$full) $string = array_slice($string, 0, 1);
                    return $string ? implode(', ', $string) . ' ago' : 'just now';
                }

             
                $fb_page_id = $fb_page_id;
                $profile_photo_src = "https://graph.facebook.com/".$fb_page_id."/picture?type=square";
                // $access_token = "1950952471796792|bTPhRfMw03iV3cm2VS-Eo6TgJ4A";
                $fields = "id,message,picture,link,name,description,type,icon,created_time,from,object_id";
                // $limit = 5;


                $json_link = "https://graph.facebook.com/".$fb_page_id."/feed?access_token=".$access_token."&fields=".$fields."&limit=".$limit;
                $json = file_get_contents($json_link);


                $obj = json_decode($json, true);
                $feed_item_count = count($obj['data']);


                for($x=0; $x<$feed_item_count; $x++){
                 
                    // to get the post id
                    $id = $obj['data'][$x]['id'];
                    $post_id_arr = explode('_', $id);
                    $post_id = $post_id_arr[1];
                 
                    // user's custom message
                    if( isset($obj['data'][$x]['message']) ) {
                        $message = $obj['data'][$x]['message'];
                    }
                 
                    // picture from the link
                    if( isset($obj['data'][$x]['picture']) ) {
                        $picture = $obj['data'][$x]['picture'];

                        if (strpos($picture,'&url') !== false) {
                            $picture_url_arr = explode('&url=', $picture);
                            $picture_url = urldecode($picture_url_arr[1]);
                        }

                        // $picture = $obj['data'][$x]['picture'];
                        // $picture_url_arr = explode('&url=', $picture);
                        // $picture_url_arr_ori = explode('&cfs=', $picture_url_arr[1]);
                        // $picture_url = urldecode($picture_url_arr_ori[0]);
                    }

                    // link posted
                    if( isset($obj['data'][$x]['link']) ) {
                        $link = $obj['data'][$x]['link'];
                    }

                    // name or title of the link posted
                    if( isset($obj['data'][$x]['name']) ) {
                        $name = $obj['data'][$x]['name'];
                    }
                 
                    if( isset($obj['data'][$x]['description']) ) {
                        $description = $obj['data'][$x]['description'];
                    } else {$description='';}

                    if( isset($obj['data'][$x]['type']) ) {
                        $type = $obj['data'][$x]['type'];
                    }
                 
                    // when it was posted
                    if( isset($obj['data'][$x]['created_time']) ) {
                        $created_time = $obj['data'][$x]['created_time'];
                        $converted_date_time = date( 'Y-m-d H:i:s', strtotime($created_time));
                        $ago_value = time_elapsed_string($converted_date_time);
                    }

                    // from
                    if( isset($obj['data'][$x]['name']) ) {
                        $page_name = $obj['data'][$x]['from']['name'];
                    }

                    // useful for photo
                    if( isset($obj['data'][$x]['object_id']) ) {
                        $object_id = $obj['data'][$x]['object_id'];
                    }


                    echo "
                        <!-- article -->
                        <article class='clear'>";

                            echo "<div class='profile-info clear'>

                                    <div class='profile-photo'>
                                        <img src='{$profile_photo_src}' />
                                    </div>

                                    <div class='profile-name'>
                                        <div>";
                                        
                                        echo "<a href='https://fb.com/{$fb_page_id}' target='_blank'>{$page_name}</a> ";
                                        
                                        echo "shared a ";
                                            if($type=="status"){
                                                $link="https://www.facebook.com/{$fb_page_id}/posts/{$post_id}";
                                            }
                                        echo "<a href='{$link}' target='_blank'>{$type}</a>";

                                    echo "</div>
                                        <div class='time-ago'>{$ago_value}</div>
                                    </div>

                                </div>";


                            echo "<div class='post-content'>";

                                 echo "<a href='{$link}' target='_blank' class='post-link'>";
                     
                                    if($type=="status"){
                                        // echo "<div class='post-status'>";
                                        //     echo "View update on Facebook";
                                        // echo "</div>";
                                    } else if($type=="photo"){
                                        echo "<img src='https://graph.facebook.com/{$object_id}/picture' />";
                                    } else if($type=="video"){
                                        echo "<div class='post-status'>";
                                            echo "View video on Facebook";
                                        echo "</div>";
                                    } else{
                                        if($picture_url){
                                            echo "<div class='post-picture'>";
                                                echo "<img src='{$picture_url}' />";
                                            echo "</div>";
                                        }
                         
                                        echo "<div class='post-info'>";
                                            echo "<div class='post-info-name'>{$name}</div>";
                                            echo "<div class='post-info-description'>{$description}</div>";
                                        echo "</div>";
                                    }
                     
                                echo "</a>";

                            echo "</div>";
                            

                            if( strlen($message) > 200 ) {
                                echo "<div class='profile-message'>";
                                        echo substr($message, 0, 200)."...";
                                echo "</div>";
                            } else {
                                echo "<div class='profile-message'>{$message}</div>";
                            }

                    echo "
                        </article>
                        <!-- /article -->";
                    
                }

            echo $args['after_widget'];
        }

        // Widget Backend 
        public function form( $instance ) {
           
            if ( isset( $instance[ 'title' ] ) ) {$title = $instance[ 'title' ];}
            else {$title = __( '', 'aqua-skin-care' );}
           
            if ( isset( $instance[ 'fb_page_id' ] ) ) {$fb_page_id = $instance[ 'fb_page_id' ];}
            else {$fb_page_id = __( '', 'aqua-skin-care' );}
           
            if ( isset( $instance[ 'access_token' ] ) ) {$access_token = $instance[ 'access_token' ];}
            else {$access_token = __( '', 'aqua-skin-care' );}
           
            if ( isset( $instance[ 'limit' ] ) ) {$limit = $instance[ 'limit' ];}
            else {$limit = __( '', 'aqua-skin-care' );}

            // Widget admin form
            ?>
            <p>
                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'fb_page_id' ); ?>"><?php _e( 'Page ID:' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'fb_page_id' ); ?>" name="<?php echo $this->get_field_name( 'fb_page_id' ); ?>" type="text" value="<?php echo esc_attr( $fb_page_id ); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'access_token' ); ?>"><?php _e( 'Access Token:' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'access_token' ); ?>" name="<?php echo $this->get_field_name( 'access_token' ); ?>" type="text" value="<?php echo esc_attr( $access_token ); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'limit' ); ?>"><?php _e( 'Feed Limit:' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'limit' ); ?>" name="<?php echo $this->get_field_name( 'limit' ); ?>" type="text" value="<?php echo esc_attr( $limit ); ?>" />
            </p>

            <?php 
        }
        
        // Updating widget replacing old instances with new
        public function update( $new_instance, $old_instance ) {
            $instance = array();
            $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
            $instance['fb_page_id'] = ( ! empty( $new_instance['fb_page_id'] ) ) ? strip_tags( $new_instance['fb_page_id'] ) : '';
            $instance['access_token'] = ( ! empty( $new_instance['access_token'] ) ) ? strip_tags( $new_instance['access_token'] ) : '';
            $instance['limit'] = ( ! empty( $new_instance['limit'] ) ) ? strip_tags( $new_instance['limit'] ) : '';
            return $instance;
        }
    } // Class meor_widget_facebook ends here

    // Register and load the widget
    function wpb_load_widget() {
        register_widget( 'meor_widget_posts' );
        register_widget( 'meor_widget_facebook' );
    }
    add_action( 'widgets_init', 'wpb_load_widget' );
    
    
    
    
    
    
    
CSS --
.widget_meor_widget_facebook {margin-bottom: 20px; background: #c3c7ca; padding: 16px; max-width: 320px;}
.widget_meor_widget_facebook h3 {border-bottom: 1px solid #000000;font-size: 2.2rem;margin: 0 0 20px;padding: 0 0 10px;text-transform: uppercase;}
.widget_meor_widget_facebook article {border-bottom: 1px solid #a7adb1;margin-bottom: 20px !important;padding-bottom: 10px;}
.widget_meor_widget_facebook article:last-child {border-bottom: 0;margin-bottom: 0 !important;padding-bottom: 0;}
.widget_meor_widget_facebook .post-content {margin-bottom: 10px;}
.widget_meor_widget_facebook .profile-info {margin-bottom: 6px;}
.widget_meor_widget_facebook .profile-photo {float: left;width: 25%;}
.widget_meor_widget_facebook .profile-name {float: left;width: 75%;}