How to Add Multiple Facebook Share Buttons on Your Website
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.example.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.
This is how you can easily add more than one Facebook share buttons on your website. If you found this post to be helpful, and if you think your friends might need to know how to create multiple share buttons for their website, please share this post.
More Facebook Tips
Custom Styling Facebook Like Button: Is It Possible? 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 Permanently Disable Facebook Search History How to Delete Facebook Search History How to Search People on Facebook by City Can I See Who Viewed My Profile on Facebook? Facebook Search for People Without Logging In Is it Possible to View Private Facebook Profiles?Facebook Tips