How to replace the build-in Instagram widget

[SuperAgora]

Hello everyone,

Does anyone know how to replace the built-in AliDropship Instagram widget from iconosquare.com so I can use the WordPress widget?

Thank you

 

[Direct Webstore]

Go to Appearance / Editor / b-social.php

Then delete this iFrame ...

<iframe src="https://pro.iconosquare.com/widget/gallery?choice=myfeed&amp;username=<?php echo cz('s_in_name_api'); ?>&amp;hashtag=iconosquare&amp;linking=instagram&amp;show_infos=true&amp;width=323&amp;height=304&amp;mode=grid&amp;pace=10&amp;layout_x=3&amp;layout_y=2&amp;padding=10&amp;photo_border=true&amp;background=FFFFFF&amp;text=777777&amp;widget_border=true&amp;radius=5&amp;border-color=DDDDDD" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:323px; height:304px;"></iframe>

... and replace it with the shortcode of your desired widget. (Must be a widget that has shortcodes if using Alidropship themes)

But keep in mind ... this will be over-written with each theme update so keep a copy of the modified file. (Unless you're using a Child Theme)

If the widget spills over and is too wide ... try replacing the iFrame above with this....

<div style='width:318px;overflow:hidden;'>
WIDGET SHORTCODE HERE
</div>

I haven't actually done this ... but it should work. Just make a backup of the file first and try it. Maybe adjust the "width:318px" to a higher or lower number

 

[SuperAgora]

Hi,

Thank you for the detailed information.

I replaced the code

<div class="col-md-60  col-sm-30 b-social__item">
            <?php if(cz('s_in_name_api')):?>
                <div class="widget iconosquare-widget">[instagram-feed]</div>
            <?php endif; ?>
        </div>

Unfortunately the shortcode does not render if placed in the b-social.php file.



If I insert the shortcode in a product page, then it renders properly.

I'll continue to struggle

 

[Direct Webstore]

Oops! I forgot we're inserting this into a PHP file! Put the shortcode in this bit of code...

<?php echo do_shortcode('[instagram-feed]');?> ... Replace the iFrame code with that.

or this if it spills over.

<div style='width:318px;overflow:hidden;'>
<?php echo do_shortcode('[instagram-feed]');?>
</div>

 

[Direct Webstore]

Digital farmer, cultivating pixels.

I just noticed you're a "Digital Farmer" and I'm a "Digital Hunter Gatherer" ... you must be more civilised than me ... LOL

 

[Direct Webstore]

So ... did that work?

 

[SuperAgora]

I just noticed you're a "Digital Farmer" and I'm a "Digital Hunter Gatherer" ... you must be more civilised than me ... LOL

So ... did that work?

Hi,
You know I try to be punctual so I guess you figured "what the heck happened to him, how come he's not replying?"

Well there are some good reasons I suppose.

You're a Hunter, Gatherer and so I must take my hat off because you work much harder than me.

Anyway, the reason why I had not replied was because I wanted to surprise you.

Are you interested in finding out how to do this mod, without having to worry about future updates and without creating a child template?

 

[SuperAgora]

You need to download, install and activate the following 3 plugins.

1) https://wordpress.org/plugins/real-time-find-and-replace/
2) https://smashballoon.com/instagram-feed/free/
3) https://wordpress.org/plugins/simple-custom-css/

Step #1 Create this code in simple custom CSS and publish it.

.widget.iconosquare-widget {
    display: none;
    overflow: hidden;
}

Step #2 After installing the Instagram plugin, go to the Configuration tab and find your User ID and your Access Token.
You will need to be logged in to the instagram account you want to use (on another tab of your web browser).
Click on the large blue button and your codes will auto-populate the two fields (if not just copy and paste them BOTH).




Step # 3

The next step is to copy paste the shortcode into the b-social.php page TEMPORARILY so we can convert the shortcode which needs to run on the server. Because the replace plugin works after all other PHP has finished running and the resulting HTML is generated which is the actual widget code.

Once we have completed the conversion we will end up with something like this:

Original Code:

<?php echo do_shortcode ( '[instagram-feed]' ); ?>

HTML Generated Code:

<div id="sb_instagram" class="sbi sbi_fixed_height  sbi_col_3 sbi_width_resp" style="width:100%; height:230px; padding-bottom: 4px; " data-id="010101010101" data-num="3" data-res="auto" data-cols="3" data-options='{&quot;sortby&quot;: &quot;none&quot;, &quot;headercolor&quot;: &quot;ea35bd&quot;, &quot;imagepadding&quot;: &quot;2&quot;}'><div class="sb_instagram_header" style="padding: 4px; padding-bottom: 0;"></div><div id="sbi_images" style="padding: 2px;"><div class="sbi_loader fa-spin"></div></div><div id="sbi_load"><div class="sbi_follow_btn"><a href="http://instagram.com/" style="" target="_blank"><i class="fa fa-instagram"></i>Follow on Instagram</a></div></div></div>

We can now replace the original b-social.php page back.

The hardest part so far is trying to regex match the following line:

</div>
        <div class="col-md-60  col-sm-30 b-social__item">

Exactly as you see it above with the spaces.
I haven't been able to do this step yet, so instead I messed with the spaces on the page until I figure it out, this way the search replace will work dynamically even after an update.

So I had to remove the spaces by hand like so....

</div><div class="col-md-60  col-sm-30 b-social__item">

This top block of code will be the actual search part and the replacement will be this:

</div><div class="col-md-60  col-sm-30 b-social__item"><div id="sb_instagram" class="sbi sbi_fixed_height  sbi_col_3 sbi_width_resp" style="width:100%; height:230px; padding-bottom: 4px; " data-id="010101010101" data-num="3" data-res="auto" data-cols="3" data-options='{&quot;sortby&quot;: &quot;none&quot;, &quot;headercolor&quot;: &quot;ea35bd&quot;, &quot;imagepadding&quot;: &quot;2&quot;}'><div class="sb_instagram_header" style="padding: 4px; padding-bottom: 0;"></div><div id="sbi_images" style="padding: 2px;"><div class="sbi_loader fa-spin"></div></div><div id="sbi_load"><div class="sbi_follow_btn"><a href="http://instagram.com/" style="" target="_blank"><i class="fa fa-instagram"></i>Follow on Instagram</a></div></div></div>

And you should be set to go.



I guess it's a bit easier than finding a solution to The Great Barrier Reef, off the coast of Queensland.

 

[Direct Webstore]

Now I know how the guy with the sweetnotebooks.com site did it ... and why he didn't tell me how when I asked him ... lol

The CSS is strange though ... the "display: none;" bit shouldn't be there. It makes the Widget not display. And for me ... the overflow part isn't necessary. So I'm not including that extra CSS. The other code examples don't really make sense to me either ... but I just "viewed page source" to get my own. I think anyone else trying to do it may have trouble.

But just this alone ...
https://wordpress.org/plugins/real-time-find-and-replace/

... has made my day, as it will take care of other modifications I've made to theme files.

Thanks ..