Other Thêm BB Code Media Sites sử dụng oEmbed

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
Thêm BB Code Media Sites sử dụng oEmbed

oEmbed là gì? Nhiều trang web cho phép bạn nhúng nội dung cũng sử dụng một cái gì đó gọi là oEmbed. Hầu hết thời gian (chẳng hạn như YouTube) của nó không cần thiết, vì hầu hết các trang web có mã nhúng phù hợp dựa trên iFrames hoặc mã object/embed.

Tuy nhiên, đôi khi các mục mà bạn muốn nhúng không có một điều như vậy, và thay vào đó có nội dung văn bản. Khi nhúng nội dung văn bản, thường không phải là một mã nhúng liên tục. Vì vậy, thay vì có thể chỉ cần lấy ID của nội dung và mã nhúng; bạn cần phải thêm một số thông tin thêm ... đặc biệt là cho những người dùng không có javascript.

Rất may, một số trang web cung cấp tùy chọn oEmbed. oEmbed về cơ bản là một cách chuẩn hóa để thăm dò ý kiến API của một trang web cho mã nhúng của mục. YouTube cũng cung cấp một cách như vậy, nhưng loại hình này dư thừa vì như tôi đã nói trước đây, nhúng YouTube đã được tiêu chuẩn hóa:
http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=-UUx10KOWIE&format=xml

Tuy nhiên, chúng ta hãy nhìn vào Twitter. Bạn không thể chuẩn hóa các mã nhúng cho Twitter vì nội dung của tất cả các tweet là khác nhau. Cho phép xem xét một tweet tôi đã thực hiện trước ngày hôm nay: https://twitter.com/8wayrun/status/372656437115101184

Nếu bạn nhấp vào tùy chọn "More" và chọn "Embed Tweet", bạn sẽ nhận được:
Mã:
<blockquote class="twitter-tweet"><p>You can now embed tweets directly into your posts on <a href="http://t.co/FY5u4b2Z71">http://t.co/FY5u4b2Z71</a>! <a href="http://t.co/VFrLI51fV8">http://t.co/VFrLI51fV8</a></p>&mdash; 8WAYRUN.COM (@8wayrun) <a href="https://twitter.com/8wayrun/statuses/372656437115101184">August 28, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Như bạn có thể thấy, các mã nhúng chứa các thông tin tweet thực tế và những người đã tweet nó. Sau đó, nó cũng bao gồm các javascript định dạng lại tweet nhìn dễ chịu hơn.

Về mặt lý thuyết, bạn có thể rất dễ dàng sử dụng một BB Code Media Site nhúng HTML tiêu chuẩn như sau:
Mã:
<blockquote class="twitter-tweet"><p>Tweet</p>&mdash; Twitter API (@user) <a href="https://twitter.com/*/status/{$id}">date</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Tuy nhiên, điều này gây ra vấn đề cho những người không kích hoạt javascript; hoặc nếu javascript Twitter là thấp. Điều quan trọng nhất về javascript là nó phải làm suy giảm một cách gracefully. Nếu javascript hỏng, nội dung vẫn nên có sẵn. Với tùy chọn ở trên, đây chỉ là không đúng sự thật.

Những gì chúng ta muốn, là nếu javascript bằng cách nào đó thất bại, nó sẽ giống như thế này:

1.jpg

Nếu javascript thành công, nó sẽ giống như thế này:

2.jpg

Chúng ta có thể làm điều này với oEmbed. oEmbed sẽ truy vấn các API Twitter trên tải trang để có được thông tin về các tweet và các nội dung của địa chỉ mạng. Đầu tiên, chúng ta cần phải thực hiện một tùy chỉnh BB Code Media Site:

1.png

Như bạn có thể thấy, chúng ta đang phù hợp với các URL sau:
Mã:
http://twitter.com/*/status/{$id}
http://twitter.com/*/statuses/{$id}
https://twitter.com/*/status/{$id}
https://twitter.com/*/statuses/{$id}

Bởi vì những gì chúng ta đang cố gắng để làm, các nội dung của "Embed HTML" là không thích hợp. Mặc dù, bạn có thể rất dễ dàng sử dụng nhúng HTML tôi đăng ở trên và nó cũng làm việc ... Tuy nhiên, nó sẽ không làm suy giảm gracefully. Vì vậy, thay vào đó, chúng ta cần phải đi vào tùy chọn nâng cao:

