Difference between revisions of "How to add social media buttons"
(→How to add a Google Plus button) |
|||
| (8 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
==How to add a facebook Like button.== | ==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 need to customize | + | * '''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. | + | * '''Step 2''' |
| + | Select Modules and Drag the Text & Images module onto the desired page, as seen below. | ||
[[File:Socialmedia_img1.PNG |thumb|600px|center]] | [[File:Socialmedia_img1.PNG |thumb|600px|center]] | ||
| Line 16: | Line 18: | ||
* '''Step 4''' | * '''Step 4''' | ||
Paste the code that you generated in the first step and click update. | Paste the code that you generated in the first step and click update. | ||
| + | |||
[[File:Socialmedia_img4.PNG |thumb|600px|center]] | [[File:Socialmedia_img4.PNG |thumb|600px|center]] | ||
| Line 21: | Line 24: | ||
* '''Step 5''' | * '''Step 5''' | ||
You should now see the facebook button appear as seen below. | You should now see the facebook button appear as seen below. | ||
| − | [[File:Socialmedia_img5.PNG]] | + | |
| + | [[File:Socialmedia_img5.PNG |thumb|600px|center]] | ||
==How to add a Google Plus button== | ==How to add a Google Plus button== | ||
* '''Step 1''' | * '''Step 1''' | ||
| − | Generate the code using the following link https://developers.google.com/+/plugins/+1button/ and remember to customize | + | 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''' | * '''Step 2''' | ||
| − | Drag the Advertisement module | + | Drag the Advertisement module onto the desired page and paste the code into the text box as seen below. |
[[File:Googleplus img12.PNG |thumb|600px|center]] | [[File:Googleplus img12.PNG |thumb|600px|center]] | ||
* '''Step 3''' | * '''Step 3''' | ||
| − | You | + | You should then see the Google plus button as seen below. |
| − | [[File:Googleplus img3.PNG |thumb|600px|center]] | + | [[File:Googleplus img3.PNG |thumb|600px|center]] |
| − | |||
| − | + | ==How to add a Twitter button== | |
| − | |||
| − | |||
| − | ==How to add a Twitter button | ||
* '''Step 1''' | * '''Step 1''' | ||
| Line 50: | Line 50: | ||
[[File:Twitter_img2.PNG |thumb|600px|center]] | [[File:Twitter_img2.PNG |thumb|600px|center]] | ||
| − | + | After the site has been published, you should then see the buttons on the page, as seen in the example below. | |
| − | + | [[File:Socialmedia_complete.PNG |thumb|600px|center]] | |
| − | |||
Latest revision as of 12:50, 12 December 2012
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.
- Step 3
Click on HTML as seen below.
- Step 4
Paste the code that you generated in the first step and click update.
- Step 5
You should now see the facebook button appear as seen below.
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.
- Step 3
You should then see the Google plus button as seen below.
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.
After the site has been published, you should then see the buttons on the page, as seen in the example below.
