Introduction about integrate Instagram in WordPress

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. Such token is used to integrate popular social media Instagram in WordPress so that each and every image shows in webpage.

integrate Instagram in WordPress

Step 1. Generate access token in Instagram to integrate it in WordPress

Here is the video about getting such access token.

To generate an Instagram Access Token for your application, you need to follow these steps:

  1. Create a Facebook Developer Account: Before you can create an Instagram application and generate an Access Token, you need to have a Facebook Developer account. You can sign up for one at the Facebook Developer website.
  2. Create an Instagram App: Once you have a Facebook Developer account, log in to the Facebook Developer Dashboard. Then, follow these steps to create an Instagram app:
    • Go to “My Apps” and click on “Add a New App.”
    • Select “Instagram” as the platform for your app.
    • Fill in the required information such as the display name, contact email, privacy policy URL, and terms of service URL.
    • Complete the app creation process and navigate to your app’s dashboard.
  3. Set up Basic Display: To use the Instagram Basic Display API (required for generating Access Tokens), you need to set up Basic Display for your app:
    • In your app’s dashboard, go to “Basic Display” in the left menu.
    • Click on “Create New App.”
    • Fill in the necessary details like the app name, description, privacy policy URL, terms of service URL, and redirect URI.
    • Save your changes.
  4. Get User Access Token: To generate an Access Token, you need a User Access Token with the necessary permissions. Follow these steps to get a User Access Token:
    • Go to the Instagram Basic Display API Quickstart page: Instagram Basic Display Quickstart.
    • Click on “User Token Generator” to launch the tool.
    • Follow the prompts to log in to Instagram and grant the required permissions to your app.
    • After granting permissions, you’ll receive a User Access Token.
  5. Exchange User Access Token for Long-Lived Token: Instagram User Access Tokens are short-lived, so you’ll need to exchange it for a long-lived token that lasts for 60 days:
    • Use the User Access Token you obtained in the previous step to make a POST request to the Instagram Graph API endpoint:bashCopy codePOST /oauth/access_token
    • Include the following parameters in the request body:
      • grant_type: Use ig_exchange_token.
      • client_secret: Your Instagram app’s Client Secret.
      • access_token: The User Access Token obtained earlier.
    • Send the POST request and receive a long-lived Access Token in the response.
  6. Use the Access Token: Now that you have a long-lived Access Token, you can use it to make authorized API calls to Instagram on behalf of the user.

Remember to handle sensitive information such as Access Tokens securely and follow Instagram’s API terms and policies to ensure compliance and avoid issues with your application.

Step 2. Add HTML structure in single.php of WordPress

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. Integrate 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 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

Share via
Copy link