Introduction

An Instagram access token is a key that grants third-party applications limited access to the Instagram API on behalf of a user. The access token is obtained through the authentication process and is required when making requests to Instagram’s API to fetch or interact with user data.

integrate Instagram in WordPress

Step 1. Generate access token in Instagram

Here is the video about getting such access token.

Step 2. Add HTML structure in single.php

Following HTML code will show the Instagram content in every page detail of your web site. Access token is used here. Respective profile id also has been used which should be replaced with the required one.

$access_token = 'IGQWRPN2NnQ0xRYjQtVTk2cjN2cUJhczdybDF5UGE5azBOLWpZAcFI2Y2diT2lZAWHZA5cFZA0UExSTU9FWklSNGZA1cEJPTk5zaUdnSzFBTHc3WVZALeFk5cjN0VmVxTF9GSnRSVkgwUjNjdjFxLTVjQi1zeDZArODVIVVkZD';
        $api_url = "https://graph.instagram.com/v12.0/me/media?fields=id,caption,media_type,media_url,permalink,thumbnail_url,timestamp&access_token=$access_token";
        $i=1;
        $response = file_get_contents($api_url);
        $data = json_decode($response);
        ?><div class = "instagram-gallery-list "><?php
            if ($data && isset($data->data)) {
                
                    foreach ($data->data as $post) {
                       
                        // Output the Instagram post content as desired
                        echo '<div class ="insta-container" >';
                            echo '<a href="' . $post->permalink . '" target="_blank">';
                            if ($post->media_type == 'VIDEO') {
                            
                                echo "<video class ='insta-video-hover' style='width:100%;'>
                                <source src='{$post->media_url}' type='video/mp4'>
                                </video>";
                                echo " <i class = 'insta-top-left-icon fa fa-play-circle' ></i>";
                            } else {
                            echo '<img src="' . $post->media_url . '">';
                            echo " <i class = 'insta-top-left-icon fa fa-camera' ></i>";
                            }
                            echo '</a>';

                        echo '</div>';
                        
                        if ($i == 9) {
                            break;
                        }
                        $i++;
                }
            }

            ?>
        </div>
        <div class="view-on-instagram"><a href="https://www.instagram.com/postmagthemes" target="_blank" rel="noopener nofollow" class="view-on-insta-button"><span class="svg-instagram-stroke"></span> View on Instagram</a></div>

        <?php

Step 3. Add following CSS in style.css

/* // instgram setting */
.instagram-gallery-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px !important;
}

.instagram-gallery-list img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.instagram-gallery-list video {
    aspect-ratio: 1/1;
}

.insta-container {
    position: relative;
}

.insta-top-left-icon {
    position: absolute;
    top: 8px;
    left: 16px;
    color: rgb(124, 123, 123);
    font-size: 20px !important;
}

.view-on-instagram {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    margin: 25px 0 0;
}

.view-on-insta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 18px;
    color: #fff;
    background-color: #3496ff;
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    margin: 0;
    transition: all .3s linear;
}

.svg-instagram-stroke {
    display: inline-block;
    background-size: 100%;
    height: 18px;
    width: 18px;
    transition: all .3s linear;
}

Step 4. Add following JS

jQuery('.insta-video-hover').hover(function toggleControls() {
            if (this.hasAttribute("controls")) {
                this.removeAttribute("controls")
            } else {
                this.setAttribute("controls", "controls")
            }
        })

conclusion

If you are able to implement above codes in your theme, you will definitely integrate Instagram in WordPress without plugins without using any plugins. If need support then you can contact us. We will here to support you. Meanwhile you can see some of our cool free themes here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
Copy link