Adding Social Plugins
Social media sites provide a variety of plugins that you can use to add their official icons and badges to your store. All you have to do is find the code you want to use, copy it to a static block, and place the block in your store. To make sure that all your social media badges are available from every page of your store, group them in a single block and place the block in either the header or footer of your store.
Social Media Badges in Header
Step 1: Find the Code You Want to Use
Most social media sites offer a selection of icons, badges, and buttons in different styles and sizes. The first step is to find the find the one that you want to add to your store.
Some plugins have two different sets of code. One that is placed either just before, or after the HTML body tag. The second set of code is placed whereever you want the badge to appear. To learn more, see: Adding Third-Party Scripts.
- Follow the instructions on the site to copy the code, and paste it into a text editor.
- If the plugin includes a section of code that is to be placed either before or after the HTML body tag, do the following:
- On the Admin menu, select System > Configuration. In the Configuration panel on the left, under General, select Design.
- Do one of the following:
- If the code goes before the opening <body> tag, click to expand the HTML Head section.
- If the code goes before the closing <body> tag, click to expand the Footer section.
- Paste the code into the Miscellaneous Scripts box.
- When complete, click the Save Config button.
Step 2: Create a Block for the Badges
- On the Admin menu, select CMS > Static Blocks. Then, in the upper-right corner, click the Add New Block button.
- Complete the following required fields:
- Block Title
- Store View
- Click the Show / Hide Editor button to work with the HTML code. Then in the Content section, paste the code that you copied from the social media site.
- When complete, click the Save Block button.
Step 3: Use the Frontend App Tool to Place the Block
Use the Frontend App tool to place the block that you created at a specific location in
your store. You can experiment with different block references to find the location that works best.
Step 4: Adjust the Positioning with CSS
For more precise positioning, you can make adjustments to the CSS style sheet used by your theme. To learn more, see: Using the CSS Editor.
Still have questions? Submit them below and they'll be answered by our expert support team.
Like what you read? Drop us a note with your feedback below.