2.png

Như bạn có thể thấy, có một tùy chỉnh "Embed HTML Callback" định nghĩa ở đây.
Mã:
EWRcustom_BbCode_Embed::embedTwitter

Trong callback này mã sẽ được thực sự fetches oEmbed. Đương nhiên, bạn có thể có bất cứ điều gì callback tên này bạn muốn; nhưng tôi đặt tất cả các tùy chỉnh của tôi trong một addon duy nhất gọi là "EWRcustom". Dưới đây là đoạn code tôi đang sử dụng trong callback này:
Mã:
<?php

class EWRcustom_BbCode_Embed
{
    public static function embedTwitter($mediaKey, array $site)
    {
        $client = new Zend_Http_Client('https://api.twitter.com/1/statuses/oembed.json');
        $client->setParameterGet(array(
            'id' => $mediaKey,
            'maxwidth' => '500',
            'hide_media' => 'false',
            'hide_thread' => 'false',
            'omit_script' => 'true',
            'align' => 'none',
        ));
         
        try
        {
            $feed = $client->request()->getBody();
        }
        catch (Exception $e)
        {
            return false;
        }
         
        $json = json_decode($feed, true);
     
        if (empty($json['html']))
        {
            return false;
        }
        else
        {
            return '<div class="bbCodeTwitter">'.$json['html'].'</div>';
        }
    }
}

Như bạn có thể thấy, mã sử dụng Zend_Http_Client để lấy các thông tin oEmbed:
Mã:
$client = new Zend_Http_Client('https://api.twitter.com/1/statuses/oembed.json');
$client->setParameterGet(array(
    'id' => $mediaKey,
    'maxwidth' => '500',
    'hide_media' => 'false',
    'hide_thread' => 'false',
    'omit_script' => 'true',
    'align' => 'none',
));

Ngoài ra còn có 6 lựa chọn được xác định ở đây. Bạn có thể tìm ra những gì tất cả có nghĩa ở đây:
https://dev.twitter.com/docs/api/1/get/statuses/oembed

Tuy nhiên, điều quan trọng là "omit_script". Chỉ có một Twitter callback javascript là cần thiết cho mỗi trang. Nếu bạn đã có nó được gọi là một lần trên trang của bạn (chẳng hạn như nếu bạn đang sử dụng được xây dựng trong tích hợp Twitter của XenForo), bạn có thể thiết lập omit_script là true. Nếu bạn không có, thiết lập nó là false.

Các phần tiếp theo của mã xử lý thất bại:
Mã:
try
{
    $feed = $client->request()->getBody();
}
catch (Exception $e)
{
    return false;
}

Nếu vì một số lý do callback thất bại trong việc đạt được các API Twitter, nó sẽ trở lại các liên kết của các tweet lại cho người đọc như vậy ít nhất các nội dung vẫn còn nguyên vẹn. Nó sẽ không có các văn bản của các tweet, nhưng nó sẽ có một liên kết dễ dàng mọi người có thể bấm vào để đọc các tweet (cung cấp Twitter là không thấp).

Các phần tiếp theo xử lý các phản ứng oEmbed thực tế:
Mã:
$json = json_decode($feed, true);

if (empty($json['html']))
{
    return false;
}
else
{
    return '<div class="bbCodeTwitter">'.$json['html'].'</div>';
}

Nếu response không có một trường cho $json['html'], thì các tweet sẽ không được tìm thấy. Nó có lẽ đã bị xóa. Trong trường hợp đó, một lần nữa, như là nếu các API thất bại, chúng ta quay trở lại liên kết người sử dụng thực sự được đăng lại cho người đọc.

Tuy nhiên, nếu các HTML được tìm thấy, thì chúng ta wrap HTML là một DIV mà chúng ta có thể chọn để tạo kiểu sau này nếu chúng ta muốn. Trở lại HTML cho người xem. Điều sẽ được trả lại cho người sử dụng như sau:

1.jpg

Javascript Twitter sẽ là quá trình văn bản và chuyển đổi nó thành:

2.jpg

Bây giờ tôi sử dụng Twitter như ví dụ ở đây, nhưng có rất nhiều oEmbeds khác bạn cũng có thể sử dụng. Chẳng hạn như iFixit, Flickr, hoặc thậm chí Wikipedia!

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom