Σκοπός: Σκοπός αυτής της μελέτης είναι να δείξουμε πως μπορεί να γίνει σύνδεση στο Instagram μέσα από το Pegasus Web App ώστε να εμφανίσουμε την ροή των δημοσιεύσεων μας εντός του site.

Το Instagram καταργεί το παλαιότερο API του και πλέον κάθε νέα εφαρμογή, πρέπει να δημιουργείτε κάνοντας χρήση του νεότερου Instagram Graph API ή Instagram Basic Display API.

Οι νέοι χρήστες θα πρέπει απαραίτητα να δημιουργήσουν την εφαρμογή τους κάνοντας χρήση του νέου API ενώ οι παλαιότεροι θα πρέπει να μεταβούν στο νεότερο έως τις 29/06/2020.

Σύνδεση στο Instagram μέσω του Web App και προβολή των δημοσιεύσεων του συνδεδεμένου λογαριασμού.

Νέο API

Για την παρούσα εφαρμογή/μελέτη χρησιμοποιούμε το Instagram Basic Display API ούτως ώστε ο κάθε χρήστης να μπορεί γρήγορα και εύκολα να συνδέσει τον λογαριασμό που του ανήκει με την εφαρμογή και να προβάλει μέσω του Web App το feed από το προφίλ του στο Instagram εντός της ιστοσελίδας του.

Κύριες αλλαγές και προτερήματα χρήσης του νέου Instagram Basic Display API:

- Για την προβολή του feed μας μέσω ενός λογαριασμού που μας ανήκει, δεν χρειάζεται η εφαρμογή μας να περάσει από app review και να υπάρχει κάποια καθυστέρηση μέχρι να λάβει έγκριση.

- Η πλατφόρμα προσφέρει τη δυνατότητα παραγωγής μακρυπρόθεσμων access tokens (long-lived Instagram User Access Tokens) με αποτέλεσμα να μην χρειάζεται να γίνεται επί τόπου σύνδεση μέσως του Web App για την παραγωγή του token.

- Το μακρυπρόθεσμο access token δεν διατρέχει τον κίνδυνο να λήξει απρόσμενα.

- Δεν υπάρχει περιορισμός στον αριθμό των προβαλλόμενων media χωρίς να γίνει app review. (Με το παλαιότερο API μπορούσαν να προβληθούν μόνο τα 20 τελευταία αν δεν είχει γίνει app review.)

Βήματα δημιουργίας Instagram App και σύνδεσης του στο Pegasus:

Εξωτερικές απαιτήσεις:
- Υπάρχων Facebook Developer Account.
- Υπάρχων λογαριασμός Instagram.

Α. Δημιουργία Facebook App

- Θα κατευθυνθείτε στο developers.facebook.com και θα επιλέξετε My Apps > Create App δίνοντας ένα όνομα στο app και ένα e-mail επικοινωνίας.
- Εφόσον έχει δημιουργηθεί το νέο app, από το αριστερό μενού επιλέγετε Settings > Basic και στο κάτω μέρος πατάτε στο Add Platform, από το οποίο επιλέγετε [Website]. Στο πεδίο που θα εμφανιστεί, συμπληρώνετε την ιστοσελίδα σας π.χ. https://wwww.tesae.gr και αποθηκεύετε.

Β. Παραμετροποίηση Instagram Basic Display

- Από το αριστερό μενού επιλέγετε PRODUCTS. Στη σελίδα αυτή θα βρείτε το "Instagram" και θα πατήσετε Set Up.
- Στη σελίδα που θα μεταβείτε, από το αριστερό μενού θα επιλέξετε το "Basic Display" και θα κάνετε Create New App.
- Στη νέα σελίδα που θα εμφανιστεί, υπάρχουν διάφορα πεδία, εκ των οποίων τα παρακάτω θα πρέπει να συμπληρωθούν:
i) Valid OAuth Redirect URIs: https://www.your-site-name.gr/pegasus_cloud_app/socialfd_01/autho_callback.php
ii) Deauthorize Callback URL: https://www.your-site-name.gr
iii) Data Deletion Request URL: https://www.your-site-name.gr
Στα (ii) και (iii) χρησιμοποιούμε απλώς το URL του κύριου χώρου διότι η εφαρμογή θα χρησιμοποιείτε από εσάς με το δικό σας λογαριασμό.

Γ. Δημιουργία Instagram Test User

