Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

updated readme

  • Loading branch information...
Tabea David
Tabea David committed Oct 1, 2015
1 parent cee2a59 commit a4a25178ac54848a5291d98076d8475b4767ff8f
@@ -66,24 +66,24 @@ class InstagramFeed extends WireData implements Module, ConfigurableModule {
*/
public static function getModuleConfigInputfields(array $data) {
$data = array_merge(self::$defaults, $data);

$fields = new InputfieldWrapper();
$modules = wire('modules');

$help = wire('modules')->get('InputfieldMarkup');
$link = wire('modules')->get(self::MODULE)->getCode();
$help = $modules->get('InputfieldMarkup');
$link = $modules->get(self::MODULE)->getCode();
$helpContent = <<<EOD
<h2>Instructions:</h2>
<ol>
<li>Register a new instagram Client: <a href="https://instagram.com/developer/clients/manage/">at instagram</a>. <strong>It's really important to add the current url as redirect url. (For example "http://page.dev/processwire/module/edit?name=InstagramFeed/")</strong></li>
<li>Complete the form below except the access token input field (this value will be generated) and click submit.</li>
<li>Complete the form below, leaving the access input token field empty. This value will be generated. Click submit.</li>
<li>Click the following link to generate code and access token: $link</li>
</ol>
<p><a target="_blank" href="https://github.com/justonestep/processwire-instagramfeed">Read more</a></p>
EOD;
$help->value = $helpContent;
$fields->append($help);

$field = wire('modules')->get('InputfieldText');
$field = $modules->get('InputfieldText');
$field->label = __('Client ID');
$field->description = __('Instagram');
$field->attr('name', 'clientId');
@@ -93,7 +93,7 @@ EOD;
$field->required = 1;
$fields->append($field);

$field = wire('modules')->get('InputfieldText');
$field = $modules->get('InputfieldText');
$field->label = __('Client Secret');
$field->description = __('Instagram');
$field->attr('name', 'clientSecret');
@@ -103,16 +103,16 @@ EOD;
$field->required = 1;
$fields->append($field);

$field = wire('modules')->get('InputfieldText');
$field = $modules->get('InputfieldText');
$field->label = __('Access Token');
$field->description = __('Will be generated by clicking the link above (have a look at instructions number three).');
$field->description = __('Will be generated by clicking the link above.');
$field->attr('name', 'accessToken');
$field->attr('size', 60);
$field->attr('value', $data['accessToken']);
$field->columnWidth = 100;
$fields->append($field);

$field = wire('modules')->get('InputfieldText');
$field = $modules->get('InputfieldText');
$field->label = __('Username');
$field->description = __('Instagram username to display content from (default: self).');
$field->attr('name', 'username');
@@ -121,7 +121,7 @@ EOD;
$field->columnWidth = 50;
$fields->append($field);

$field = wire('modules')->get('InputfieldText');
$field = $modules->get('InputfieldText');
$field->label = __('Image Count');
$field->description = __('Count of media to return.');
$field->attr('name', 'imageCount');
@@ -134,20 +134,15 @@ EOD;
}

/**
* Initialize the module
* Initialize a new web contact form
*
* Implementation of the Module interface
* Get the most recent media published by a user
*
* ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called
* when ProcessWire's API is ready. As a result, this is a good place to attach hooks.
*
* @see http://processwire.com/apigen/class-Module.html
*
* @param Template $template Template object holding the form's fields.
* To get the most recent media published by the owner of the access token,
* you can use self instead of the username.
*
* @param string $username
* @return array
*/
public function init($username = null) {
public function getRecentMedia($username = '') {
if (!empty($username)) $this->username = $username;

$connection = new WireHttp;
@@ -163,11 +158,20 @@ EOD;

if (!empty($data) && $data['meta']['code'] === 200) {
$data = $data['data'];
} else {
$this->log->save('errors', "[InstagramFeed]: No data was received for user '$username'.");
}

return $data;
}

/*
* Search for a user by name
* return user id
*
* @param string $username
* @return int
*/
public function getUserIdByUsername($username = null) {
$connection = new WireHttp;

@@ -181,12 +185,22 @@ EOD;
$userId = null;
if (!empty($data) && $data['meta']['code'] === 200) {
$userId = $data['data'][0]['id'];
} else {
$this->log->save('errors', "[InstagramFeed]: No user '$username' was found.");
}

return $userId;

}

/*
* Request the access_token
*
* Now you need to exchange the code for an access token.
* You simply have to POST this code,
* along with some app identification parameters.
*
* @param string $redirect
*/
public function getAccessToken($redirect) {
$connection = new WireHttp;

@@ -207,11 +221,23 @@ EOD;
$data = $this->modules->getModuleConfigData(self::MODULE);
$data['accessToken'] = $result['access_token'];
wire('modules')->saveModuleConfigData(self::MODULE, $data);
} else {
$this->log->save('errors', "[InstagramFeed]: No access token could be received.");
}
}

}

