Joomla Tutorial

How to Add and Run JavaScript Snippets on Joomla 3.x

You want to add a Javascript snippet that is contained in the <script></script> tag to the article but you can't. This article will help you figure out the reason for this problem, and I will show you how to fix it.

To go into details, I have an example:

I have a Google Adsense code, and I want to insert it into the article in Joomla 3. The code as follows:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Ad top -->

<ins class="adsbygoogle"

     style="display:inline-block;width:728px;height:90px"

     data-ad-client="ca-pub-xxx"

     data-ad-slot="85600xxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Step 1: To add this code into the content of the article, you need to give this code to the tag <div> </ div>. The new code would look like this:

<div>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Ad top -->

<ins class="adsbygoogle"

     data-ad-client="ca-pub-xxx"

     data-ad-slot="85600xxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

Step 2: When you edit or add new an article, you click on the Tools button in the editor » Select Source Code and paste the Google Adsense code in Step 1 to the Source Code window.

Click the OK button to close the Source Code window.

Step 3: You need to open the code you added in the Source Code window and check the code again 

  • If the source code hasn't been changed, you added and ran the <script> snippet successfully.
  • If the code has been changed (the tags <script></script> has been disappeared) as follows:

<div><!-- Ad top --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxx" data-ad-slot="85600xxxxx"></ins></div>

Reason

You used the Editor-TinyMCE plugin to edit articles. And the plugin has a function which removes all the tags <script> automatically. That's the reason why you can't run the <script> code.

Solve this problem

  • Click on the Extension item> Enter Plugin Manager > Type "editor-tinymce" , then click on the Search button to start searching the Editor-TinyMCE Plugin > Double-click on the Editor-TinyMCE. At the Prohibited Elements item , clear the text "script" > Enter Save.

So, to insert the <script /> snippet to the content of an article, you need:

1. Add the <div /> tag  contains the <script /> tag:

<div>

           <script>

              .........

            </script>

</div>

2. Clear the text "script" in the Prohibited Elements item.

 

Save

PS: Nếu bạn nào muốn thưởng thức các loại hải sản tươi ngon hết ý cùng giá cả phải chăng, được đánh bắt từ vùng biển Cô Tô, Quan Lạn, Vân Đồn - Quảng Ninh, vui lòng liên hệ với mình nhé. Cảm ơn các bạn đã ủng hộ!

 

                                                HẢI SẢN VÂN ĐỒN 399

                             Chuyên bán buôn, bán lẻ hải sản tươi sống, hải sản khô, hải sản 1 nắng

                                   (Ốc móng tay Cô Tô, Sá sùng Quan Lạn, Mực tươi Cô Tô,...)

                         - Cơ sở 1: Số nhà 399, Lý Anh Tông, Thị trấn Cái Rồng, Vân Đồn, Quảng Ninh
                         - Cơ sở 2: Ngõ 184, Hoàng Quốc Việt, Cầu Giấy, Hà Nội
                         - ĐT: 0985.286.522
                         - Website: http://vandon.com.vn/haisan