2

Hi i want to Share my Product in Social Media. Like Facebook,Twitter, Pintrest, Linkden using Custom code.

If any one use custom code for sharing product in social media. share your custom code.

2

you can use share this tool. This will give you icons and sharing links. For sample I have added code here. You can also generate new using this which is free and open source, [http://www.sharethis.com/]
Copy the span tags and place them where you want your buttons to appear in the code.

<span class='st_' displayText=''></span>
<span class='st_instagram' displayText='Instagram Badge'></span>

Copy the script tags and place them inside and at the end of your "head" tag.

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "791bb30f-74a2-4e0f-bde5-5bc23d04c358", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

For now I have just added instagram with this sharethis you can add more.

1
  1. I hope you have already created your custom module. I am using Namespace name as Social and Module name as Mymodule

  2. Go to app/code/Social/Mymodule/view/frontend/templates and create directories catalog/product/view.

  3. Now go to root directory of your Magento. Then navigate to vendor/magento/module-catalog/view/frontend/templates/product/view and find addtocart.phtml file.

  4. Copy addtocart.phtml file to your custom module - app/code/Social/Mymodule/view/frontend/templates/catalog/product/view

  5. Now go to app/code/Social/Mymodule/view/frontend/layout and create catalog_product_view.xml file.

  6. Add following code in your catalog_product_view.xml

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceBlock name="product.info.addtocart">
        <action method="setTemplate">
            <argument name="template" xsi:type="string">Social_Mymodule::catalog/product/view/addtocart.phtml</argument>
        </action>
    </referenceBlock>
    </body>
    </page>
    
  7. For Facebook go to Facebook. You can get code from there. Paste that code to app/code/Social/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml.

  8. For twitter go to Twitter. Follow same method like Facebook.

1

I recently put facebook, twitter, g+ and pinterest into a simple plugin complete with a configuration panel. Other social networks would be trivial to add, either create an issue or make a pull request.

https://github.com/lingwooc/socialButtons-magento2

0

You can share your product view page using javascript also.

<a data-original-title="" href="javascript:void(0);" onclick="share_fb();"><img src="<?php echo $block->getViewFileUrl('images/facebook_counter.png');?>" title="Facebook"></a>

function share_fb() {
            var width = 626;
            var height = 436;
            var yourPageToShare = window.location.href;
            var sharerUrl = 'shareurl' + encodeURIComponent(yourPageToShare);
            var l = window.screenX + (window.outerWidth - width) / 2;
            var t = window.screenY + (window.outerHeight - height) / 2;
            var winProps = ['width='+width,'height='+height,'left='+l,'top='+t,'status=no','resizable=yes','toolbar=no','menubar=no','scrollbars=yes'].join(',');
            var win = window.open(sharerUrl, 'fbShareWin', winProps);
        }

For this you can add facebook meta property in head section.

0

For twitter

<a data-original-title="" href="javascript:void(0);" onclick="share_tweeter();"><img src="<?php echo $block->getViewFileUrl('images/twitter_counter.png');?>" title="Twitter "></a>

function share_tweeter() {
        var width = 626;
        var height = 436;
        var yourPageToShare = window.location.href;
        var sharerUrl = 'https://twitter.com/intent/tweet?url='+encodeURIComponent(yourPageToShare)+"&text=description";
        var l = window.screenX + (window.outerWidth - width) / 2;
        var t = window.screenY + (window.outerHeight - height) / 2;
        var winProps = ['width='+width,'height='+height,'left='+l,'top='+t,'status=no','resizable=yes','toolbar=no','menubar=no','scrollbars=yes'].join(',');
        var win = window.open(sharerUrl, 'fbShareWin', winProps);
}
0

I recently encountered the problem and written same code for this.

Firstly go to https://developers.facebook.com/docs/plugins/share-button and in URL to share option leave it empty.Click on GET CODE and copy that code and paste somewhere.

Now go to magento 2 admin pannel -> content -> Blocks and add new block and paste this code there.

Now go to Widget-> Add New fill the title and other website info needed and in the Layout Updates in the option Display On -> All Product Types and in container add products social links container . Save and flush the cache. You can now see facebook share button below products.

For twitter you will get code somewhat like this <a class="twitter-share-button" href="https://twitter.com/share" data-show-count="false">Tweet<a> . follow this link https://dev.twitter.com/web/tweet-button/parameters add this code in the block made above

However for google + I had to use the following code :

<a href="javascript:(
function(){
var w=480;var h=380;
var x=Number((window.screen.width-w)/2);
var y=Number((window.screen.height-h)/2);
window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href)+'
  &amp;title='+encodeURIComponent(document.title),'','width='+w+',height='+h+',left='+x+',top='+y+',
  scrollbars=no');
  })();"> <img src="give-share-imge-source-here" width="57" height="20" /></a>

For linkedin generate code from this https://www.linkedin.com/publishers url and paste in the block.

Add the code will be added in the block made above. Flush the cache and ta-da.

  • How to add instagram share? – jafar pinjar Oct 3 '18 at 11:27
0
  1. Override Addtocart File.
  2. Add a Facebook Button.
  3. Add Twitter Button.
  4. Add Google+ Button.

go to app/code/ModuleNamspace/Mymodule/view/frontend/templates and add directories catalog/product/view. Now go to app/code/Magebazar/Mymodule/view/frontend and create more directories web/css. https://blog.magebazar.com/create-social-share-buttons-magento-2/ view full description for more.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceBlock name="product.info.addtocart">
      <action method="setTemplate">
        <argument name="template" xsi:type="string">Magebazar_Mymodule::catalog/product/view/addtocart.phtml</argument>
      </action>
    </referenceBlock>
  </body>
</page>
0

Disclaimer: Self-promotion

Note: This answer is not for sharing products from website frontend by customers, rather in backend where admin want to publish their products to social media automatically

Why to re-invent the wheel when such a feature is already implemented and used on hundreds of Magento sites? We developed an extension just for that! - sharing Magento 1.x and 2.x products to Facebook, Twitter and Pinterest. Please check it out: http://magext.com/work/magento-social-networks-auto-poster/

It has many features such as:

  • Auto post products randomly
  • Auto post at certain time interval
  • Only post products which are certain product types
  • Customize message that goes with the product to social media
  • Include/exclude sku, price, URL, image, etc in the posting
  • Post in multiple pages, boards
  • Post your products in batches (hundreds) to social media
  • and many more...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.