/**
* Request the code
*
* Server-side flow (recommended):
* Redirect the user to a URI of your choice.
* Take the provided code parameter
* and exchange it for an access_token
* by POSTing the code to our access_token url.
*
* @return string
*/
public function getCode() {
$http = $this->config->https ? 'https://' : 'http://';
$redirect = $http . $this->config->httpHost . $this->page->url;
@@ -221,7 +247,7 @@ EOD;
$redirect .= 'edit?name=' . self::MODULE;

if ($this->input->get->code) {
$accessToken = $this->getAccessToken($redirect);
$this->getAccessToken($redirect);
$this->session->redirect($redirect);
}
}
@@ -2,20 +2,21 @@

Represents the instagram feed of any user.

* [oauth authentication](http://codular.com/oauth-authentication-with-instagram)
* [Authentication](https://instagram.com/developer/authentication/)
* [Endpoints](https://instagram.com/developer/endpoints/users/)

## Instructions

### Register you app on Instagram
### Register your app on Instagram

First you have to register your application on Instagram.

Enter a name, description and (really important) the correct redirect url. You can add more than one. If you want to generate the code and access token to authenticate against instagram from the ProcessWire module setting page, you have to add a url similar as: ``http://page.dev/processwire/module/edit?name=InstagramFeed/``. Just install the module and copy the url inside the address bar.

![Register your app on Instagram](https://github.com/justonestep/processwire-instagramfeed/blob/master/screens/instagram-register.png)

When you've done you'll receive a Client ID and a Client Secret.

![Receive Client ID and Secret](https://github.com/justonestep/processwire-instagramfeed/blob/master/screens/instagram-show.png)

### Install module

Next you have to install the module and enter at least Client ID and Client Secret in module settings.
@@ -27,14 +28,19 @@ Click submit.
There are a few steps involved in the authentication process:

* You get directed to the Instagram website to allow access to your application
* You get given a code back from Instagram
* You get a code back from Instagram
* This code is used to send a request to Instagram to get an access_token

If you entered the correct redirect url (instagram) and saved Client ID as well as Client Secret (ProcessWire module settings), you only have to click the link **get Access Token** in module settings as described in **Instructions 3.**
If you entered the correct redirect url (instagram) and saved Client ID as well as Client Secret (ProcessWire module settings), you only have to click the link **get Access Token** in module settings.

If everything went well you'll see an access token in module settings.

The access token does not specify an expiration time. Either the user revokes access, or Instagram expires the token after some period of time.
Just click the link again to create a new access token.

If everything went well you'll see an access token saved in module settings. Anytime you want create a new access token, just click the link again.
![Generate Access Token](https://github.com/justonestep/processwire-instagramfeed/blob/master/screens/module-generate.png)

### more settings..
### More settings..

You can specify some more settings:

@@ -45,19 +51,62 @@ You can specify some more settings:

For example:

**PHP**

```php
<?php $feed = $modules->get('InstagramFeed')->getRecentMedia(); ?>
<div class="instagram>
<?php foreach ($feed as $image): ?>
<a href="<?=$image['link']; ?>" class="instagram-item">
<picture>
<source media="(min-width: 55rem)" srcset="<?=$image['images']['standard_resolution']['url']; ?>">
<source media="(min-width: 45rem)" srcset="<?=$image['images']['low_resolution']['url']; ?>">
<source srcset="<?=$image['images']['thumbnail']['url']; ?>">
<img src="<?=$image['images']['thumbnail']['url']; ?>" alt="">
</picture>
</a>
<?php endforeach; ?>
</div>
```

**Twig**

```html
{% set feed = modules.get('InstagramFeed').init() %}

{% for image in feed %}
<a href="{{image.link}}">
<picture>
<source media="(min-width: 45rem)" srcset="{{image.images.low_resolution.url}}">
<source srcset="{{image.images.thumbnail.url}}">
<img src="{{image.images.thumbnail.url}}" alt="">
</picture>
</a>
{% endfor %}
{% set feed = modules.get('InstagramFeed').getRecentMedia() %}

<div class="instagram>
{% for image in feed %}
<a href="{{image.link}}">
<picture>
<source media="(min-width: 55rem)" srcset="{{image.images.standard_resolution.url}}">
<source media="(min-width: 45rem)" srcset="{{image.images.low_resolution.url}}">
<source srcset="{{image.images.thumbnail.url}}">
<img src="{{image.images.thumbnail.url}}" alt="">
</picture>
</a>
{% endfor %}
</div>
```
You can output any value explained [here](https://instagram.com/developer/endpoints/users/#get_users_media_recentI.
![Example](https://github.com/justonestep/processwire-instagramfeed/blob/master/screens/feed.png)
You can output any value explained [here](https://instagram.com/developer/endpoints/users/#get_users_media_recent).
If you want to output another feed, you can pass a username:
* ``$modules->get('InstagramFeed')->getRecentMedia('username');``
Priority:
1. argument passed by
2. username entered in module settings
3. default 'self', to get the most recent media published by the owner of the access token
**Links:**
* [oauth authentication](http://codular.com/oauth-authentication-with-instagram)
* [Authentication](https://instagram.com/developer/authentication/)
* [Endpoints](https://instagram.com/developer/endpoints/users/)
BIN +127 KB screens/feed.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit a4a2517

Please sign in to comment.
You can’t perform that action at this time.