We offer professional Design/Code Customisation and Website Optimisation Service Request Customisation
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 14.03.18, 12:09
  • Reason: Closed
  • Comment: Glad to help!

Ticket #11674 - Embed Insagram post in Xblog

Hi we want to embad Instagram posts in our blog. For that we need to add this line in the template

<script async defer src="//www.instagram.com/embed.js"></script>

Where do we need to put this line of code?

Thanks

This ticket does not depend on any other tickets.

Marek (marek) 14 Feb 2018, 11:58

do you need to know what file to edit?

Ario (MilaniClothingCompany) 14 Feb 2018, 12:09

Yes

Marek (marek) 14 Feb 2018, 12:17

That is a

/themes/alysum/modules/xipblog/views/templates/front/alysum/single.tpl

or

/themes/alysum/modules/xipblog/views/templates/front/default/single.tpl
Ario (MilaniClothingCompany) 14 Feb 2018, 12:31

Unfortunately did not work, the instagram post is still broken https://milanisapparel.com/module/xipblog/single?id=4&rewrite=new-york-fashion-week-fw18-recap&page_type=post

I added it like this

{literal}<script async defer src="//www.instagram.com/embed.js"></script>{/literal}
Ario (MilaniClothingCompany) 14 Feb 2018, 12:43

Now i look at it. The blog has several other issues.


When we add headers,spaces and other layout options in the back end; it's not displayed correctly on the blog. Spaces, headers and sometimes spaces between de letters are completely messed up.


Iframe dimension somehow don't get saved. When we specify the dimension in the backed, the front-end display the embedded you tube video as a rectangle.


We also noticed that the blog adds very strange inline styles to very simple paragraphs, is this normal?

Marek (marek) 14 Feb 2018, 12:45

1. you have not to use {literal}
2. I see the issue, I have to test it locally to find what's wrong

Ario (MilaniClothingCompany) 14 Feb 2018, 12:52

Thank you for looking into this.

The Instagram embed issue persist.... ( I removed {literal}

Also deleted cache and recompiled files...

Marek (marek) 14 Feb 2018, 18:01

Try now, it should be ok

Ario (MilaniClothingCompany) 14 Feb 2018, 18:30

It's much much better now, thanks allot Marek appreciate it. Can you maybe take a look at the Insagram embed issue if you can?

I added the script line like you said earlier, but unfortenetly the embed does not work, check attached screenshot of what i mean. The embedded post is blank.

De embed code is:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Be0WaBEh7eU/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/Be0WaBEh7eU/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">#Spring18, unveiled: Swipe through for the complete #StuartWeitzman campaign featuring @katemossagency, @gigihadid and @iblamejordan.</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/stuartweitzman/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> STUART WEITZMAN</a> (@stuartweitzman) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-02-05T14:14:22+00:00">Feb 5, 2018 at 6:14am PST</time></p></div></blockquote> 
Selection_241.jpg (54.8 KiB)
Ario (MilaniClothingCompany) 14 Feb 2018, 19:18

I just discovered (which i think) is a bug. We have selected 'How Many Post You Want To Display'at 4 under the tab 'Home style'

But in the fronted it only displays 2 posts instead of the selected 4. Check attached screenshot.

Selection_242.jpg (52.4 KiB)
Selection_244.jpg (162.2 KiB)
Marek (marek) 15 Feb 2018, 13:18

I just make 4 posts. but for now it's not manageable from BO. We will fix the issue in the next update

Ario (MilaniClothingCompany) 15 Feb 2018, 14:07

Ok no problem, can you please put back the 2 posts on homepage. The 4 posts doesn't really look good. Thank you.

Marek (marek) 15 Feb 2018, 15:45

Done

Ario (MilaniClothingCompany) 22 Feb 2018, 12:12

Hi Marek,

Like you mentioned I added the following script:

<script async defer src="//www.instagram.com/embed.js"></script>

at the end of the files

/themes/alysum/modules/xipblog/views/templates/front/alysum/single.tpl

and

/themes/alysum/modules/xipblog/views/templates/front/default/single.tpl

But the JS file is not being loaded into the DOM, the embedded instagram post is still broken, see: https://milanisapparel.com/module/xipblog/single?id=5&rewrite=london-&page_type=post

Can you maybe take a quick look? Thanks

Ario (MilaniClothingCompany) 22 Feb 2018, 13:10

Sorry double post ignore this one

Marek (marek) 22 Feb 2018, 15:40

Give me a link to the first one. Can I close current ticket?

Ario (MilaniClothingCompany) 22 Feb 2018, 16:20

No my previous question has not been resolved yet..

Not sure what you mean with 'Give me a link to the first one', which link are you referring to?

Marek (marek) 22 Feb 2018, 16:23

You wrote: "Sorry double post ignore this one" as I understand you have the another same ticket, or not?

Ario (MilaniClothingCompany) 22 Feb 2018, 17:04

Ah I understand now. No I commented the Instagram embed issue/question twice, so I edited the second post with 'Sorry double post ignore this one'

Still need assistance regarding the embed issue.

Marek (marek) 22 Feb 2018, 17:46

I just add that code to the file and it works

/themes/alysum/modules/xipblog/views/templates/front/alysum/archive.tpl

Loading...