How to add social media buttons

From Imaginet FAQ
Revision as of 12:50, 12 December 2012 by Dane (talk | contribs) (How to add a Google Plus button)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

This tutorial will explain how to add the following buttons twitter, facebook, and google plus.

How to add a facebook Like button.

  • Step 1

Generate the code for the facebook like button using the following link - https://developers.facebook.com/docs/reference/plugins/like-box/. You will then need to customize the facebook button to meet your requirements. Once complete click on the Get Code button and select IFRAME. You will then need to copy the code generated in the text box and use it in the next step.

  • Step 2

Select Modules and Drag the Text & Images module onto the desired page, as seen below.

Socialmedia img1.PNG


  • Step 3

Click on HTML as seen below.

Socialmedia img3.PNG


  • Step 4

Paste the code that you generated in the first step and click update.

Socialmedia img4.PNG


  • Step 5

You should now see the facebook button appear as seen below.

Socialmedia img5.PNG

How to add a Google Plus button

  • Step 1

Generate the code using the following link https://developers.google.com/+/plugins/+1button/ and remember to customize your Google plus URL which can be found under that advance section.

  • Step 2

Drag the Advertisement module onto the desired page and paste the code into the text box as seen below.

Googleplus img12.PNG


  • Step 3

You should then see the Google plus button as seen below.

Googleplus img3.PNG

How to add a Twitter button

  • Step 1

Navigate to the following link http://twitter.com/about/resources/buttons#tweet and select the type of button you want. You will then need to fill in all the nessasary details and the code will be generated automatically. You then need to copy the code for the next step.

  • Step 2

Drag the Advertisement module on the desired page and paste the code in the box as seen below.

Twitter img2.PNG

After the site has been published, you should then see the buttons on the page, as seen in the example below.

Socialmedia complete.PNG