Magento 2 Social Media – How to Share Product Image and Details on Social Media

magento-2.2.5magento2productsocial-buttons

I want to share product image and details to social media in Magento 2 using addthistool.

We have added http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b30cd59923bb69c js in header part

Phtml

Custom/Module/view/frontend/templates/product/view/social-share.phtml

<div class="st-addthis-custom addthis_toolbox">
<ul class="sharing-links custom_images">
    <li>
        <a class="addthis_button_facebook link-facebook" title="Share on Facebook">
        </a>
    </li>
    <li>
        <a class="addthis_button_twitter link-twitter" title="Share on Twitter">
        </a>
    </li>
    <li>
        <a class="addthis_button_linkedin link-linkedin" title="Share on Linkedin">
        </a>
    </li>
</ul>

Block

Custom/Module/view/layout/frontend/catalog_product_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Catalog\Block\Product\View" name="product.view.addthis.custom.social-share" template="Custom_Module::product/view/social-share.phtml" before="-" />
    </referenceContainer>
</body>

Best Answer

Facebook reads website og meta tags so you need to add og tags in head of your magento

Example tags:

<meta property="og:title" content="My product title"/>
<meta property="og:site_name" content="ABC Site"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.example.com/example.html"/>
<meta property="og:image" content="https://www.example.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/m/k/mke-08-_1_.jpg"/>
<meta property="og:description" content="My product description"/>

Facebook crawler crawls your website and reads these tags from page. And if you want your page to re-crawl then you need to request for re-crawl from this tool:

https://developers.facebook.com/tools/debug/sharing/

Related Solutions

Magento – share product with product image and details on social media websites

As far as I know it is not possible anymore to pass parameters via URL to the share function.

The best practice in my opinion is to implement open graph tags in your website, then facebook is able to extract the correct information. More on open graph tags can be found in the facebook documentation.

https://developers.facebook.com/docs/sharing/best-practices#tags

The most important og tags for your purpose might be the description and the image.

<meta property="og:description" content="MyFavNews is the best source for your favorite news." />
<meta property="og:image" content="http://graphics.myfavnews.com/images/logo-100x100.jpg" />

The upside of the og tags is that they also work if someone post your URL manually on facebook.

Magento – How to show social share icon below product on category page in magento

For your requirement,you need to some modification at module.phtml and Mymodule.php.

Instead of loading all product at myfunction() and you need to send product Object to call from list.phtml and product/view.phtml.

Like: setProduct($project).

<?php
class Companysocial_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
 protected $_product = null;

    public function setProduct($product) {
        $this->_product = $product;
        return $this;
    }

    public function myfunction() {
        return $this->_product;
    }

}

Then add below code at module.phtml:

 $product=$this->myfunction()
$sku = $product->getSku();
$productUrl = $product->getProductUrl();
$productImage = $product->getImageUrl(); ?>

<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>', 'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Google Plus') ?>">Google Plus</a>

<a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($productUrl); ?>&t=<?php echo urlencode($productName); ?>', 'facebook', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Facebook') ?>">Facebook</a>

<a href="javascript:popWin('http://twitter.com/home/?status=<?php echo urlencode($productName . ' (' . $productUrl . ')'); ?>', 'twitter', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Tweet') ?>">Twitter</a>

<a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=<?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($productImage); ?>&description=<?php echo urlencode($productName); ?>', 'pinterest', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Pin it') ?>">Pinterest</a>

Let call this code at list.phtml.

    <?php echo $this->getLayout()->createBlock('mymodule/mymodule')
->setProduct($_product)->setTemplate('mymodule/mymodule.phtml')->toHtml();

You need to call this code below each product in list.phtml

Also you can call share block using below code:

<?php echo
$this->getLayout()->createBlock('mymodule/mymodule')->setProduct($_product)->setTemplate('mymodule/mymodule.phtml')->toHtml();
 ?>

Note that in my process you does not need mymodule.xml