Add page plugin for Facebook

[nikita24tailor]

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.

[arunpatidar]

Hi,

There is no problem with writing javascript inside body 

You can do it as component.

[nikita24tailor]

Can we add script tag in component's html?

[arunpatidar]

Yes, you can do that

https://www.w3schools.com/js/js_whereto.asp 

[nikita24tailor]

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.

[arunpatidar · Accepted solution]

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. 

[Mohit_KBansal]

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

[arunpatidar]

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.

[Mohit_KBansal]

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