I want to share product with product image and details on social media websites

Question

I am working on product share part within Magento. As per link product link only get shared on social website. I want to share product with its image and details.

Answer 1

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.

Answer 2

You can use AJAX to resolve your problem. Edit the /app/design/frontend/current_package*/current_theme*/template/catalog/product/view.phtml

try to find specification section for configurable product there inside the view.php then, add AJAX script to change the code after selecting options for configurable product.

Though, I didn't discussed the actual code snippet, but, the process will definitely do your job.

Answer 3

We use this and it works perfectly:

var facebook = "http://www.facebook.com/dialog/feed?app_id=<?php echo Mage::getModel('facebook/config')?>&";
        facebook += "redirect_uri=<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);?>close.html&";
        facebook += "link="+url+"&";
        //facebook += "display=popup&";
        facebook += "name=<?php echo $description ?>&";
        facebook += "description=<?php if (strlen($productname) > 1){ echo $productname.' > '.urlencode($currentCategory); } else { echo $title; } ?>&";
        facebook += "picture="+image;
        window.open(facebook,"Facebook", "height=400, width=1000");

image and url are variables we get when the customer clicks on the share button.
url is the url of the product the customer wishes to share.
image is the url of the productimage.
All within javascript tags of course.

Answer 4

To share product name,details and image on facebook and Twitter use following methods

Facebook og tag example

<meta property="og:title" content="Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>
<meta property="og:site_name" content="David Walsh Blog"/>
<meta property="og:description" content="Facebook's Open Graph protocol allows for web developers to turn their websites into Facebook "graph" objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is 'recommended', 'liked', or just generally shared."/>

Twitter card example

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://davidwalsh.name/twitter-cards">
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API allows developers to add META tags to their website, and Twitter will build card content from links to a given site.">
<meta name="twitter:image" content="https://davidwalsh.name/wp-content/themes/punky/images/logo.png">

For more information use following links

Twitter facebook