How to Add Multiple Facebook Share Buttons on Your Website
In this tutorial, I will demonstrate how to add more than one Facebook share button on your website, either to place them at different spots or to allow the sharing of different pages.
I explained how you can easily add a Facebook Like button or a Facebook Share button on your website in other tutorials, but what if you needed to have multiple social buttons on your web pages?
For example, you may need to place multiple share buttons on different spots of your website such as the header, sidebar, footer or content. In another example, you may need to put one Share button to each post that is featured on your home page. In such cases, knowing to use the right code for the share buttons will help you avoid any issues that may result in the buttons not to work properly.
If you check this page, you can see two Facebook share buttons; one at the top just below the post title and one at the end of the post. You can also see sharing buttons for other social networks. The reason I placed two copies of the buttons at different locations is to make sharing easier for my readers. Some readers may find it easier to share using the buttons at the top, whereas some other readers may find it easier to share using the buttons at the bottom which they will see once they are done reading the post.
Now, let's see how we can place multiple share buttons for Facebook on a website.
Add Multiple Facebook Share Buttons for the Same Page
If you want to place multiple share buttons on different locations of your web page to give multiple sharing options to your users, you can put more than one copy of the same share button code on the page. Like the two buttons you see on this page, these share buttons will both be sharing the same page they are placed on.
STEP 1: Go to the Facebook Share Button Configurator.
STEP 2: Enter your page URL to the URL to share field. If your page is dynamically generated, i.e. your website is using a CMS such as ">WordPress, leave that field empty.
STEP 3: Select the button layout that you prefer from the Layout option. A real-time preview of the share button will be displayed.
STEP 4: Click Get Code button to grab the code that is prepared for you.
STEP 5: Insert the first piece of code (1) after the opening <body> tag of your page. Insert the second piece of code (2) to wherever you want the share button to be displayed. For creating multiple share buttons, insert this same code to multiple locations on your page.
<div class="fb-share-button" data-href="http://www.tutsandtips.com/" data-layout="button_count"></div>
As mentioned earlier, insert your own URL or simply leave the URL field (data-href) empty if your pages are generated dynamically.
You now have multiple share buttons on your web page that when a visitor clicks them and confirms sharing, they will all share the same page they are placed on.
Add Multiple Facebook Share Buttons for Different Pages
You can have multiple share buttons on one page that are linked to different pages. As an example, you can have two share buttons on your post page, one for the sharing of the post itself and the other for the sharing of the homepage of your website.
STEP 1: Follow STEP 1 - 3 above for each page URL, which are your post page and your homepage.
STEP 2: Insert the first piece of code to your page for only once.
STEP 3: Insert the second piece of code for each URL to their desired positions on your page. For example, you may put the homepage share button to the header or footer, and put the post share button to the sidebar or below the post title.
Your Facebook share buttons are now ready to be used on your website.
More Facebook Tips
How to Search People by Email on Facebook How to Create a Facebook Share Button with No Script How to Create Friends Lists by City in Facebook How to Search People on Facebook by City Facebook Search for People Without Logging In How to Search People by State on Facebook How to Add a Facebook Share Button to Your Website How to Add a Facebook Like Button to Your Website How to Add Multiple Facebook Like Buttons on Your Website How to Find Facebook Friends in a City
Facebook Tips