feat : instagram feed拉取

app/code/Joshine/InstagramFeed/Block/ApiAddress.php

@@ -72,6 +72,8 @@ class ApiAddress extends Template
             "?client_id={$this->getAppid()}&redirect_uri={$this->redirectUri()}&scope=user_profile,user_media&response_type=code";
     }
 
-
-
+    public function getMediaUrl($token, $uid): string
+    {
+        return self::INSTAGRAM_GRAPH_API_URL."/v16.0/{$uid}/media?access_token={$token}&fields=caption,id,is_shared_to_feed,media_type,media_url,permalink,thumbnail_url,timestamp,username";
+    }
 }
\ No newline at end of file

app/code/Joshine/InstagramFeed/Block/MediaFeed.php

+<?php
+namespace Joshine\InstagramFeed\Block;
+
+
+use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Framework\View\Element\Template;
+use Magento\Store\Model\ScopeInterface;
+
+class MediaFeed extends Template {
+
+    protected $request;
+
+    protected $_template = 'Joshine_InstagramFeed::mediafeed.phtml';
+    /**
+     * @var \Magento\Framework\ObjectManagerInterface
+     */
+    private $_objectManager;
+    /**
+     * @var ApiAddress
+     */
+    private $apiAddress;
+    private $_curlClient;
+    /**
+     * @var \Magento\Framework\Json\EncoderInterface
+     */
+    private $jsonEncoder;
+    /**
+     * @var \Magento\Framework\Json\Decoder
+     */
+    private $jsonDecoder;
+
+    public function __construct(
+        Template\Context $context,
+        \Magento\Framework\ObjectManagerInterface $objectManager,
+        \Magento\Framework\App\Request\Http $request,
+        ApiAddress $apiAddress,
+        \Magento\Framework\HTTP\Client\Curl $curl,
+        \Magento\Framework\Json\EncoderInterface $jsonEncoder,
+        \Magento\Framework\Json\Decoder $jsonDecoder,
+        array $data = []
+    ) {
+        parent::__construct($context, $data);
+        $this->request = $request;
+
+        $this->_objectManager = $objectManager;
+        $this->apiAddress     = $apiAddress;
+        $this->_curlClient    = $curl;
+        $this->jsonEncoder    = $jsonEncoder;
+        $this->jsonDecoder    = $jsonDecoder;
+    }
+
+    public function getCurlClient()
+    {
+        return $this->_curlClient;
+    }
+
+    public function getMedia() {
+        $uid = $this->_objectManager->get(ScopeConfigInterface::class)
+            ->getValue(
+                'joshine_instagram_feed/general/user_id',
+                ScopeInterface::SCOPE_STORE
+            );
+
+        $token = $this->_objectManager->get(ScopeConfigInterface::class)
+            ->getValue(
+                'joshine_instagram_feed/general/access_token',
+                ScopeInterface::SCOPE_STORE
+            );
+
+        $url = $this->apiAddress->getMediaUrl($token, $uid);
+
+        $this->getCurlClient()->get($url);
+        $this->getCurlClient()
+            ->setOptions([
+                CURLOPT_SSL_VERIFYHOST => false,
+                CURLOPT_SSL_VERIFYPEER => false
+            ]);
+        if ($this->getCurlClient()->getStatus() != 200) {
+            return [];
+        }
+        return $this->jsonDecoder->decode($this->getCurlClient()->getBody());
+    }
+}
\ No newline at end of file

app/code/Joshine/InstagramFeed/Controller/Adminhtml/OAuth/Redirect.php

@@ -68,7 +68,7 @@ class Redirect extends Action
                 return;
             }
             $userId        = $oauthRes['user_id'];
-            $longLifeToken = $oauthRes['access_token'];
+            $longLifeToken = $longToken['access_token'];
             $this->_configWriter->save("joshine_instagram_feed/general/user_id",  $userId);
             $this->_configWriter->save("joshine_instagram_feed/general/access_token",  $longLifeToken);
             $this->_cacheTypeList->cleanType(\Magento\Framework\App\Cache\Type\Config::TYPE_IDENTIFIER);

app/code/Joshine/InstagramFeed/view/frontend/templates/mediafeed.phtml

