Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Add page plugin for Facebook

Avatar

Level 4

I'm using AEM as a Cloud Service. I am creating a component which will be used to show the facebook feed of a page. The problem is that I have to add this piece of code: 

<script async defer crossorigin="anonymous"
 src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v14.0"></script>

I can simply add this in the component's html but it is not a standard method to use script tag inside html. For script we can write code in the ui.frontend module. So, let me know how can I add this using a standard method.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You are adding the external javascript reference which can be directly added in the component html

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v14.0">

If you have to write your own javascript and CSS then use ui.frontend module. 

View solution in original post

8 Replies

Avatar

Community Advisor

Hi,

There is no problem with writing javascript inside body 

You can do it as component.

Avatar

Level 4

I wanted to know according to the standards of AEM. Like if the script is required to be added in ui.frontend or directly in the component's html file.

Avatar

Correct answer by
Community Advisor

You are adding the external javascript reference which can be directly added in the component html

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v14.0">

If you have to write your own javascript and CSS then use ui.frontend module. 

Avatar

Employee

@nikita24tailor You can add custom Html/scripts in your components. Though it's advised to include such scripts in the head/footer section (based on the recommendation by the script provided), so you should consider overlaying the page component's customheaderlibs.html/customfooterlibs.html file to include this script.

Avatar

Community Advisor

I would not recommend to add script in head section until it is really necessary. 

 

Adding javascript in head section can block page rendering. That is why javascript are mostly added to footer/last section of the page body.

Avatar

Employee

@arunpatidar Thanks for pointing, I mean the same, though some scripts need to be explicitly added in the head based on recommendation (eg. jquery, launch)