具有相同网址的多个Like按钮

At the moment I'm creating a responsive web site so that it works on mobile devices as well.

目前我正在创建一个响应式网站，以便它也可以在移动设备上运行。

The design is of such a nature that I hide a vertical menu that also contains a facebook like button when the screen width is less than 480px.

设计具有这样的性质，当屏幕宽度小于480px时，我隐藏了一个垂直菜单，其中还包含一个像facebook一样的按钮。

When the width is less than 480px I then display a horizontal menu (that was hidden) that also includes a Facebook Like button for the same page.

当宽度小于480px时，我会显示一个水平菜单（隐藏），其中还包含同一页面的Facebook Like按钮。

In other words, when screen width is greater than 480px then a vertical menu is displayed and the horizontal menu is hidden. When width is less than 480px the vertical menu is hidden and the horizontal menu is displayed.

换句话说，当屏幕宽度大于480px时，将显示垂直菜单并隐藏水平菜单。当宽度小于480px时，隐藏垂直菜单并显示水平菜单。

The above scenario means that there will be 2 Facebook Like buttons on the same page with the same URL set.

上面的场景意味着在同一页面上将有2个Facebook Like按钮具有相同的URL集。

Will this create problems?

这会产生问题吗？

1 个解决方案

#1

To answer my own question I can confirm that two like buttons on one page works without a problem and votes are properly recorded.

为了回答我自己的问题，我可以确认一页上的两个按钮工作没有问题，并且正确记录了投票。

The code that I'm using for it in an HTML file looks like this:

我在HTML文件中使用的代码如下所示：

The initialization code: (This should only be placed once in the page right after the body tag:)

初始化代码:(这应该只在body标签后的页面中放置一次:)

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The like button: (Place this more than once anywhere in the page)

类似按钮:(在页面中的任何位置放置不止一次）

<div class="fb-like" data-href="https://somewhere.com" 
data-layout="standard" data-action="like" 
data-show-faces="true" data-share="true"></div>

#1