This is a short manual of how to change layout of the Social Network Buttons developed by MagePlace. They can be purchased as separate Magento extension or as a all-in-one Magento Social Network Integration Bundle.

Inserting a Button with the Help of Widget

To insert the needed button with the help of widget, do the following:

1. Go to System -> Configuration and choose the extension you set up. In “Content Options” area of extension settings set option “Display Widget Buttons” to "YES":

   

2. Go to Content Edit Page and select the place you want to insert the new button into. Once you have done it, click Insert Widget button on the WYSIWYG Redactor tab:

   

3. The dialogue box will appear. To specify the Widget Type, click the down arrow to open Widget Type drop down menu:

   

4. Once you have specified the Widget Type, the Widget Option field will appear in the dialogue box. To indicate the option, fill in Fronted Template section:

   

Note: In the Fronted Template field you can specify your own template. Magento will use it to show the button. By default the extension template will be used.

Inserting a Button with the Help of Custom Code

Facebook Connect

Before inserting the button into any site template place you need to enable Custom Button Display. To do so go to System -> Configuration and choose the extension you set up. In “Content Options” area of extension settings set option “Display Custom Buttons” to "YES"

To insert the button into any site template place, use the following code pattern:

To set an example, let us insert the Connect button on the logon page near Create an Account button:

To do this, follow the steps given below:

1. Open to edit Magento template file responsible for the logon page part reflection. To get the Magento 1.4.2 template file, go to Magento directory app/design/frontend/base/default/template/customer/form/; %template file% login.phtml. Once you have opened file template to edit, find the following line:
2. Insert the button code directly before the line mentioned above, therefore the code will look like:

   You can insert the button into the needed page in a different way. To do that, you should insert the code into template layout, the XML files that are located at app/design/frontend/base/default/layout (for Magento 1.4.2). Then do the following:

   1. Open facebookconnect.xml button layout file;
   2. Into the <default> tag area, insert the code given below:
3. Once you have done it, Facebook connect button will be reflected in the footer site area. Same way you can insert custom code and change button placement for other buttons developed by MagePlace. Let us consider the examples given below.

Facebook “Like” button

To insert Facebook Like button, check the needed place and insert the code given below:

To use the second means of button inserting, select file facebookilike.xml

Facebook “Share” button

To insert Facebook Share button, check the needed place and insert the code given below:

To use the second means of button inserting, select file facebookshare.xml

Facebook Comments

To insert Facebook Comments, check the needed place and insert the code given below:

To use the second means of button inserting, select file facebookcomments.xml

Twitter Connect

To insert Twitter Connect, check the needed place and insert the code given below:

To use the second means of button inserting, select file twitterconnect.xml

Twitter “Tweet” Button

To insert Twitter Tweet Button, check the needed place and insert the code given below:

To use the second means of button inserting, select file twittertweet.xml

Twitter “Follow” Button

To insert Twitter Follow Button, check the needed place and insert the code given below:

To use the second means of button inserting, select file twitterfollow.xml

Google Connect

To insert Google Connect, check the needed place and insert the code given below:

To use the second means of button inserting, select file googleconnect.xml

Google “+1” Button

To insert Google “+1” Button, check the needed place and insert the code given below:

To use the second means of button inserting, select file googleplusone.xml

Should you have no professional Magneto developer at hand, submit a request and our experienced Magento development team will handle your project.