News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Embed Instagram BBCode

Started by dougiefresh, June 23, 2015, 02:36:27 PM

Previous topic - Next topic

dougiefresh

Link to Mod



EMBED INSTAGRAM BBCODE v2.1
By Dougiefresh -> Link to Mod



Introduction
This modification adds a BBCode to view Instagram videos and pictures.

The BBCode takes these forms:

[instagram]{instagram ID}[/instagram]
[instagram width=x height=y]{instagram ID}[/instagram]

where {instagram ID} is the 21wUvaPwwB part of the https://instagram.com/p/21wUvaPwwB URL, and x and y are parameters supporting both pixel and percentages for width and height (respectively).

Admin Settings
Under Admin => Modification Settings, there are some new options:
o Default width of embedded Instagram video
o Default height of embedded Instagram video
o Include Instagram link beneath?

Compatibility Notes
This mod was tested on SMF 2.0.15, but should work on SMF 2.1 Beta 2, as well as SMF 2.0 and up.  SMF 1.x is not and will not be supported.

This mod should be installed after Tapatalk mod, if you want to use it with Tapatalk.

Changelog
The changelog can be viewed at XPtsp.com.

License
Copyright (c) 2015 - 2018, Douglas Orend
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

villasg

Thanks nice mod work great in my 2.0.10

dougiefresh

#2
Uploaded v1.1 - June 29th, 2015
o Fixed errors when nothing was placed between the tags.
o Modified code so that nothing is output when nothing is placed between the tags.
o Modified code to allow full path to the Instagram post instead of just the post ID.

villasg

Hi need to remove old version to install the new one or not ?
Or only replace the Subs-BBCode-Instagram.php in /Sources with the new one ?

dougiefresh

Quote from: villasg on June 30, 2015, 08:26:43 AM
Hi need to remove old version to install the new one or not ?
Or only replace the Subs-BBCode-Instagram.php in /Sources with the new one ?
All the changes take place in the Subs-BBCode-Instagram.php file, so simply replacing the file should upgrade the mod without having to uninstall and reinstall the mod....  Be mindful of the fact that your database will still report that you're using v1.0 instead of v1.1, though.....

420Connect.co.uk

Hey Dougie,

I was wondering, Can you help tweaking the icon to have the background / mouseover effect to match my other BBC Buttons?
(I tried using a smaller sized icon but it just appears normally..) 

Many thanks!
www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

dougiefresh

Uploaded v1.2 - July 27th, 2015
o Replaced Instagram bbcode button images with better quality ones.




@420connect.info: I replaced the bbcode button images with better quality ones.  I didn't realize that the one for SMF 2.0 was seriously messed up, and for that, I apologize.  This version should fix that.....

420Connect.co.uk

Hmm.. Maybe that was my first problem upon testing this out!

I've just installed the new version but the icon was missing, so I went to check if it had copied to my theme as well as default..

It had but it seems the image you're using is 'empty' /blank or something?

(attached)

???
www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

420Connect.co.uk

further testing:

it's coded for instagram.gif but the image supplied is Instagram.gif (capital at the start)
also, when I tried using an image I found myself, it does the same as before and sort of puts it on top of the background/hover effect

and also, when I use inspect element and change a random existing one's image to the url of the instagram.gif - it too becomes a 'broken' button, without the hover stuff..

:P Super-confused!

www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

dougiefresh

I made a small change to the package-info.xml file to correct the image name that SHOULD be transferred, then reuploaded the v1.2 mod.  Hopefully this does the trick....  ???

420Connect.co.uk

Okay, after having another little play around I've figured out what I wasn't happy about!

Basically.. the existing BBC buttons I have all* have a transparent border around them, with a small-ish icon in the center of it - whereas the instagram one, just filled the entire space with no transparent border!

.. The new one you provided seems to have transparency one side, and the one I had found online had none (hence it looking big and weird)

Anyway! .. I've thrown together a little transparent .gif that blends in with the rest to suit my liking now :)
(attached) ~ Feel free to use it in the package if you like!

Glad thats solved!  :laugh:
www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

420Connect.co.uk

Hey,  just a quick one whilst I notice it..
Is it possible to make the embedded part responsive to screen size?
www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

dougiefresh

Uploaded v1.3 - August 7th, 2015
o Added responsiveness to the Instagram iframe code.
o Replaced Instagram bbcode button images with one supplied by 420Connect.co.uk




@420Connect.co.uk: Thank you for the button image submission.  It's been included in this version!  And yes, the bbcode has been made responsive!

420Connect.co.uk

You're a legend, thanks doug'  ;)
www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

dougiefresh

Uploaded v1.4 - August 8th, 2015
o Added bbcode form where "frameborder" is the only parameter taken.
o Added additional URL validation to make sure bbcode isn't misused.
o Modified parameters so that height parameter is now optional.

dougiefresh

Uploaded v1.5 - August 8th, 2015
o Removed support for SMF 2.1 Beta 1
o Added support for SMF 2.1 Beta 2

dougiefresh

Uploaded v1.6 - August 12th, 2015
o Added settings to allow admin to set default size of the Instagram video.
o Altered code to use new default size settings when width and/or height isn't specified.

420Connect.co.uk

Take a well deserved break Dougie, you're churning out releases faster than we can install them haha!
Thank you so much for your generosity to the community!
www.420Connect.co.uk ~ A Social Network For The #CannabisCommunity ~ Come say "High" ;)

villasg

Have problem to show instagram post .
i try https://instagram.com/p/6XDpmgIjEq/?taken-by=wbangkok
with this
[instagram]https://instagram.com/p/6XDpmgIjEq/?taken-by=wbangkok[/instagram]

receive :


with this
[instagram]6XDpmgIjEq[/instagram]

receive

dougiefresh

Uploaded v1.7 - August 15th, 2015
o Fixed issue where 10 character Instagram post ID wasn't displayed properly.
o Fixed CSS issue where instagram post was partly displayed within the specified area.




@villasg:  Thank you for bringing this to my attention.  I had also forgotten to copy over the fixed CSS file that I fixed before uploading v1.6.....

Advertisement: