Proberaum

@HerrLehmann

Ich kann ein code-snippet bauen, um eine Vorschau wie bei den Youtube-Links zu generieren.

Den iframe-code kann ich dazu sehr gut gebrauchen, muss aber zunächst die Cookie-Einstellungen anpassen.

@HerrLehmann

Ich habe die Cookieeinstellungen überarbeitet und neben Facebook auch Discord, Twitch und X zu Testzwecken mit aufgenommen. 

Die können sehr einfach hinzugefügt und entfernt werden.

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

Hmm... Müsste da ggf. eine neue Cookie-Abfrage kommen?

ähmm .... nein.

Aus Sicherheitsgründen ist HTML-Code bei der Eingabe im Frontend, bis auf wenige Ausnahmen , nicht erlaubt. Ebenso ist php, Javascript, jQuery, ruby und python verboten. Jeder Eingabe, auch die über diesem wysiwug-editor, wird gefiltert und erkannter Code gelöscht oder in eine disfunktionale Textform (so wie bei dir) umgewandelt.

Okay, das heißt, die Links von Facebook zum Einbetten benötigen wir gar nicht. Macht die Sache auch etwas unkomplizierter.

Ich packe dann jetzt noch mal den Link zur Seite hier rein:

Link:

Eine anderer Link: https://www.facebook.com/gegendenstrich/posts/pfbid02wf842Xi3TKK5kBQSBZkNVLVpmSZuK1sjdtkiceNFntZdWeEHGdEZqCr6MdP8rkvul

Edit Development: sry @HerrLehmann, dass ich gerade deinen Post zum Testen für Facebook zweckendfremde.

Ich erkläre kurz am Beispiel von Youtube wie das gemacht werden muss. Die Domain ist quasi irrelevant, da das Prinzip überall gleich ist und muss für jede Seite extra geschrieben oder reingeschachtelt werden, da die Einbettungen alle unterschiedlichen Code haben. Wenn man das einzelnd macht, hat es den Vorteil, dass man das auch einzelnd ein und Auschalten kann.

Ablauf (ganz stark verkürzt) beim Speichern und Anzeigen von Posts:

Ein User macht einen Post: Eingabe > Text, Link, etc. > Filter 1, Filter 2, ... > speichern in Datenbank

Anzeige des Posts: lesen aus Datenbank  > Filter xyz > Anzeige als Text, Link, etc.

Damit nicht nur der Youtube-Link, sondern auch die Einbettung, angezeigt wird, muss ein weiterer Content-Filter (nach Filter xyz) eingebaut werden.

Content-Filter > Filter-Videos > Youtube-Link erkennen >

Anzeige A:  z.B. als einfacher Link (wenn keine Cookies von Youtube erlaubt sind)

Anzeige B: Einbettung des Youtube Videos (durch die Einbettung wird die User IP übertragen, wofür die Erlaubnis gegeben werden muss)

Der Code für die Einbettung von Videos (Youtube/Vimeo, mit/ohne Einbettung) sieht dann etwa so aus:

