サムネイル/画像を取得し、facebookやtwitterなどの外部URLを取得するにはどうすればよいですか？

Question

私は他のウェブサイトからのリンクを共有することができ、サムネイル/画像の下に小さな説明（facebook、twitter、reddit ..のようなもの）が現れるアプリケーションを作成したいのですが、リンクが投稿されている場合は、そのウェブサイトからサムネイルと説明が自動的に生成されます

私はlaravelでこれをしようとしています！

Answer 1

他のWebサイトのURLにhttp要求を行い、応答の要素を使用してプレビューを構成します。 Facebookはこの目的のためにog:メタタグを好む。これは、クライアントまたはサーバーのいずれかで行うことができます。

これをブラウザで実行する必要がある場合は、URLが表示される可能性のあるフィールドでイベントハンドラを使用し、変更イベントを監視し、URLを取得するためのパターンマッチングを使用できると思います。 URLが検出されると、http要求を行うルーチンを起動し、リモートページを取得し、そのページから特定の要素を解析してプレビューを構築します。

Answer 2

Google、facebook、twitterなどの大きなサイトでは、schema.orgなどのサイトを使用しているサイトでは、一部のウェブサイトからstructured dataを抽出できます。 Schema.org has a github repositoryにはたくさんの例と便利なツールがあります。あなたも見ることができますJSON-LD

これはMicrodataまたはRDFaとして知られています。これにより、コンピュータは、人間が読めるテキストをウェブ上で受け取り、構文解析して意味のある構造化された情報にすることができます。検索結果でGoogleが使用している種類のように。

あなたの周りに浮いはpackagistから掘ることができsome implementations in PHPがあります。

これは、サイトで見つかる可能性のあるMicrodataの例です。

<div itemscope itemtype="http://schema.org/Order"> 
    <div itemprop="seller" itemscope itemtype="http://schema.org/Organization"> 
    <b itemprop="name">ACME Supplies</b> 
    </div> 
    <div itemprop="customer" itemscope itemtype="http://schema.org/Person"> 
    <b itemprop="name">Jane Doe</b> 
    </div> 
    <div itemprop="orderedItem" itemscope itemtype="http://schema.org/OrderItem"> 
    Item number: <span itemprop="orderItemNumber">abc123</span> 
    <span itemprop="orderQuantity">1</span> 
    <div itemprop="orderedItem" itemscope itemtype="http://schema.org/Product"> 
     <span itemprop="name">Widget</span> 
    </div> 
    <link itemprop="orderItemStatus" href="http://schema.org/OrderDelivered" />Delivered 
    <div itemprop="orderDelivery" itemscope itemtype="http://schema.org/ParcelDelivery"> 
     <time="expectedArrivalFrom">2015-03-10</time> 
    </div> 
    </div> 
    <div itemprop="orderedItem" itemscope itemtype="http://schema.org/OrderItem"> 
    Item number: <span itemprop="orderItemNumber">def456</span> 
    <span itemprop="orderQuantity">4</span> 
    <div itemprop="orderedItem" itemscope itemtype="http://schema.org/Product"> 
     <span itemprop="name">Widget accessories</span> 
    </div> 
    <link itemprop="orderItemStatus" href="http://schema.org/OrderInTransit" />Shipped 
    <div itemprop="orderDelivery" itemscope itemtype="http://schema.org/ParcelDelivery"> 
     <time itemprop="expectedArrivalFrom">2015-03-15</time> 
     <time itemprop="expectedArrivalUntil">2015-03-18</time> 
    </div> 
    </div> 
</div> 

は、URL file_get_contents('http://www.example.com/somepage')をヒットし、あなたがスキーマのあらゆる種類のデータの構造を導き出すことができ、これを抽出するために、スキーマのPHP実装を使用している場合。

この情報がなければ、基本的にはPHPでDOMDocumentのようなものでDOMを解析し、意味するところを推測するだけです。それには感覚的な構造はまったくないかもしれませんが、例えば、非常に基本的な情報を得るために、HTMLの<title>というタグを見ることができます。