Assalamualaikum Warahmatullahi Wabarokatuh,
Selamat malam para sahabat bimbel wordpress yang berbahagia, sudah lama sekali saya tidak Update Tutorial diblog ini terkait kesibukan membuat theme wordpress di beberapa Instansi Pemerintah.

Baik pada kesempatan Kali ini Tutorial yang akan saya bagikan adalah utuk Membuat Widget Instagram Wordpress tanpa Plugin, Pihak ketiga, dan Mudah dipakai.

Tutorial ini sudah pernah saya share di postingan sebelumnya :

Membuat Widget Instagram Tanpa Plugins di Theme Wordpress

Namun pada tahun 2018 sekarang ini, API Graph instagram merubah parameternya, otomatis tutorial yg lama akan menghasilkan kode error di website anda. jadi para temen2 silahkan update kode Widget Instagramnya dengan kode dibawah ini.



Sebelum saya paparkan kodenya, Silahkan Ikuti blog "Bimbel Wordpress Indonesia" untuk mendapatkan Update Info dan Tutorial terbaru dan terupdate, agar para shabat semua selalu update materi dan praktek, dan semoga semakin Maknyooss Pinterrr..

Oke langsung saja saya kasihkan kodenya :

/**
* Adds Instagram Feed widget
*/
function wpiw_widget() {
    register_widget( 'Instagramfeed_Widget' );
}
add_action( 'widgets_init', 'wpiw_widget' );

class Instagramfeed_Widget extends WP_Widget {

    /**
    * Register widget with WordPress
    */
    function __construct() {
        parent::__construct(
            'instagramfeed_widget', // Base ID
            esc_html__( 'Instagram Widget', 'desainprofesional' ), // Name
            array( 'description' => esc_html__( 'Desain Profesional: Widget untuk menampilkan Instagram Anda', 'desainprofesional' ), ) // Args
        );
    }

    /**
    * Widget Fields
    */
    private $widget_fields = array(
        array(
            'label' => 'Instgram Username',
            'id' => 'insta_username',
            'type' => 'text',
            'default' => 'martabak_oey'
        ),
        array(
            'label' => 'Jumlah yg Ditampilkan?',
            'id' => 'insta_posts',
            'type' => 'number',
            'default' => 9
        ),
        array(
            'label' => 'Ukuran Gambar',
            'id' => 'insta_size',
            'type' => 'select',
        ),
    );

    /**
    * Front-end display of widget
    */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        // Output widget title
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        // Output generated fields
        $instaResult = json_decode(file_get_contents('https://www.instagram.com/'.$instance['insta_username'].'/?__a=1'), true);
        
        $i = 0; 
        $limit = $instance['insta_posts']; 
        $sizes = $instance['insta_size']; 

        echo '<ul class="instagram-pics">';
        foreach( $instaResult['graphql']['user']['edge_owner_to_timeline_media']['edges'] as $keys => $key ) {
            $image = $key['node'];
            $link = 'https://www.instagram.com/p/'.$image['shortcode'];
            $caption = substr($image['edge_media_to_caption']['edges'][0]['node']['text'],0,130);
            
            if ($i < $limit) {             
                switch ($sizes) {
                    case 'small':
                        $images = $image['thumbnail_resources'][0]['src'];
                        break;
                    case 'thumbnail':
                        $images = $image['thumbnail_resources'][1]['src'];
                        break;
                    case 'large':
                        $images = $image['thumbnail_resources'][2]['src'];
                        break;
                    case 'extra-large':
                        $images = $image['thumbnail_resources'][3]['src'];
                        break;
                    default:
                        $images = $image['thumbnail_src'];
                        break;
                }
                echo '<li class="instagram-layout instagram-size-' . esc_attr( $sizes ) . '"><a href="' . esc_url( $link ) . '" target="_blank"  class="instagram-link"><img src="' . esc_url( $images ) . '"  alt="' . esc_attr( $caption ) . '" data-toggle="tooltip" data-placement="top" title="' . esc_attr( $caption ) . '"  class="img-responsive"/></a></li>';
            } else {
                break;
            }
            $i++;
        };
        echo '</ul>';
        
