Facebook-Share with open graph custom Title, Image, Description not showing (Magento 2)

Question

Im trying to get open graph sharing running in Magento 2. When sharing url looks like this: https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0 https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0

My Function looks like this:

define([
    'jquery',
    'underscore'
], function ($, _) {
    'use strict';

    $.widget('intersales.shareFB', {
        options: {
            url: null,
            quote: null,
            img: null
        },
        _create: function(){
            var self = this;
            self._bindSubmit();
        },
        _bindSubmit: function () {
            var self = this;
            $(this.element).click(function(e){
                e.preventDefault();
                self._share();
            });
        },
        _share: function(){
            console.log('sharing url' + ' ' + this.options.url);
            console.log('sharing img' + ' ' + this.options.img);
            var self = this;
            FB.ui({
                method: 'share_open_graph',
                action_type: 'og.shares',
                action_properties: JSON.stringify({
                    object: {
                        'og:url': this.options.url,
                        'og:title': 'Test Titel',
                        'og:description': 'test description',
                        'og:image:url': this.options.img
                    }
                })
            }, function(response){
                if (response && !response.error_message) {
                    // then get post content
                    alert('successfully posted. Status id : '+response.post_id);
                } else {
                    console.log('Something went error.');
                }
            });
        }
    }
    );
    return $.intersales.shareFB;
});

Fun thing is, when shared the link is correct but it doesnt show the image, the title or the description. I kinda dont want to set the oh tags in page, because its magento and i dont want to override the exsisting templates.

Im kinda new to magento and want/need to write a module, that enables social-media sharing in product detail page. My goal is to do that with twitter and facebook. I started doing that for facebook but its kinda too complicated. All i want is to share the product with a custom text, title and the product image (maybe hastags) Can anyone get me to the right path?

Answer 1

Those parameters do not work for dynamic OG tags anymore, they were just a workaround earlier. The only way to change OG tags for sharing is to change them in he original page source. Facebook will pick them up automatically.