- Από το αριστερό μενού επιλέγετε Roles > Roles. Στη σελίδα που θα μεταβείτε στο κάτω μέρος θα βρείτε το "Instagram Testers" και θα επιλέξετε Add Instagram Testers και θα συμπληρώσετε το username του λογαριασμού Instagram από τον οποίο θέλετε να προβάλλετε το feed στη σελίδα σας.

- Θα συνδεθείτε στον λογαριασμό του παραπάνω χρήστη που ορίσατε ως tester και θα κατευθυνθείτε (Εικόνα Προφίλ) > Edit Profile > Apps and Websites > Tester Invites. Εκεί θα βρείτε την πρόσκληση που κάνατε και θα επιλέξετε Accept (Αποδοχή).

- Μόλις γίνει η αποδοχή, από το αριστερό μενού επιλέγετε Instagram > Basic Display ώστε να επιστρέψετε στην προηγούμενη σελίδα και θα βρείτε τον χρήστη που ορίσατε στο σημείο "User Token Generator". Πατώντας "Generate Token" θα δημιουργηθεί ένα μακροπρόθεσμο access token το οποίο θα χρησιμοποιήσουμε για να προβάλλουμε τα posts του χρήστη στη σελίδα μας.

Δ. Ρυθμίσεις στο Pegasus Web App.

- Αφότου συνδεθείτε στο διαχειριστικό (admin) της σελίδας σας, θα κατευθυνθείτε στο [Toolbox->Εργαλεία Παραμετροποίησης->Παραμετροποίηση Ηermes Modules->Παραμετροποίηση Social Media Feed->Μέλη Social Media Feed]
- Θα δημιουργήσετε μια νέα καταχώρηση συμπληρώνοντας τα πεδία Client ID, Instagram Access Token και το Όνομα Χρήστη και θα πατήσετε καταχώρηση.
- Έπειτα θα κατευθυνθείτε στο [Toolbox->Εργαλεία Παραμετροποίησης->Παραμετροποίηση Ηermes Modules->Παραμετροποίηση Social Media Feed->Βασικές Παράμετροι Social Media Feed] και θα συμπληρώσετε τα Instagram Client ID, Instagram Client Secret όπως εμφανίζονται στην εφαρμογή που δημιουργήσατε. Θα πατήσετε [Ενημέρωση] και έπειτα "Σύνδεση στο Instagram Client" ώστε να συνδεθείτε στο Instagram, σε περίπτωση που δεν είστε συνδεδεμένοι, και να ενημερωθεί η εφαρμογή με τις τελευταίες αλλαγές.

Σημείωση: Υπο περιπτώσεις, ο browser σας ίσως αποκλύσει το pop-up παράθυρο και θα πρέπει να το ανοίξετε χειροκίνητα μέσω της ειδοποίησης του browser σας.

Σημαντικό: Βεβαιωθείτε πως το "Χρησιμοποιεί το παλιό API" ΔΕΝ είναι τσεκαρισμένο εφόσον το app σας είναι νέο.

Έφοσον όλα τα παραπάνω έχουν ολοκληρωθεί με επιτυχία, πλέον μπορείτε να κατευθυνθείτε στον σύνδεσμο "Instagram Media" με ΜΚ: 140000598000000

Σύνδεσμος: [/pegasus/socialfd_01/recent_media_list00.php?pcode=SCFD_INSTA_LIST]

SEF URL: [/instagram-media]

όπου θα βρείτε τις δημοσιεύσεις που έχουν γίνει στο Instagram από τον συνδεδεμένο λογαριασμό.

Στα banners μπορείτε επίσης να βρείτε τη νέα μέθοδο banner "Banner: Instagram Feed" το οποίο εμφανίζει τις τελευταίες δημοσιεύσεις του λογαριασμού και έχει κουμπί "Περισσότερα" το οποίο ανακατευθύνει στον σύνδεσμο που αναφέρθηκε παραπάνω.

Σημείωση: Η εφαρμογή που δημιουργήσατε βρίσκεται σε test mode. Για την συγκεκριμένη λειτουργία που υλοποιήθηκε στην παρούσα μελέτη, όπως αναφέρεται και από το Instagram, δεν είναι απαραίτητο να μεταβείτε σε Live κάνοντας app review.

Παλαιότερο API

Αρχικά θα κατευθυνθούμε στην οθόνη των βασικών παραμέτρων [Toolbox->Εργαλεία Παραμετροποίησης->Παραμετροποίηση Ηermes Modules->Παραμετροποίηση Social Media Feed->Βασικές Παράμετροι Social Media Feed]

