小$ P $共享PVIEW在社交媒体上的Ruby on Rails的链接时,社交、链接、媒体、PVIEW

2023-09-13 04:54:52 作者:侧耳倾听巴黎花街的冷暖-

我工作的一个网站,其前端是 angularjs 和后端的 ROR ,相同的 ROR API 是在 Android应用也可使用。现在,我在这里有一个情况。我需要共享的社会化媒体我的Web的职位,比如的Facebook 叽叽喳喳谷歌加。并与链接到单后沿应该有一个小preVIEW 也(A $在Facebook中发布如前已抓取后的对$ PVIEW)。我这样做是采用了棱角分明的插件。但是,当涉及到Android的一面,他们分享什么显示在Facebook上只有链接。然后我做了一些R&安培; D和我才知道,它必须在服务器端进行,以社交媒体meta标签。我做了一点点,但它仍然没有工作。我坚持就可以了。下面是我到目前为止已经完成。

I'm working on a site whose front end is in angularjs and backend in ROR , Same ROR API is used in an android app also . Now I have a situation here . I need to share my Web's post on the Social media like facebook , twitter and google plus . And along with the link to the single post there should be a small preview also (a preview of the post which crawls before posting e.g in facebook) .I did it using angular Plugins . But when it comes to Android side , what they share and what displays on Facebook is the Link only . Then i did some R&D and i came to know that it must be done on server side with social media meta tags . I did a little bit but it still no works . I'm stuck on it . Below is what i've done so far .

 def show
  @post = Post.find_by_permalink(params[:id])
    respond_to do |format|
        format.html
        format.js
    end
end

在我的观点的帖子/ show.html.erb

In My views posts/show.html.erb

<!DOCTYPE html>
<html>
<head>
    <title> Shared Question</title>

    <meta property="og:title" content="My Page" />
    <meta property="og:description" content="A description of my page." />
    <meta property="og:image" content="https://m.xsw88.com/allimgs/daicuo/20230913/1378.png.jpg" />
    <!-- etc. -->
</head>
<body>
Here is the body
</body>
</html>

我只需要显示一个小preVIEW每当一些用户分享我的网页后对任何媒体链接

I just need to show a small preview whenever some user share my web post's link on any media

推荐答案

您是正确的,你需要实施特别开放图(及其他)标签定制的社交共享功能。

You are correct, you need to implement special open graph (and other) tags for the customized social sharing functionalities.

记住,例如Facebook将缓存页面。

Keep in mind that e.g. facebook will cache your page.

所以,你可以尝试 https://developers.facebook.com/tool​​s/debug/测试你的code,无缓存 - 在code本身看起来不错。

So you may try https://developers.facebook.com/tools/debug/ to test your code without caching - the code itself looks fine.

举例code:

把这个$ C $ &LT C之间标签。

Place this code between <head> and </head> with your other meta tags.

<meta property="og:title" content="Title">
<meta property="og:site_name" content="Name">
<meta property="og:url" content="URL">
<meta property="og:description" content="Description Text">
<meta property="og:type" content="article">

<!--- network Specific --> 
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@FernerJohannes">

如果你想针对Twitter的具体位置是他们的卡准则: https://dev.twitter.com/cards/getting-started

If you want to target Twitter specifically here are their card-guidelines: https://dev.twitter.com/cards/getting-started

您可能还需要签:的Open Graph验证为HTML5