Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Add page plugin for Facebook

Avatar

Level 5

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. 



Arun Patidar

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.



Arun Patidar

Avatar

Level 5

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. 



Arun Patidar

Avatar

Employee Advisor

@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.



Arun Patidar

Avatar

Employee Advisor

@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)