Problem/Motivation

Unexplained Facebook URL_Embed features lost during upgrade from Open Social 10.3.x to 11.0.10

I ran a test prior to and following my upgrades where Facebook Videos are no longer displaying in a (Stream) Post.

  • No problem embedding Facebook videos with CKEditor Embed Button, but the automatic URL Embed feature within a Post was lost (consistently with several tests) especially with Facebook (We do have the Facebook URL Embed feature approved in their Developers Suite). And our App ID and Secret keys are intact in "/admin/config/media/url_embed".
  • Attached Screenshots are before (social 10.3.8) and after (11.0.10) with the same posts. (two examples)
  • The URL Embed module version did not change after the upgrade process and remains at Version: 8.x-1.0-beta1.
  • I have confirmed no changes in the CKEditor settings for both Simple and Plain Text Editors
  • Can anyone pinpoint what would have been changed in the upgrade process that would have caused this to revert to a link instead of rendering the video?

More notes: The issue showed up first while logged in as Admin, and has been consistent between browsers and instances of Open Social (all cloned from Production which has yet to be upgraded). The Screenshots were taken from different browsers simply due to screenshot program issues - unrelated).

The fact that the URL Embed isn't converting into a card or Video shouldn't have anything to do with who is logged in (or even as a visitor).

Samples to view: Production site (10.3.8) https://crew-list.net | Updated Clone site: (11.0.10) https://beta.crew-list.net
Scroll down Home Stream page looking for Facebook embeds!

If you were to go to the Production site, there are multiple instances of Facebook URL's pointing to video content that renders properly as a video, and can optionally have the "embed-responsive embed-responsive-16by9" class added in some cases which conform their width to 100% if desired. Note: We have added some styling to this class!

But are all lost and revert to a simple URL link after the upgrade to Drupal 9.2.16 and OS 11.0.10. The clones are also online in subdomains and on different servers.

Modules uninstalled before update process:

  1. Social API Auth
  2. Social Auth Facebook
  3. Social Auth Google
  4. Social Auth LinkedIn
  5. Social Auth Twitter
  6. Social SSO (Depreciated)
  7. Social Search Autocomplete (Depreciated)
  8. Social Auth Extra (Depreciated)

Once the update/upgrade occurs, the Facebook Videos revert to a link only!

Steps to reproduce

  1. Start with Open Social version 10.3.8
  2. You must have Facebook App ID and Secret enabled in: /admin/config/media/url_embed
  3. Enter Facebook (Public Audience) Video into a Post Ex: https://fb.watch/chvP54cJFM/
  4. Follow update procedure as outlined in: https://www.drupal.org/project/social/releases/11.0.0
  5. View previously entered Posts!

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

bas123 created an issue. See original summary.

tbsiqueira’s picture

Issue tags: +Open Social Batch 1
bas123’s picture

I don't know if this will be of much help, but I pulled the rendered code via my "inspector" to see the difference between the post in Sample 1 above to see the difference between versions


Before update - Inspect element from social 10.3.8

<div class="margin-top-m iframe-container margin-bottom-m">
    <div class="body-text">
              <p>Anyone have more on this?<br>
<video poster="https://scontent-iad3-1.xx.fbcdn.net/v/t15.5256-10/277059095_652744209289575_7128150930589529764_n.jpg?stp=dst-jpg_p206x206&amp;_nc_cat=107&amp;ccb=1-5&amp;_nc_sid=ad6a45&amp;_nc_ohc=zuCKSV-St8IAX9fUXBA&amp;_nc_ht=scontent-iad3-1.xx&amp;oh=00_AT9a9heXX2py7BVNp6Y3Lk7fnxXeKsIosv8mMaCQkAuYOg&amp;oe=6258A35C" width="426" height="240" controls=""><source src="https://scontent-iad3-1.xx.fbcdn.net/v/t66.36240-6/121020164_647440066347100_9102138371803283682_n.mp4?_nc_cat=108&amp;ccb=1-5&amp;_nc_sid=985c63&amp;efg=eyJybHIiOjMwNiwicmxhIjo1MTIsInZlbmNvZGVfdGFnIjoib2VwX3NkIn0%3D&amp;_nc_ohc=O5Y_gx4xNv8AX_53cZK&amp;rl=306&amp;vabr=170&amp;_nc_ht=scontent-iad3-1.xx&amp;oh=00_AT90miCWziBdrrlepJu-bUqTFobrvmH2OmnACRhBD2wIxA&amp;oe=62590AD5"></video></p>
  </div>
  <div class="clearfix"></div>
  <div class="footer-post">
<div class="vote-widget vote-widget--like-and-dislike">
  <div class="vote__wrapper">
              <div class="vote-like type-post" id="like-container-post-494">
          <a title="Like" data-entity-id="494" data-entity-type="post">
            <svg class="icon-vote" aria-hidden="true">
              <title>Total amount of likes</title>
              <use xlink:href="#icon-like"></use>
            </svg>
          </a>
        </div>
        <div class="vote__count">
                      <a class="use-ajax" data-dialog-options="{&quot;title&quot;:&quot;Members who liked this Photo&quot;,&quot;width&quot;:&quot;auto&quot;}" data-dialog-type="modal" href="/wholiked/post/494" title="Number of likes">
              2 likes            </a>
                  </div>
              <div class="vote-dislike type-post" id="dislike-container-post-494">
          <a title="Dislike" data-entity-id="494" data-entity-type="post" class="disable-status">Dislike</a>
          <span class="count">0</span>
        </div>
            </div>
