We use cookies. More

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.

Advertisement

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.

How to Add Multiple Facebook Share Buttons on Your Website - 1

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.

How to Add Multiple Facebook Share Buttons on Your Website - 2

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.

Also See: Is It Possible to Custom Style Facebook Like Button?

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in