DM Instagram

dm-instagram

Connect your Instagram with your WordPress website allowing you to display your recent instagram photos to your wordpress site.

Have some issues and questions? Found a bug? Would like some improvements? Let me know by commenting your issue here or by hitting me a tweet @donMhico.

Fotorama


Installation Instructions:

  1. Upload the plugin to your /wp-content/plugins and extract it. Or you can install the plugin through your Dashboard -> Plugins -> Add New.
  2. Activate the plugin
  3. Go to the plugin’s option page. It’s on Dashboard menu, Settings -> DM Instagram.
  4. Go to instagram developer page.  Log in there.
  5. Click “Manage Clients” on the upper right hand.
  6. Click “Register a New Client” located on the right.
  7. On the “Application Name”, you can use anything you want. As well as for the “Description”.
  8. As for the “Website” field, please be sure to insert your website url (example: http://yourwebsite.com). And for the “Redirect Uri”, please be also sure that you will insert your admin url (example: http://yourwebsite.com/wp-admin).  Click here to see a sample image.
  9. Select “Register”.
  10. Now on your “Manage Clients” page, you’ll be able to see your newly created client and the “keys”. Click here to see a sample image.
  11. Go back to your wordpress dashboard and go to DM Instagram options page. Settings -> DM Instagram. And populate the fields accordingly.
  12. Upon saving the changes, you will notice that a new link appeared above. Click the “Sign In with Instagram”. Click here to see a sample image.
  13. Lastly, you’ll see a page where you can “Authorize” the plugin. Click “Authorize”. Click here to see a sample image.
  14. Done. Enjoy sharing your images.


Usages:

DM Instagram provides a number of customization for both shortcode and widget.  The shortcode available attributes for the moment are the following:

  • display – Number of images to be displayed. Default: 5
  • style – Template to be used to display the images. As of now, only ‘default’ and ‘fotorama’ are available. Default: default
  • (new)prettyphoto – Whether to use prettyPhoto on the images. Only ‘true’ or ‘false’. This only applies if “style” above is set to default. Default: false
  • thumbs – Whether to show thumbnail navigation. Only ‘true’ or ‘false’ is allowed. Default: false
  • fullscreen – Show a full screen icon to display the image in fullscreen. Only ‘true’ or ‘false’ is allowed. Default: false
  • width – The width of the image. The unit is on px and only numbers are allowed (example: 500). Don’t add the ‘px’ suffix. Only exemption is ‘100%’ which makes the display responsive. Default:350
  • autoplay – Make the images rotate automatically with the interval of XXX milliseconds. Setting it to 0 prevent the images to rotate automatically. Default: 0
  • transition – The effect whenever the image changes. As of now, only ‘slide’, ‘crossfade’ and ‘dissolve’ are possible. Default: slide
  • (new)caption – Display the captions. Only ‘true’ or ‘false’. Default: false

Please take note that the attributes, ‘thumbs’, ‘fullscreen’, ‘width’, ‘autoplay’ and ‘transition’ only take effects when the ‘style’ is ‘fotorama’. The ‘default’ style is not being affected by the said attributes.

The attributes above are also the same with the widgets.

Shortcode Examples: (Replace the double quotes (“) with brackets ([])

Default

“dminstagram display=5” or “dminstagram style=default display=10”

Default with prettyPhoto

“dminstagram display=5 prettyphoto=true”

Fotorama

“dminstagram display=3 style=fotorama thumbs=true fullscreen=true width=100% autoplay=5000 transition=dissolve”

Demo:

“dminstagram display=3”

“dminstagram display=4 prettyphoto=true”

“dminstagram display=2 style=fotorama caption=true”

“dminstagram display=3 style=fotorama thumbs=true fullscreen=true width=100% autoplay=5000 transition=dissolve”

Notes:

The keys that i used above is no longer valid. I deleted them immediately so please don’t use them lol.