</div>
    <div class="album-name">
    </div>
      </div>
</div>


After update - Inspect element from social 11.0.10

<div class="margin-top-m iframe-container margin-bottom-m">
    <div class="body-text">
              <p>Anyone have more on this?<br>
<a href="https://fb.watch/b_qqT-IJYZ/" target="_blank" rel="noopener nofollow">https://fb.watch/b_qqT-IJYZ/</a></p>
  </div>
  <div class="clearfix"></div>
  <div class="footer-post">
<div class="vote-widget vote-widget--like-and-dislike">
  <div class="vote__wrapper">
              <div class="vote-like type-post" id="like-container-post-494">
          <a title="Like" data-entity-id="494" data-entity-type="post">
            <svg class="icon-vote" aria-hidden="true">
              <title>Total amount of likes</title>
              <use xlink:href="#icon-like"></use>
            </svg>
          </a>
        </div>
        <div class="vote__count">
                      <a class="use-ajax" data-dialog-options="{&quot;title&quot;:&quot;Members who liked this Photo&quot;,&quot;width&quot;:&quot;auto&quot;}" data-dialog-type="modal" href="/wholiked/post/494" title="Number of likes">
              2 likes            </a>
                  </div>
              <div class="vote-dislike type-post" id="dislike-container-post-494">
          <a title="Dislike" data-entity-id="494" data-entity-type="post" class="disable-status">Dislike</a>
          <span class="count">0</span>
        </div>
            </div>
</div>
    <div class="album-name">
    </div>
      </div>
</div>
bas123’s picture

bas123’s picture

More Information! As I seek to troubleshoot what changes in Open Social or Social Embed and their related dependencies have been modified that are causing these feature degradations.

This issue is about losing the ability to have Oembed work in posts with Facebook URL's and was created by updating Open Social from version 10.3.8 to ^11.0.10 primarily.

After doing an update within Open Social 10.3.8 a Facebook Embeded IFrame with dimensions of 500 by 506 which prior to the update shrunk from it's full dimensions to about 70 pixels high after the update.

As I scroll through our Home Stream, I see that any instance of a Facebook embed IFrame that once rendered as coded is now cropped dramatically beyond recognition. I also see that embed videos from other sites like Ted (Talks) which displayed properly, are now cropped as well!

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FAreYOUontheCrewList%2Fposts%2F160607126347701&show_text=true&width=500" width="500" height="506" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

Also: This truncation ONLY happens on the Stream Pages. If you edit the post and display it in the post's own URL ie: /post/509, The post appears as it should!

Here is what was updated and the only item(s) that needed a database update following composer uppdate --with-dependencies) related to Blazy (Who I suspect may be the culprit)

composer update --with-dependencies
Loading composer repositories with package information
Warning from https://repo.packagist.org: Support for Composer 1 is deprecated and some packages will not be available. You should upgrade to Composer 2. See https://blog.packagist.com/deprecating-composer-1-support/
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies (including require-dev)
Package operations: 0 installs, 12 updates, 0 removals
No patches supplied.
Gathering patches for dependencies. This might take a minute.
  - Updating composer/installers (v2.1.0 => v2.1.1): Loading from cache
  - Updating spatie/color (1.5.0 => 1.5.1): Loading from cache
  - Updating webonyx/graphql-php (v14.11.5 => v14.11.6): Loading from cache
  - Updating drupal/colorbox (1.8.0 => 1.10.0): Loading from cache
  - Updating drupal/geofield (1.38.0 => 1.39.0): Loading from cache
  - Updating firebase/php-jwt (v5.5.1 => v6.1.2): Loading from cache
  - Updating google/apiclient-services (v0.242.0 => v0.245.0): Loading from cache
  - Updating google/auth (v1.19.0 => v1.21.0): Loading from cache
  - Updating google/apiclient (v2.12.2 => v2.12.4): Loading from cache
  - Updating drupal/geolocation_address (3.7.0 => 3.9.0)
  - Updating drupal/geolocation_leaflet (3.7.0 => 3.9.0)
  - Updating drupal/blazy dev-2.x (669d29a => 07b5010):  Checking out 07b50100c4
Package doctrine/reflection is abandoned, you should avoid using it. Use roave/better-reflection instead.
Package egeloen/http-adapter is abandoned, you should avoid using it. Use php-http/httplug instead.
Package facebook/graph-sdk is abandoned, you should avoid using it. No replacement was suggested.
Package swiftmailer/swiftmailer is abandoned, you should avoid using it. Use symfony/mailer instead.
Writing lock file
Generating autoload files
33 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

The Screenshot "Facebook-IFrame-before-10.3.8-update" shows the affected post before the update
The Screenshot "Facebook-IFrame-after-10.3.8-update" shows the affected post after the update

bas123’s picture

This has been resolved in social 11.3.6 in combination with working through appropriate OEmbed permissions with Meta/Facebook

Changing status to closed - fixed!

bas123’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.