Question

我正在创建一个分为几个部分的页面，所有部分都有特殊的ID。我想在每个部分添加社交媒体共享按钮当我点击分享按钮时，它只分享第一部分。

我的页面采用以下格式：

<section id="page-one" class="intro">Content</section>
<section id="page-two" class="intro">Content1</section>
<section id="page-three" class="intro">Content2</section>

和分享按钮是：

<ul class="share-menu">
   <li><a onclick="window.open('https://www.linkedin.com/shareArticle?url=http://oasistheme.com/proj2/#page-one&title=Helloo','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" target="_blank" class="socicon socicon-linkedin"></a></li>
   <li><a onclick="window.open('https://www.facebook.com/sharer.php?u=http://oasistheme.com/proj2/#page-one','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" class="socicon socicon-facebook"></a></li>
   <li><a onclick="window.open('https://plus.google.com/share?url=URL','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" class="socicon socicon-googleplus"></a></li>
   <li><a onclick="window.open('https://twitter.com/intent/tweet?url=URL&text=TITLE&via=USERNAME&hashtags=HASHTAGS','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" class="socicon socicon-twitter"></a></li>
</ul>

在每个部分中，我使用不同的链接设置代码，例如在“第二页”部分中，链接采用以下形式：

<ul class="share-menu">
   <li><a onclick="window.open('https://www.linkedin.com/shareArticle?url=http://oasistheme.com/proj2/#page-two&title=Helloo','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" target="_blank" class="socicon socicon-linkedin"></a></li>
   <li><a onclick="window.open('https://www.facebook.com/sharer.php?u=http://oasistheme.com/proj2/#page-two','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" class="socicon socicon-facebook"></a></li>
   <li><a onclick="window.open('https://plus.google.com/share?url=URL','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" class="socicon socicon-googleplus"></a></li>
   <li><a onclick="window.open('https://twitter.com/intent/tweet?url=URL&text=TITLE&via=USERNAME&hashtags=HASHTAGS','name','height=520, width=600,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=yes'); return false;" href="" class="socicon socicon-twitter"></a></li>
</ul>

P.S。在这种情况下，部分名称ID就是示例

Answer 1

您的代码唯一的问题是解析会删除＆＃39;＃＆＃39;字符，因此锚点部分被转义。 hash的ASCII是％23 ，因此你的链接应该是

https://www.linkedin.com/shareArticle?url=http://oasistheme.com/proj2/%23page-one

此外，您还有很多重复使用的代码。

我建议（但可能性绝对不限于）：

创建简单的函数share(network, url)，只要 network 是linkedin，twitter等，就会检查该函数。然后该函数共享传递的 url 。您可以通过onclick=""。
删除onclick=""并添加事件侦听器。使用js检索参数并调用前面提到的 share（）函数。
通过向每个部分添加class="shareable"并动态添加分享按钮来获取完整的javascript（或任何js库）。

更新 （基于作者对默认标题和说明的评论）

请阅读有关每个网络的共享属性的信息。共同共享通过检索 og标签（afaik，facebook，也是twitter的一些标签，虽然twitter有自己的标签）。如果未设置，则检索站点标题/描述或页面标题/描述，具体取决于标记。您每页只能设置一次。

对于Facebook ，您可以使用共享触发器上的js替换元标记内容，或使用facebook sdk（working, full example）。

＆＃13;

function fbShare(url, title, description, image)
{
	FB.ui({
		method: 'share_open_graph',
		action_type: 'og.shares',
		action_properties: JSON.stringify({
			object: {
				'og:url': url,
				'og:title': title,
				'og:description': description,
				'og:image': image
			}
		})
	},
	function (response) {});
}

＆＃13;

对于Linkedin和Twitter ，它更容易

＆＃13;

function linkedinShare(url, title, summary) {
  window.open('http://www.linkedin.com/shareArticle?mini=true&url='+url+'&title='+title+'&summary='+summary+'&source=');
}

function twitterShare(url, title) {
  window.open('https://twitter.com/intent/tweet?mini=true&text=RT @ [yourprofile] '+title+' ' + url);
}

＆＃13;

对于谷歌，你不能改变任何想法但是网址。他们只接受url参数。 On google+ docs, you can find attribute fetching workflow

Answer 2

＆＃13;

<ul class="share-menu">
<li><a href="https://www.linkedin.com/shareArticle?url=http://oasistheme.com/proj2/#page-one&title=Helloo" onclick="window.open(this.href); return false;">link1</a></li>
<li><a href="https://www.facebook.com/sharer.php?u=http://oasistheme.com/proj2/#page-one" onclick="window.open(this.href); return false;">link2</a></li>
<li><a href="https://plus.google.com/share?url=URL" onclick="window.open(this.href); return false;">link3</a></li>
<li><a href="https://twitter.com/intent/tweet?url=URL&text=TITLE&via=USERNAME&hashtags=HASHTAGS" onclick="window.open(this.href); return false;">link4</a></li>
</ul>

＆＃13;

每个部分的共享按钮

2 个答案: