javascript Facebook Sharer - 标题和摘要自定义
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/22065179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook Sharer - Title and summary Customization
提问by AlvaroAV
I'm working in a project with Django and I'm trying to share pages in facebook and twitter
我正在与 Django 合作一个项目,我正在尝试在 facebook 和 twitter 中共享页面
I have problems on facebook, I want to customize the Title and summary shared, to change the text when you share an Index Page and any other page.
我在 facebook 上遇到问题,我想自定义共享的标题和摘要,以在共享索引页和任何其他页面时更改文本。
I tried using:
我尝试使用:
<a href='http://www.facebook.com/sharer.php?s=100&
p[title]=TITLE+TEST&
p[summary]=summary&
p[url]=http://{{ request.META.HTTP_HOST }}{{ request.path }}&
p[images][0]=http://whatever.com/media/img/img_facebook.jpg'
target="_blank">
<img src="{{STATIC_URL}}img/ico_facebook_small.png" title="Facebook" alt="Facebook" ></a>
and even adding:
甚至添加:
<meta property="og:title" content="My Title" />
The only 2 things I can change is the url showed and the image. Facebook sharer ignores title and summary. I search trough internet the last hour and I didn't find any solution that works for me.
我唯一可以更改的两件事是显示的 url 和图像。Facebook 共享者忽略标题和摘要。我在最后一个小时通过互联网搜索,但没有找到任何适合我的解决方案。
Anyone knows if the facebook sharer isn't working anymore ? is there any solution to custom title and summary ?
任何人都知道 facebook 共享器是否不再工作了?有没有自定义标题和摘要的解决方案?
Thanks
谢谢
EDIT
编辑
Now I'm using og meta tags, but still have a problem. I want that each page has different titles, and I need to get the title via Javascript (I change the "og:title" content via js) but it seems the change take effect too late, because Facebook only get the part of the title that is static.
现在我正在使用 og 元标记,但仍然有问题。我希望每个页面都有不同的标题,我需要通过 Javascript 获取标题(我通过 js 更改了“og:title”内容)但似乎更改生效太晚了,因为 Facebook 只获取了部分标题那是静态的。
I have something like:
我有类似的东西:
<meta property="og:title" content="TitlePage" />
and change the content via js to make like
并通过js更改内容以使其像
<meta property="og:title" content="TitlePage SOMETHINGELSE" />
The change takes effect nice and without problems but like I said, facebook doesn't detect that change.
更改效果很好并且没有问题,但就像我说的那样,facebook 没有检测到该更改。
EDIT 2
编辑 2
I've answered my own question because I've found a solution to do the sharing in the old way, but an app is needed to make the code works.
我已经回答了我自己的问题,因为我找到了一种以旧方式进行共享的解决方案,但是需要一个应用程序才能使代码正常工作。
采纳答案by AlvaroAV
Facebook Sharer without Open Graph meta tags
没有 Open Graph 元标记的 Facebook Sharer
I change correct answer after this long because in a new project, I had to do the same in the old way, and I finally get this code to works fine by creating a simple app in facebook:
这么长时间后我更改了正确答案,因为在一个新项目中,我必须以旧方式做同样的事情,我终于通过在 facebook 中创建一个简单的应用程序使这段代码正常工作:
Info for this sample apps: Facebook Send Dialog
此示例应用程序的信息:Facebook 发送对话框
APP_ID: Facebook app Identifier
http://www.THEPAGE.com: This would be my domain
APP_ID:Facebook 应用标识符
http://www.THEPAGE.com:这将是我的域
$('#share_button').bind('click', function(e){
e.preventDefault();
var title = 'Title I want';
var im_url = 'url_to_image';
var facebook_appID = 'YourFacebookAppID'
url = "https://www.facebook.com/dialog/feed?app_id="+ facebook_appID + "&link=" + encodeURIComponent("http://www.THEPAGE.com")+
"&name=" + encodeURIComponent(title) +
"&caption=" + encodeURIComponent('Shared from MY_PAGE') +
"&description=" + encodeURIComponent('DESCRIPTION') +
"&picture=" + encodeURIComponent("http://www.THEPAGE.com" +im_url) +
"&redirect_uri=https://www.facebook.com";
window.open(url);
});
Facebook app is needed to do this
需要 Facebook 应用程序来执行此操作
To create your facebook app you need to register as developer and create the app visiting the next link:
要创建您的 facebook 应用程序,您需要注册为开发人员并访问下一个链接创建应用程序:
回答by Urban Bj?rkman
Set your page up with proper Open Graph meta tags.
使用适当的 Open Graph 元标记设置您的页面。
This should work with facebooks share scripts. This will also show correct title, image and description of your pages when people post direkt links on facebook without using share buttons.
这应该适用于 facebooks 共享脚本。当人们在 facebook 上发布直接链接而不使用共享按钮时,这也将显示您页面的正确标题、图像和描述。
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail" />
I recommend you check out the facebook documentation https://developers.facebook.com/docs/web/webmasters/https://developers.facebook.com/docs/plugins/share-button
我建议您查看 Facebook 文档 https://developers.facebook.com/docs/web/webmasters/ https://developers.facebook.com/docs/plugins/share-button
回答by glautrou
I agree with other answers, use the OpenGraph Protocol
我同意其他答案,使用OpenGraph 协议
- However, if it doesn't work make sure your URL is publicly visible.
- If it still doesn't work and you are absolutely sure your meta tags are correct that means Facebook cached your page.
- To remove Facebook cache go to the Facebook Object Debugger page and paste your link. By doing this Facebook will force its cache to be refreshed and show you values of your meta tags. That should fix your problem.
- 但是,如果它不起作用,请确保您的 URL 是公开可见的。
- 如果它仍然不起作用并且您绝对确定您的元标记是正确的,则意味着 Facebook 缓存了您的页面。
- 要删除 Facebook 缓存,请转到 Facebook 对象调试器页面并粘贴您的链接。通过这样做,Facebook 将强制刷新其缓存并向您显示元标记的值。那应该可以解决您的问题。
回答by Bob
The easiest way to solve this is to use the feed dialog: https://developers.facebook.com/docs/sharing/reference/feed-dialog
解决此问题的最简单方法是使用提要对话框:https: //developers.facebook.com/docs/sharing/reference/feed-dialog
I have posted this in another question too because I wasted hours today trying to figure this out. Hopefully it will solve someone's time. You need APP Id.
我也在另一个问题中发布了这个,因为我今天浪费了几个小时试图解决这个问题。希望它会解决某人的时间。您需要应用程序 ID。
回答by vcarel
Well, I am in the similar situation with you... The sharer.php with customized title and description was working up to a few days ago, and since then, only the OG metada are showing up, when they exist !
好吧,我和你的情况类似......带有自定义标题和描述的 sharer.php 几天前还在工作,从那时起,只有 OG metada 出现,当它们存在时!
If you can, I suggest you to use the official version of the sharer URL, which now only accepts the shared URL in the query string, e.g.: https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com
如果可以的话,我建议你使用官方版的sharer URL,现在只接受查询字符串中的sharer URL,例如:https: //www.facebook.com/sharer/sharer.php?u=https %3A%2F%2Fparse.com
See https://developers.facebook.com/docs/plugins/share-button/#faqdialog
请参阅https://developers.facebook.com/docs/plugins/share-button/#faqdialog
Then you'll have to set up the Open Graph metadata on your page.
然后,您必须在页面上设置 Open Graph 元数据。
You can check how Facebook process your page with their debug page : https://developers.facebook.com/tools/debug/
您可以使用他们的调试页面检查 Facebook 如何处理您的页面:https: //developers.facebook.com/tools/debug/
edit :
编辑 :
Custom parameters in the sharer.php URL are officially not supported anymore : https://developers.facebook.com/bugs/357750474364812
官方不再支持 sharer.php URL 中的自定义参数:https: //developers.facebook.com/bugs/357750474364812
Ibrahim Faour - Developer Support Engineer at Facebook
We have changed the behavior of the sharer plugin to be consistent with other plugins and features on our platform.
The sharer will no longer accept custom parameters and facebook will pull the information that is being displayed in the preview the same way that it would appear on facebook as a post from the url OG meta tags.
Ibrahim Faour - Facebook 的开发人员支持工程师
我们已更改共享器插件的行为,以与我们平台上的其他插件和功能保持一致。
共享者将不再接受自定义参数,并且 facebook 将提取在预览中显示的信息,就像它在 facebook 上显示为来自 url OG 元标记的帖子一样。