How to set up a social media feed with vue and axios

Question

What I need is a social media stream with posts with the Hashtag mnbasel form Instagram, Facebook and Twitter. I couldn’t find any good tutorial. Hopefully someone can tell me what I miss or lead me to a tutorial.

I signed in to Instagram as a developer and got my Access Token using Client ID and Client Secret.

Then I created a Vue component with this script:

 module.exports = {
  name: 'socialstream',
  data: function () {
    return {
      instagram: []
    }
  },
  mounted () {
    this.getEntries();
  },
  methods: {
    getEntries () {
      axios.get('https://api.instagram.com/v1/tags/search?q=mnbasel&access_token={access-token}')
        .then(response => {
          this.instagram = response.data.data
        })
    }
  }
}

What I get from this is the following error message:

Uncaught (in promise) Error: Request failed with status code 400

And this is the Result I get when I paste the URL in the Browser:

"code": 400,
"error_type": "OAuthPermissionsException",
"error_message": "This request requires scope=public_content, but this access token is not authorized with this scope. The user must re-authorize your application with scope=public_content to be granted this permissions."

I also installed the OAuth Plugin from Dukt and configured Instagram. Not sure if I need that and how to connect this information with the Vue component.

Answer 1

It looks like one of two things:

Its possible that you are not actually injecting your accesstokem with the following string

'https://api.instagram.com/v1/tags/search?q=mnbasel&access_token={access-token}'

I believe it should be :

`https://api.instagram.com/v1/tags/search?q=mnbasel&access_token=${access-token}`

If you still get the oauth error, you may need to ensure that your access token has the correct scope in instagrams dev