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: http://twitter.com/about/resources/buttons

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

screenshot

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: http://developers.facebook.com/docs/reference/plugins/like/

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.

screenshot

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.

screenshot

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.

screenshot

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 )

screenshot

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.

screenshot

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.

screenshot

Step 5

Enter a block title and configure other options before saving.

Step 6

You need to turn off editing to see the changes.

screenshot

Conclusion:

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.

screenshot
  • http://nilvem.com Jose

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

    • http://xiaoyingriley.com/ 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.)

    • http://xiaoyingriley.com/ 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