11

ユーザーの Twitter でツイートを取得するアプリケーションを作成しています。

これらのフィードには、記事、ウェブページ、YouTube ビデオなどの外部リソースへのリンクが含まれています。

Twitter API を使用してこれらのフィードの JSON を取得しog:ますが、コンテンツの属性は含まれていません。そして、それらをキャッチして、私のウェブサイトに表示したいと思います。

StackOverflow のこの質問のように:

<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="How can I check classes that ends with?" />
<meta name="og:description" content="I have some elements such as:
    &amp;lt;div class=&quot;button 17-facebook-dashboard-check&quot;&amp;gt;Elem1&amp;lt;div&amp;gt;
    &amp;lt;div class=&quot;button 18-google-dashboard-check&quot;&amp;gt;Elem2&amp;lt;div&amp;gt;
    &amp;lt;div class=&quot;button " />
<meta name="og:url" content="https://stackoverflow.com/questions/19001883/how-can-i-check-classes-that-ends-with"/>

各ツイートの共有リソースごとにこれらの情報をキャッチしたいと思います。したがって、各ツイート (私にとってはボックス) に対してクライアント側で ajax リクエストを実行し、html をダウンロードして解析し、og:title、og:description、og:typeおよび を取得すると思いますog:image。

これは最善のアプローチですか？Javascript/Jquery でこのデータを解析するのはどうですか?

4

3 に答える 3

14

これらのog:属性はOpen Graph Protocol属性であり、これらのデータを取得する方法は多数あります。非常に役立つ可能性があるOpen Graph Protocol パーサーのコードと、このPHP および jQuery Facebook リンク パーサーを確認する必要があります。

PHP 解析に関するこのStackOverflow Questionとこの Opengraph PHP パーサー を確認して、ajax 呼び出しで動的に使用することもできます。

最後に、JQuery と純粋な JavaScript の解析に関するこのStackOverflow の質問は非常に興味深いものであり、本当に役立つ可能性があります。

必要なものが見つかることを願っています。;)

于 2013-10-11T08:41:09.560 に答える
6

免責事項: OpenGraph.io は、私が取り組んでサポートしている商用製品です。

おっしゃるとおり、作業する OG タグがないことがよくあります。遭遇する可能性のあるあらゆる種類のシナリオがあります (たとえば、エンコーディング、HTML タグの誤用など)。エッジケースを処理したい場合は、http://www.opengraph.io/をお勧めします

その主な利点の 1 つは、OpenGraph タグが存在しない場合に、ページのコンテンツからタイトルや説明 (必要になった場合) などの情報を推測できることです。

サイトの使用に関する情報を取得するには (リンクは URL エンコードする必要があります):

$.ajax('http://opengraph.io/api/1.0/site/http%3A%2F%2Fwww.washingtontimes.com%2F')
  .done(function(data){
    console.log(data);
  });

次のようなものが返されます。

{
  "hybridGraph": {
    "title": "Washington Times - Politics, Breaking News, US and World News",
    "description": "The Washington Times delivers breaking news and commentary on the issues that affect the future of our nation.",
    "image": "http://twt-assets.washtimes.com/v4/images/logo-twt.4b20fb5d7b29.svg",
    "url": "http://www.washingtontimes.com/",
    "type": "site",
    "site_name": "Washington Times "
  },
  "openGraph": {...},
  "htmlInferred": {...},
  "requestInfo": {...}
}
于 2014-04-30T20:36:15.760 に答える
1

ブラウザー コンソール (Chrome またはその他) を使用して OG (オープン グラフ) メタデータ値を取得する方法を探しているこの質問を見つけた人は、ES6 JavaScript を使用してそれを行うことができます。

例：

「説明」タグを取得するには (WordPress Web サイトのサイト バイラインも返します)、私が書いた次のワンライナー コード スニペットを使用してください。

document.querySelectorAll('meta[property="og:description"]')[0]

これは、Ajax を使用してサーバーからリモートでデータを取得することには対応していません。これは単なるブラウザー ベースのソリューションです。

別の簡単な例を次に示します。すべてのメタデータ プロパティを取得し、それらを渡すことができるオブジェクトに格納するとします。これは、優れた WordPress Web サイトで最も簡単にテストできますが、開いているグラフ メタ タグがある場所であればどこでも機能するはずです。

/*

10/01/18

Eric Hepperle

Grab all OG Meta Tags values on a webpage

Total time spent to create and test: 1 hr.

*/

console.clear();

// Store all our properties in one object
var ogWebsite = {};

//var metas = document.querySelectorAll('meta[property="og:description"]')[0]
var metaTags = document.querySelectorAll('meta');

var propTagCount = 0;

[...metaTags].forEach(function(tag, i) {
    
    // console.log(tag);
    
    if (tag.hasAttribute('property')) {
        
        var propName = tag.getAttribute('property');
        // console.log("%c\t%s", "background: orange; color: black", propName);
        console.log(propName);

        // Get the value of the OG property attribute
        var ogMetaValue = document.querySelectorAll("meta[property='" + propName +"']")[0].content;
        
        console.log("%cogMetaValue: %s","background: purple; color: white;", ogMetaValue);
        
        // Add property to ogWebsite object. We can do this because
        //  ES6 (2015) allows varible keys with object literals.
        //  To work, you must use bracket "[]" notation instead of dots.
        ogWebsite[propName] = ogMetaValue;
        
        ++propTagCount;        
    }
    
    
});

console.log("%cTotal meta tags: %s", "background: bisque; color: brown; font-weight: bold;", metaTags.length);
console.log("%cTotal meta tags with 'property' attribute: %s", "background: cadetblue; color: white; font-weight: bold;", propTagCount);

// Display the final object:
console.log(ogWebsite);

于 2018-10-01T20:00:24.667 に答える