function attachment_video_embed ( $content ){

    // VARs
    $html= '';
    $pattern       = '/<a\s+[^>]*href=["\']([^"\']+)["\'][^>]*>(.*?)<\/a>/';
    $pattern_yt    = '/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=)?([\w-]{11})/';
    $pattern_vimeo = '/(http|https)?:\/\/(www\.|player\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|video\/|)(\d+)(?:|\/\?)/';

    // put lines to array
    $line = explode("\n", $content);

    foreach ($line as $key => $check) { 

        // zero VARS for each line 
        $html       = '';
        $media_type = '';
        $result     = '';
        $_data       = array();
        $_match      = array();

        if( preg_match_all($pattern, $check, $_match, PREG_SET_ORDER) ){

            $_data = $_match[0];

            if(isset($_data[1])){

                // parse url
                $url_x  = $_data[1];
                $_url   = parse_url($url_x);
                $scheme = $_url['scheme'];
                $host   = $_url['host'];
                $path   = $_url['path'];
                $query  = $_url['query'];

                // check for media
                if (preg_match_all($pattern_yt, $_data[1], $result, PREG_SET_ORDER) ){

                    // youtube video
                    $yt_vid     = $result[0];
                    $media_type = 'youtube';
                    $vid_id     = $yt_vid[1];
                    $vid_link   = 'https://www.youtube.com/watch?v='.$vid_id.'';
                    $vid_embed  = 'https://www.youtube.com/embed/'.$vid_id.'?wmode=opaque';
                    $link_text  = 'externer Link zu Youtube';
                    $vid_title  = $_data[2];

                } elseif (preg_match_all($pattern_vimeo, $_data[1], $result, PREG_SET_ORDER) ){

                    // vimeo video
                    $vimeo_vid  = $result[0];
                    $media_type = 'vimeo';
                    $vid_id     = $vimeo_vid[4];
                    $vid_link   = 'https://vimeo.com/'.$vid_id.'';
                    $vid_embed  = 'https://player.vimeo.com/video/'.$vid_id.'';
                    $vid_title   = $_data[2];
                    $link_text  = 'externer Link zu Vimeo';
                }

                // handle media
                if ($media_type=='youtube' OR $media_type=='vimeo') {

                    // cookie handling for theme enfold
                    $vid_emb_denied = $_COOKIE['aviaPrivacyVideoEmbedsDisabled'];

                    if (!$vid_emb_denied) {

                        // get data from yt    
                        if ($media_type=='youtube') {
                            $curl = curl_init("https://www.youtube.com/oembed?url=". $vid_link ."&format=json");
                            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
                            $return = curl_exec($curl);
                            curl_close($curl);
                            $yt_data = json_decode($return, true);
                            $vid_title  = $yt_data['title']<>'' ? $yt_data['title'] : $vid_title;
                        }

                        $html .= "\n".'<div class="video-Wrapper" data-media-site-id="'.$vid_media.'" data-media-key="'.$vid_id.'" style="margin-bottom:1rem;">'."\n";
                        $html .= '    <div class="video-Wrapper-inner">'."\n";
                        $html .= '        <iframe class="mfp-iframe noLightbox" src="'.$vid_embed.'?cc_load_policy=1&hl=De" title="embedded Youtube video" width="560" height="315"  frameborder="0" allow="accelerometer: autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen="true"></iframe>'."\n";
                        $html .= '    </div>'."\n";
                        #if ($vid_name!=$vid_link) {
                            $html .= '    <span class="video-link-text">'.$vid_title.'</span>'."\n";
                        #}
                        $html .= '</div>'."\n";
                    } else {
                        $html .= '<div class="videoWrapper" data-media-site-id="'.$vid_media.'" data-media-key="'.$vid_id.'">'."\n";
                        $html .= '    <div class="videoWrapper-remove">'."\n";
                        $html .= '        <a class="noLightbox" href="'.$vid_link.'" target="_blank" rel="nofollow">'."\n";
                        $html .= '            <button class="video-link-external"><span style="font-size:28px;">Video</span><br>'.$link_text.'</button>'."\n";
                        $html .= '        </a>'."\n";            
                        $html .= '    </div>'."\n";
                        $html .= '    <span class="video-link-text">'.$vid_title.'</span>'."\n";
                        $html .= '</div>'."\n";
                    }

                    // substitude video link
                    $line[$key] = str_replace($_data[0], $html, $check);
                }
            }
        }
    }

    // make content from array
    $content = implode("\n", $line );
    return $content;
}

Die User-Einstellungen, ob er einer Einbettung einer anderen Seite zustimmt, ist völlig unabhängig davon und muss separat gemacht werden.

Das muss zu den Einstellungen (Overlay-Button unten/recht > Einstellungen > Andere externe Dienste) hinzugefügt werden.

Für die Differenzierung ist dann nur der Cookie-Name entscheident.

sooo ... @HerrLehmann

Du wolltest es so haben. Hier ist es -live- in Farbe .... und bunt:

Ich habe den die Einbettung von

• Bildern
• Videos

auseinandergenommen, passende Kategorien definiert und in ein weiteres Plugin gestopft. Dann ist Socialmedia mit dazugekommen, wobei Facebook der erste (funktionale) Seite davon ist.

Die Cookies sind entsprechend angepasst in 

• Soziale Medien
• Videoplattformen

Das ganz habe ich dann zusammengestrickt und eine (weniger als) rudimentäre Oberfläche (im wahrsten Sinne des Wortes) zusammengeworfen.

Na toll .... das ist jetzt ein bug bei den Bildern -.-

Veröffentlicht von: @thoenix

↑

bug bei den Bildern

Fixed. War auch ganz gut so, dass das nochmal überarbeitet wurde. So wie bei Facebook und Videos, könnne nun auch mehrer Bilder in einem Post und auch in einer Zeile sein. Da hat wohl jemand zuvor schluderig gearbeitet. 😱 😋 

noch ein bug .... jetzt wird @<user> rausgefiltert -> nochmal patchen

EDIT: done 🤗 

Mannmannmann. Über fehlenden Komfort wird man sich hier im Wohnzimmer nicht beschweren können. 👍 👍 👍 

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

ist heut nicht mein Tag. 🤣