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

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?

score 0 · Accepted Answer · answered Mar 23 '20 at 10:47

0

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.

answered Mar 23 '20 at 10:47

andyrandy

72,880
8
113
130

is there a way to do that in magento 2 without overriding the templates? – Eric Slapstick Mar 23 '20 at 10:48
not sure how it works with magento specifically, maybe this helps: https://magento.stackexchange.com/questions/211020/how-can-i-add-different-meta-open-graphs-for-homepage-and-single-product-pages – andyrandy Mar 23 '20 at 10:50
but this wouldnt allow me to add a custom quote or custom hashtags. There must be an easier way, i hope – Eric Slapstick Mar 23 '20 at 11:12
1

@EricSlapstick you are mixing two different things here. The data about the URL that gets shared - title,description, thumbnail - must be set via the OG meta tags the URL returns. Quote and hashtag are parameters you can dynamically add when you let the user share this URL, they are parameters of the Share dialog, see https://developers.facebook.com/docs/sharing/reference/share-dialog#params_share – CBroe Mar 23 '20 at 11:21

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

1 Answers1