Στην οθόνη που μας εμφανίζεται θα βρούμε δυο πεδία συμπλήρωσης: Instagram Client ID, Instagram Client Secret. Για να συμπληρωθούν τα πεδία αυτά θα πρέπει να έχετε πραγματοποιήσει εγγραφή ως developer στο Instagram με τον λογαριασμό σας και έπειτα να καταχωρήσετε την εφαρμογή σας. (https://www.instagram.com/developer/)

Πραγματοποιώντας τα παραπάνω, έχει δημιουργηθεί το Client και πλέον έχετε τα στοιχεία Client ID και Client Secret που χρειάζεται να συμπληρωθούν στην εφαρμογή.

Πριν αποχωρήσετε από τις ρυθμίσεις του Client σας, είναι απαραίτητο στο tab "Security" να συμπληρωθεί το "Valid redirect URIs" με τον παρακάτω σύνδεσμο: https://[MY_WEBSITE]/pegasus_cloud_app/socialfd_01/autho_callback.php

Όπου [MY_WEBSITE] αντιστοιχεί στο domain name σας.

Σημείωση: Κάθε εφαρμογή που δημιουργείται στο Instagram, είναι αυτομάτως σε Sandbox Mode, το οποίο παρέχει όλα τα δικαιώματα αλλά ισχύουν κάποια όρια. Σε περίπτωση που θέλετε να εξαλειφθούν αυτά τα όρια θα πρέπει να πραγματοποιήσετε αίτηση για αξιόλογηση της.

Εφόσον συμπληρωθούν και πατηθεί το κουμπι "Σύνδεση στο Instagram Client" Θα εμφανιστεί pop-up παράθυρο μέσω του οποίου θα πραγματοποιήσετε σύνδεση με τα στοιχεία σας, στο λογαριασμό σας στο Instagram. Σε περίπτωση που είστε ήδη συνδεδεμένοι από τον browser σας τότε το pop-up θα κλείσει αυτομάτως.

Σημείωση: Υπο περιπτώσεις, ο browser σας ίσως αποκλύσει το pop-up παράθυρο και θα πρέπει να το ανοίξετε χειροκίνητα μέσω της ειδοποίησης του browser σας.

Με την πραγματοποίηση της σύνδεσης, το Instagram θα σας παραχωρήσει ένα Access Token το οποίο αντιστοιχεί στο Client ID σας. Η εφαρμογή του Πήγασου, αυτόματα θα κρατήσει αυτή την αντιστοιχία και θα την αποθηκεύσει στη Βάση Δεδομένων. Κάθε αντιστοιχία που έχει δημιουργηθεί, μπορεί να προβληθεί στην οθόνη "Μέλη Social Media Feed" [Toolbox->Εργαλεία Παραμετροποίησης->Παραμετροποίηση Ηermes Modules->Παραμετροποίηση Social Media Feed->Μέλη Social Media Feed]

Σημείωση: Το Access Token που μας παραχωρεί το Instagram, υπάρχει περίπτωση να λήξει απροσδόκητα, σε περίπτωση που συμβεί αυτό θα πρέπει να πραγματοποιηθεί ξανά σύνδεση μέσω της εφαρμογής και αυτoμάτως θα ενημερωθεί η αντιστοιχία του Client ID με το νέο Access Token.

Έχοντας ολοκληρώσει τη διαδικασία της σύνδεσης μπορείτε να κατευθυνθείτε στον σύνδεσμο "Instagram Media" με ΜΚ: 140000598000000

Σύνδεσμος: [/pegasus/socialfd_01/recent_media_list00.php?pcode=SCFD_INSTA_LIST]

SEF URL: [/instagram-media]

όπου θα βρείτε τις δημοσιεύσεις που έχουν γίνει στο Instagram από τον συνδεδεμένο λογαριασμό ταξινομημένα από το πιο πρόσφατο.

Στα banners μπορείτε επίσης να βρείτε τη νέα μέθοδο banner "Banner: Instagram Feed" το οποίο εμφανίζει τις τελευταίες δημοσιεύσεις του λογαριασμού και έχει κουμπί "Περισσότερα" το οποίο ανακατευθύνει στον σύνδεσμο που αναφέρθηκε παραπάνω.

Σημείωση: Για τους Sandbox λογαριασμούς υπάρχει όριο από το Instagram το οποίο περιορίζει τον αριθμό δημοσιεύσεων που επιστρέφονται στο site στα 20. Σε περίπτωση που θέλετε να αφαιρεθεί αυτό το όριο θα πρέπει να πραγματοποιήσετε αίτηση για αξιόλογηση της εφαρμογής σας στο Instagram ώστε να περάσει σε live κατάσταση.