How to add Twitter and Facebook buttons to your Moodle site

Adding Twitter and Facebook like buttons to a website is always a good idea if you’d like to spread the word about your site through social networking. In this tutorial I will walk you through how to add the commonly seen buttons to your Moodle site.

First things first. Before we do anything in Moodle, Let’s get the buttons from Twitter and Facebook’s official websites.

Get Twitter “Share a link” button

1) Go to Twitter’s official buttons page:

2) Select “Share a link” and enter the desired options as shown in the figure below.


3) Once you are happy about the button’s preview, you can keep the page open for later use.

Get Facebook “like” button

1) Go to the Facebook developers plugin page:

2) Configure the like button as shown in the figure below. For the like button to work in Moodle you can only use the IFRAME version rather than the HTML5/XFBML version.


3) Once you are happy with the button’s preview, you can click the “Get Code” button. In the popup window you need to choose the IFRAME option as shown in the figure below. Keep the page open for later use.


Ok, now the buttons are ready for use we can dive into Moodle to add the buttons.

Step 1

In a new window, Log into Moodle as an administrator. Select the “HTML” option from the “Add a block” drop-down menu.


Step 2

Now you should see that a new HTML block has been added. Click the configuration icon, which is the second icon, as shown in the figure below. (Your Moodle site’s configuration icon will look different )


Step 3

On the “Configuring a (new HTML block) block” page, turn on the HTML Source Editor for the “Content” text field by clicking the HTML icon in the editor menu as shown below.


Step 4

Copy and paste the relevant buttons’ code from the previous Twitter and Facebook pages into the HTML Source Editor and click the “Update” button.


Step 5

Enter a block title and configure other options before saving.

Step 6

You need to turn off editing to see the changes.



Using a Moodle HTML block to add Twitter and Facebook buttons is only one way of doing it. If your Moodle theme offers you extra block/widget areas to enter HTML code you can take advantage of those as well.

For example, in our premium Moodle Theme “Ace”, you can go to the theme settings page and add the Twitter and Facebook buttons to the page’s header as shown below.


Want to master Moodle?

Moodle 3.0 Masterclass: Your Complete Guide to Moodle 3.0

This online course on Moodle 3.0 will teach you how to create WORLD CLASS online courses. Leverage Moodle 3 like a BOSS!

600+ students enrolled

Want to set up Moodle?

Learn to Host Moodle with Linux

Become a Moodle Administrator a much needed skill . More than 70 million users across 230 countries are using Moodle.

1000+ students enrolled
  • Jose

    An excellent post… I already added the buttons following your instructions. Thanks!

    • Xiaoying

      Thank you. I am very glad you find it useful! :)

  • Treiger

    how do you get the block (html) to open up in a new window. (i.e. gotomeeting gadget etc.)

    • Xiaoying

      Sorry, don’t quite understand what you mean here… can you explain more clearly? I think you might be talking about plugins, which is not what I was detailing in the post.

  • Lilian

    Thank you! You have saved me a lot of time.

  • Janice

    Hi, I was able to capture the codes and pasted the iframe cods to HTML block of moodle. However when i tried clicking the button LIKE the word error (red color behind the text itself) appeared. What seems to be the problem? Thanks.

  • Janice

    It has this detailed Error Message:

    Message Failed: This message contains content that has been blocked by our security systems.

  • mustapha mugisa

    How do you place the block in the right position in gourment theme. Please help

  • Aloneboy

    Using the most successful look for phrases in the headline and whole muscle building is every bit as essential as the content of your content. Wedding Cakes London

  • danielgrant

    And even a great deal a whole lot worse than in which, if the way with words-at each is deficient you may want execute a greater work efficient people that you are an idiot when compared with a professional within your discipline. he has a good point

  • Kamran

    By hiring SEO Professional Indian you will able to recognize your focus on viewers which is very much essential for execution of proper company planning of a company. click to investigate

  • Kamran

    It encompasses many technologies and Web methods including shared multi media, social networking, online collaboration and adding the human factor back to the Web. anonymous

  • jeet

    I have lengthy suggested that if we at least realized the facts and the transaction of the un-named first 21 grabs, we would be much better able to actually comprehend catch-22. marketing