+<?php
+/** @var $block \Joshine\InstagramFeed\Block\MediaFeed */
+$media = $block->getMedia()['data'];
+?>
+
+<style>
+    .X3vWbIkp .IVAXiW-K {
+        background: #fff;
+        font-size: 24px;
+        font-weight: bold;
+        color: #000000;
+        margin: 0px;
+        padding: 40px;
+        text-align: center;
+    }
+
+    .X3vWbIkp {
+        margin: 0 auto;
+        max-width: 1500px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .X3vWbIkp .kbAm0V09.EMl-Twn- {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .wyPu2wzC {
+        cursor: pointer;
+        float: left;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .wyPu2wzC .fr911br7 {
+        display: block;
+        height: 100%;
+        -o-object-fit: cover;
+        object-fit: cover;
+        transition: all .2s linear;
+        width: 100%;
+    }
+
+    .wyPu2wzC:hover .fr911br7 {
+        transform: scale(1.2);
+    }
+
+    .wyPu2wzC:hover .R6dIwiDC {
+        opacity: 1;
+    }
+
+    .wyPu2wzC .SZkEYi8j {
+        pointer-events: none;
+        position: absolute;
+        right: 5%;
+        top: 5%;
+        width: 10%;
+    }
+
+    .wyPu2wzC .R6dIwiDC {
+        background-color: rgba(0, 0, 0, .5);
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    .wyPu2wzC .R6dIwiDC ._82YWzw7n {
+        height: 9.375%;
+        width: 10%;
+    }
+
+    .wyPu2wzC .R6dIwiDC .-JolWu6c {
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    #instagram-modal .j-modal .j-modal-content {
+        padding: initial;
+    }
+
+    #instagram-modal .instagram-media {
+        height: 100%;
+        display: block;
+        width: 100%;
+    }
+
+    #instagram-modal .instagram-media-wrapper {
+        height: 600px;
+        padding: 10px;
+        background-color: #0b0b0b;
+    }
+
+    #instagram-modal .instagram-content-head {
+        align-items: center;
+        border-bottom: 1px solid #ededed;
+        display: flex;
+        height: 56px;
+        justify-content: space-between;
+        padding: 0 16px;
+    }
+
+    .joshine-font-close:after {
+        content: '\00d7';
+    }
+
+    #instagram-modal .joshine-font-close {
+        font-size: 2em;
+        cursor: pointer;
+    }
+
+    #instagram-modal .instagram-content-wrapper .instagram-content-head {
+        padding: 0 16px;
+    }
+
+    #instagram-modal .instagram-content-wrapper .instagram-content-body pre {
+        word-wrap: break-word;
+        border-bottom: 1px solid #eef1f6;
+        color: #474f5e;
+        font-size: 14px;
+        line-height: 20px;
+        margin: 0;
+        padding: 16px 0;
+        white-space: pre-wrap;
+        white-space: -moz-pre-wrap;
+        white-space: -pre-wrap;
+        white-space: -o-pre-wrap;
+        word-break: break-all;
+    }
+
+    #instagram-modal .instagram-content-wrapper .instagram-content-body {
+        height: calc(100% - 76px);
+        overflow-y: auto;
+        padding: 0 16px 16px;
+    }
+
+    #instagram-modal .instagram-content-head .instagram-view-on a {
+        color: #366dff;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    #instagram-modal .instagram-content-date {
+        color: #7a8499;
+        font-size: 12px;
+        line-height: 16px;
+        margin: 0;
+        padding: 16px 0;
+        text-align: end;
+    }
+</style>
+
+<?php if (!empty($media)): ?>
+    <div id="joshine-section-app-block-instagram" class="joshine-section spaced-section">
+        <div class="container g-4 g-md-5">
+            <div id="joshine-block-block1" class="joshine-block">
+                <div class="X3vWbIkp ipsc">
+                    <h2 class="IVAXiW-K section-title title4">Follow us so you'll never miss an update</h2>
+                    <div class="kbAm0V09 EMl-Twn-">
+                        <?php foreach ($media as $row): ?>
+                            <div class="wyPu2wzC"  data-feed-data='<?= json_encode($row) ?>'
+                                 style="margin-right: 2px; margin-bottom: 2px; width: 248.333px; height: 248.333px;">
+                                <img class="fr911br7"
+                                     src=" <?= $row["thumbnail_url"] ?? $row["media_url"] ?> ">
+                                <?php if (isset($row["media_type"]) && $row["media_type"] == 'VIDEO' ) : ?>
+                                    <img class="SZkEYi8j video-icon"
+                                         src="data:image/png;base64,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">
+                                <? endif; ?>
+                                <div class="R6dIwiDC">
+                                    <svg class="-JolWu6c _82YWzw7n" width="48" height="45" viewBox="0 0 48 45" fill="none"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M10.356 7.2L11.6664 2.9598C11.9314 2.10251 12.4639 1.3526 13.186 0.819972C13.9082 0.287341 14.7819 -1.75654e-05 15.6792 8.05315e-10H32.3208C33.2181 -1.75654e-05 34.0918 0.287341 34.814 0.819972C35.5361 1.3526 36.0686 2.10251 36.3336 2.9598L37.644 7.2H41.4C45.045 7.2 48 10.155 48 13.8V37.8C48 41.445 45.045 44.4 41.4 44.4H6.6C2.955 44.4 5.625e-08 41.445 0 37.8V13.8C0 10.155 2.955 7.2 6.6 7.2H10.356ZM11.6838 10.8H6.6C6.20603 10.8 5.81593 10.8776 5.45195 11.0284C5.08797 11.1791 4.75726 11.4001 4.47868 11.6787C4.2001 11.9573 3.97913 12.288 3.82836 12.6519C3.6776 13.0159 3.6 13.406 3.6 13.8V37.8C3.6 38.194 3.6776 38.5841 3.82836 38.948C3.97913 39.312 4.2001 39.6427 4.47868 39.9213C4.75726 40.1999 5.08797 40.4209 5.45195 40.5716C5.81593 40.7224 6.20603 40.8 6.6 40.8H41.4C41.794 40.8 42.1841 40.7224 42.548 40.5716C42.912 40.4209 43.2427 40.1999 43.5213 39.9213C43.7999 39.6427 44.0209 39.312 44.1716 38.948C44.3224 38.5841 44.4 38.194 44.4 37.8V13.8C44.4 13.406 44.3224 13.0159 44.1716 12.6519C44.0209 12.288 43.7999 11.9573 43.5213 11.6787C43.2427 11.4001 42.912 11.1791 42.548 11.0284C42.1841 10.8776 41.794 10.8 41.4 10.8H36.3162C35.9317 10.8 35.5573 10.6768 35.2478 10.4486C34.9384 10.2203 34.7102 9.89897 34.5966 9.5316L32.8938 4.023C32.856 3.90054 32.78 3.7934 32.6768 3.71728C32.5737 3.64117 32.449 3.60006 32.3208 3.6H15.6792C15.551 3.60006 15.4263 3.64117 15.3231 3.71728C15.22 3.7934 15.144 3.90054 15.1062 4.023L13.4034 9.531C13.2899 9.89848 13.0618 10.22 12.7523 10.4483C12.4429 10.6767 12.0684 10.7999 11.6838 10.8ZM24 33.6C19.0296 33.6 15 29.5704 15 24.6C15 19.6296 19.0296 15.6 24 15.6C28.9704 15.6 33 19.6296 33 24.6C33 29.5704 28.9704 33.6 24 33.6ZM24 30C25.4322 30 26.8057 29.4311 27.8184 28.4184C28.8311 27.4057 29.4 26.0322 29.4 24.6C29.4 23.1678 28.8311 21.7943 27.8184 20.7816C26.8057 19.7689 25.4322 19.2 24 19.2C22.5678 19.2 21.1943 19.7689 20.1816 20.7816C19.1689 21.7943 18.6 23.1678 18.6 24.6C18.6 26.0322 19.1689 27.4057 20.1816 28.4184C21.1943 29.4311 22.5678 30 24 30Z"
+                                              fill="white"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                        <?php endforeach; ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<? endif; ?>
+
+
+<div class="joshine-model-warp" style="display: none;" id="instagram-modal">
+    <div class="joshine-mask"></div>
+    <div class="j-modal j-modal-vertical">
+        <div class="j-modal-dialog j-modal-fluid">
+            <div class="j-modal-content">
+
+                <div class="j-modal-body">
+                    <div class="row">
+                        <div class="joshine-col-xs-7 joshine-text-center instagram-media-wrapper">
+                        </div>
+                        <div class="joshine-col-xs-5 instagram-content-wrapper">
+                            <div class="instagram-content-head">
+                                <div class="instagram-view-on">
+                                    View on <a target="_blank" class="i1wejPu-"
+                                               href="" id="instagram-link">Instagram</a>
+                                </div>
+                                <span title="Close (Esc)" type="button" class="joshine-font-close"
+                                      id="instagram-modal-close"></span>
+                            </div>
+                            <div class="instagram-content-body">
+                                <pre id="instagram-caption">
+                                </pre>
+                                <p class="instagram-content-date" id="instagram-content-date">2023/04/07</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    require([
+        'jquery', 'ko', 'mage/translate'
+    ], function ($, ko) {
+        $("#instagram-modal-close").on('click', function () {
+            $("#instagram-modal").hide()
+        });
+        $(".wyPu2wzC").on('click', function () {
+            let data = $(this).data("feed-data");
+            console.log(data);
+            let link    = data.permalink;
+            let content = data.caption;
+            let media   = data.media_url;
+            let date    = data.timestamp;
+            let type    = data.media_type;
+            if (type == "VIDEO") {
+                var html = `
+                <video class="instagram-media" src="${media}" controls="" autoplay="true" webkit-playsinline="true" muted="" playsinline="true">Your browser does not support the video tag.</video>`;
+            } else {
+                var html = `
+                <img class="instagram-media" src="${media}">
+            `;
+            }
+            $("#instagram-link").attr({"href":""}).attr({"href":link});
+            $(".instagram-media-wrapper").html("").html(html);
+            $("#instagram-content-date").html("").html(date);
+            $("#instagram-caption").html("").html(content);
+            $("#instagram-modal").show()
+        });
+    });
+</script>
\ No newline at end of file