        echo $args['after_widget'];
    }

    /**
    * Back-end widget fields
    */
    public function field_generator( $instance ) {
        $output = '';
        foreach ( $this->widget_fields as $widget_field ) {
            $widget_value = ! empty( $instance[$widget_field['id']] ) ? $instance[$widget_field['id']] : esc_html__( $widget_field['default'], 'textdomain' );
            switch ( $widget_field['type'] ) {                    
                case 'select':
                    $output .= '<p>';
                    $output .= '<label for="'.esc_attr( $this->get_field_id( $widget_field['id'] ) ).'">'.esc_attr( $widget_field['label'], 'textdomain' ).':</label> ';
                    $output .= '<select class="widefat" id="'.esc_attr( $this->get_field_id( $widget_field['id'] ) ).'" name="'.esc_attr( $this->get_field_name( $widget_field['id'] ) ).'">';
                    $output .= '<option value="thumbnail" '.selected( "thumbnail", esc_attr( $widget_value ), false ).'>'.esc_attr( "Thumbnail", "textdomain" ).'</option>';
                    $output .= '<option value="small" '.selected( "small", esc_attr( $widget_value ), false ).'>'.esc_attr( "Small", "textdomain" ).'</option>';
                    $output .= '<option value="large" '.selected( "large", esc_attr( $widget_value ), false ).'>'.esc_attr( "Large", "textdomain" ).'</option>';
                    $output .= '<option value="extra-large" '.selected( "extra-large", esc_attr( $widget_value ), false ).'>'.esc_attr( "Extra Large", "textdomain" ).'</option>';
                    $output .= '<option value="original" '.selected( "original", esc_attr( $widget_value ), false ).'>'.esc_attr( "Original", "textdomain" ).'</option>';
                    $output .= '</select>';
                    $output .= '</p>';    
                break;
                
                default:
                    $output .= '<p>';
                    $output .= '<label for="'.esc_attr( $this->get_field_id( $widget_field['id'] ) ).'">'.esc_attr( $widget_field['label'], 'textdomain' ).':</label> ';
                    $output .= '<input class="widefat" id="'.esc_attr( $this->get_field_id( $widget_field['id'] ) ).'" name="'.esc_attr( $this->get_field_name( $widget_field['id'] ) ).'" type="'.$widget_field['type'].'" value="'.esc_attr( $widget_value ).'">';
                    $output .= '</p>';
            }
        }
        echo $output;
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'textdomain' );
        ?>
        <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'textdomain' ); ?></label>
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php
        $this->field_generator( $instance );
    }

    /**
    * Sanitize widget form values as they are saved
    */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        foreach ( $this->widget_fields as $widget_field ) {
            switch ( $widget_field['type'] ) {
                case 'checkbox':
                    $instance[$widget_field['id']] = $_POST[$this->get_field_id( $widget_field['id'] )];
                    break;
                default:
                    $instance[$widget_field['id']] = ( ! empty( $new_instance[$widget_field['id']] ) ) ? strip_tags( $new_instance[$widget_field['id']] ) : '';
            }
        }
        return $instance;
    }
} // class Instagramfeed_Widget

dan tambahkan kode javascript ini ke file.js anda agar nanti tampilannay waktu meng hover Image muncul Tooltip dari widget bagus tidak berantakan :

$('[data-toggle="tooltip"]').tooltip(); 


*PENTING
Jika anda menggunakan settingan jquery default dari wordpress maka symbol $ diganti dengan jQuery

Jangan Lupa Ikuti Blog ini agar anda mendapatkan Tutorial dan Info terbaru dari kami sobat, dan jangan Lupa Komentar, Bagi anda yg mengalami Bug / Fixed / Error dalam menggunakan TUTORIAL dari kami silahkan komentar, Kami akan merespon komentar anda.


Oke sampai jumpa kembali, Terimakasih

PRAKTEK dan KEMBANGKAN

GOOD LUCK

Tulis komentar anda

Silahkan Komentar Boss!!