小编Mat*_*son的帖子
使用"share_open_graph"Facebook UI为测验结果创建动态共享对话框
简介:我的问题是通过share_open_graph方法获取FB.ui,以根据用户在页面上的操作创建包含不同标题,描述和图片的自定义共享对话框.
问题是我的第一个,我没有声誉,所以删除了很多链接,但(感谢所有给我支持的人)我已经能够拯救最初缺失的截图.
编辑:我最后不得不使用常规弹出窗口,其中有一个共享对话框,它不是理想的,但至少它可靠地工作.我越是环顾网络,越发现许多备受瞩目的网站仍然使用像这样的弹出式共享,所以我认为在这种情况下使用传统解决方案的优势超过了寻找合适解决方案的广泛工作,我用过https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2,通过URL查询提供的动态详细信息至少比我最初使用的sharer.php用法更新一些看着Buzzfeed.
我的页面:
我有一个测验.十个问题,每个问题五个答案,产生一个结果,将五个选项之一指定为"结果".测验的一切都很棒.当通过Ajax/jQuery完成测验时,结果会被拉入 - 这样我将来可以为其他人构建一个基于PHP的前端来管理测验的创建. 虽然我很乐意在下面的代码中提供页面URL,但很抱歉 - 在我解决此问题之前,我无法公开发布,因此您无法访问它!
我的目标:
当显示测验的结果时,它还应该具有Facebook和Twitter共享按钮,这些按钮已被定制为包括适合于用户的测验结果的图片,标题和描述.
Twitter按钮很容易动态完成
我只是使用jQuery创建一个Twitter按钮,使用与任何地方相同的HTML,我的动态描述作为data-text属性提供,然后调用twttr.widgets.load();以激活按钮.
Facebook Share按钮就是问题所在
- 我无法添加"普通"分享按钮 - 它只需要一个属性,即URL(每个测验结果不会更改).
- 我不能改变页面上存在的通用Open Graph标签 - 尽管jQuery可以做到这一点,Facebook的缓存意味着它毫无意义.此外,每个页面上的通用共享按钮(FB/Twitter/G +)应保持不受影响,并始终共享默认的OG标记.
所以我正在做的是创建一个链接并使用jQuery将其附加到页面,然后使用jQuery设置click触发器操作.已使用FB.init()代码块成功设置应用程序ID.这些是我为点击触发器尝试的方法:
尝试1: FB.ui({ method: "feed" })
FB.ui({
method: 'feed',
name: "I got "+response.country+"! Which European are you destined to date?",
link: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
picture: response.image,
description: response.body
});
基本工作 - 图片,标题和描述都与测验结果一致(在本例中为"法语") - 但 Feed对话框不仅被弃用,而且还远远低于"共享"对话框(见下文).我想做得好.
尝试2: FB.ui({ method: "share" })
FB.ui({
method: 'share',
href: …jquery facebook facebook-graph-api facebook-javascript-sdk fb.ui
推荐指数
解决办法
查看次数
如何在SVG精灵符号中引用内部渐变定义？
摘要: SVG精灵包含五个图标<symbol>块,其中一个图标块通过ID引用自己的渐变定义.它不再能够找到此渐变并正确渲染.
JSFIDDLE: http ://jsfiddle.net/Qtq24/1/
我正在将一些图形转换为SVG,并且它们是图标(在这种情况下用于社交网络配置文件)我想将它们保存在精灵中(就像我之前使用PNG一样).
我在CSS-tricks.com上遵循了本指南中的SVG sprites(以及后续建议使用<symbol>而不是使用<g>).
我现在有一个SVG精灵文件,social-sprite.svg,你可以在这里完整查看.
这是一个<svg>包含五个不同<symbol>块的完整块,每个块都id带有一个viewBox属性.在每种情况下,我通过在Adobe Illustrator中准备官方图标并保留已处理代码的相关部分来获取每个符号的SVG代码.
一旦<body>标签打开,就会通过PHP包含.svg文件(这就是为什么其中的主<svg>容器被标记的原因style="display: none;"),以便每个符号的引用都可以从HTML中运行.
四个图标完美运行,我唯一遇到问题的是YouTube图标,因为它使用内部定义的渐变.以下是SVG代码的YouTube部分:
<symbol id="youtube" viewBox="0 0 400 281.641">
<path id="Triangle" fill="#FFFFFF" d="M159.845,191.73l106.152-54.999L159.845,81.348V191.73z"/>
<path id="The_Sharpness" opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" fill="#420000" d="M159.845,81.348l93.091,62.162
l13.061-6.778L159.845,81.348z"/>
<g id="Lozenge">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
<stop offset="0" style="stop-color:#E52D27"/>
<stop offset="1" style="stop-color:#BF171D"/> …推荐指数
解决办法
查看次数
我可以使用基于<use xlink>的SVG sprite来修复跨浏览器的CSS问题而无需使用完整的内联代码吗？
摘要:一些SVG目标CSS效果在<use xlink>SVG精灵的Chrome和IE(Firefox很好)中不起作用,但是当相同的SVG代码真正内联时,相同的CSS工作得非常好.
JSFIDDLE: http ://jsfiddle.net/x8vg8k4p/5/
我目前正在使用<svg><use xlink:href="#symbol-id" /></svg>块来动态调用从PHP导入的SVG精灵(作为外部文件)调用SVG代码.
一些CSS效果应用于SVG,无论是标准还是悬停.所有这些效果在Firefox上都可以正常工作,但在IE和Chrome上,它们不会:
- 该
fill属性circle不生效 opacitySVG的两个内部部件上的设置(默认情况下为十字形,悬停时为拇指)不会生效
我相信CSS没有任何问题,因为如果SVG代码是内联的并且不是通过精灵id引用导入的,相同的代码工作得非常好,小提琴非常清楚地表明了这一点.
我已经挣扎了好几个小时,移动了一些代码,添加和删除了额外的属性,但却无法解决这个问题.
以下是完整代码的相关摘录,可以在JSfiddle链接上看到 - 这似乎不利于在问题中包含所有代码的可读性,但如果有人告诉我这是一个糟糕的形式,我很乐意编辑这个问题.
不工作:
<a><svg><use xlink:href="#thumbs-up" /></svg></a>
工作:
<a><svg><!-- truly inline SVG code here --></svg></a>
CSS的这些部分是在Chrome和IE上失败的部分:
a svg circle {fill: #4291c2;}
a svg path#cross {opacity: 0;}
a:hover svg circle {fill: #91c142;}
a:hover svg path#cross {opacity: 1;}
a:hover svg g#hand {opacity: 0;}
最后是SVG代码本身:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="thumbs-up" viewBox="0 0 100 100">
<circle cx="50" …推荐指数
解决办法
查看次数
将链接包裹在图像周围会破坏 Flexbox 布局并导致浏览器渲染异常
努力寻找正确的标题，而不仅仅是“帮助”和“什么，CSS，为什么？！”的混合体 所以希望你们几个天才能找到这个......！
我有两列。它们每个内部都有一个全角 div，其中包含一个徽标。这些图像的形状截然不同，一种是正方形，另一种是更全景的纵横比。为了实现平衡的外观，图像的最大宽度设置为 50%，最大高度设置为 100%。Flexbox 用于使图像水平和垂直居中。
他们看起来很好。
// working before wrapping images with links
section.working {
div.flex {
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 50%;
max-height: 100%;
}
}
}
然后我需要添加链接。
https://codepen.io/lenoz/pen/VwZyeOG
这是最简单的问题，因为底行是我用来获得完美布局的原始代码，顶行显示了当图像被包装在标签中以使它们链接时会发生什么。一些注意事项：
- 添加的颜色只是为了帮助区分边界一点 - 用于检测链接（红色背景）何时不再受限于其中图像的大小（理想情况下应该如此）
- 这两列在代码中是分开的，而不是共享容器的一部分 - 即一列无法告知另一列的高度（想要使用 CSS 而不是 JS 来修复此问题）
我应该提到的是，当然添加链接是不可能的——标签<a>位于 Flex 容器和 Flex 项目之间，所以显然它们会扰乱布局。
如果您能帮助我找到 CSS 解决方案，我将不胜感激。
还在？如果您想了解更多关于我尝试修复的信息，请继续阅读，其中包括 Chrome 怪异的一面。
不用说，我已经花了很长时间摆弄这个，所以这里有另一个链接，显示了我已经接近的一些努力： https: //codepen.io/lenoz/pen/pozpjVq
最上面一行（section.help）是我最近的尝试，但有点混乱，只是因为我中途停了下来，遭受了足以导致我发表这篇文章的挫败感。
我所说的中间一排section.weirdness实际上似乎是一个热门时刻的解决方案。如果您像我一样使用 Chrome，当您查看 Codepen 链接时，您可能在这些蓝色块上看不到任何内容？
但尝试删除该display: flex属性 …
推荐指数
解决办法
查看次数