I need to add a “share” button to be able to share my product images, text and links to a facebook post and instagram post. And there are so many plugins to choose from so I wonder if you guys have any suggestions on a good one?
It is a Web app - PWA app, not an app on App Store or Google Play that I have.
Thanks.
Hi Manmade,
I am also facing same problem. Have you got any solution for it. I am also searching it everywhere but not found solution yet.
Awaiting your reply.
Hi Virendra_Rathod
I tested a couple of jquery plugins but ended up just sharing to FB.
The important thing was Facebook for me and the only thing you can do nowadays is to share og information so I ended up with this.
First I tought that I could just have the og info in my index page and then change it with some js code but since FB is taking the info from the server and not the client, that is not an option, unless you change the info server side. Just so you know.
First create a app id on FB.
This is in the page that you share from in the head code.
<meta property="fb:app_id" content="xxxxxxx" />
<meta property="og:title" content="Some title" />
<meta property="og:description" content="Some descrition" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com" />
<meta property="og:image" content="https://yourdomain/image1200x630.jpg" />
<meta property="og:image:secure_url" content="https://yourdomain/image1200x630.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="850" />
<meta property="og:image:height" content="315" />
<meta property="og:image:alt" content="some alt text" />
<meta property="og:locale" content="sv_SE" />
Then the button in the same page.
<a href="javascript: void(0);" onclick="mySharePopup('https://yourdomain.com/thepagetoshare.html');" ><i class="icon f7-icons sharelink" title="Share to Facebook">square_arrow_up</i></a>
And the js code. It opens a centered window.
function mySharePopup(myURL) {
var myWidth=650
var myHeight=650
var left = (screen.width - myWidth) / 2;
var top = (screen.height - myHeight) / 4;
//if you want to add some params to the URL that loads after it has been shared
myRedirect=myURL+'&fbpopup=yes'
myRedirect=encodeURIComponent(myRedirect)
myURL=encodeURIComponent(myURL)
//to close the window
closemyredirect=encodeURIComponent("https://yourdomain.com/closefacebooksharewindow.html")
var newwindow = window.open('https://www.facebook.com/dialog/share?app_id=xxxxxx&display=popup&redirect_uri='+closemyredirect+'&href='+myURL, 'Share on Facebook', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=' + myWidth + ', height=' + myHeight + 'px, top=' + top + ', left=' + left,'_blank');
return false;
And the closefacebooksharewindow.html file.
<script>window.close()</script>
I hope it is what you are looking for 
1 Like
Hi Manmade,
Thanks for reply. Let me check on that.