Share Buttons for Dynamic Pages

pavel-schwindt · February 28, 2018, 11:08am

Hey Guys,
i have a client who asked for an automated and free to use “Blogger Interview” Platform.
I created it using wix code and Dynamic Pages. Each dynamic page is an individual interview that has been approved by the admin. (This is working great)
Now i´m looking for Social Share Buttons that can be used for sharing dynamic pages.
The standard ones for facebook and so on are working, but not enough, as my client needs to have more share buttons and also nicer ones.

Here is a dynamic page of the Interviews:
https://www.bloggerinterview.com/InterviewEintragen/bloggerinterview/302/Vanessa-Stolze/2f78a4be-b9cf-45e1-8867-aa159a5c40ba

i need this to be shareable on several social networks. I would be glad if someone can help me out on this.

Greetings

_tal · February 28, 2018, 4:15pm

Hi,
Here’s a link to Facebook documentation to get a Share URL for Facebook (the URL Redirection section).
I recommend trying to create an onClick event and redirect to the Facebook link (described in the documentation) . In order to get the current URL page, you can use the Wix Location API .

Good luck,
Tal.

pavel-schwindt · March 2, 2018, 9:30am

Thank you, i got you. But how do i implement the current page url into the share link of fb. tried everything now. Maybe you have a code example?

Best wishes

system · March 4, 2018, 10:44am

Hi Pavel,
Assuming you have a button called ‘button1’ for sharing, and you want to set it when the page is loaded:

import wixLocation from 'wix-location';

$w.onReady(function (){
    //Some code here...
    $w('#button1').link = `https://www.facebook.com/sharer/sharer.php?u=${wixLocation.url}`;
})

Liran.

pavel-schwindt · March 6, 2018, 11:21am

Thank you Liran, but that is not working. Can´t figure out why.

system · March 6, 2018, 1:05pm

My bad, forgot a $ in the code… updated the code, try again.

Liran.

pavel-schwindt · March 7, 2018, 9:11am

Liran, thank you so much! Sometimes it is easier than we think It worked great

daniel-laera · March 7, 2018, 10:21am

I have an issue, the button works great but when I share the dynamic page in the thumbnail I have the image, but the description doesn’t appear in the thumbnail. Any suggestions? thanks a lot

system · March 7, 2018, 10:23am

I suggest looking for ‘Facebook Sharer Url Parameters’ in google to learn about what parameters can be specified for the url that I specified in the previous message.

Liran.

daniel-laera · March 7, 2018, 10:26am

I’ve already seen the developer.facebook docs but it refers just for the SDK JavaScript and the Iframe. How can I integrate that in Wix Code?

system · March 7, 2018, 10:38am

Currently you can’t integrate the Facebook SDK to Wix Code, this is why I’ve used the ‘Share URL’ option.
Start here .

Liran.

daniel-laera · March 7, 2018, 10:54am

I don’t knwo hot to integrate in my code, also the $w(’ #button1 ').link = https://www.facebook.com/sharer/sharer.php?u=${wixLocation.url}; is a template literals so I really don’t know ho to do that…

system · March 7, 2018, 12:00pm

I’m truly sorry to say that but although I’m happy to give you guys a steer at the right direction, I can’t write your code for you. You can either try to learn some ES6 javascript and the meaning of Facebook Sharer API, or try to hire some help in Wix Arena .

Liran.

daniel-laera · March 7, 2018, 12:56pm

yes, no problem Liran, I’ll figure out how to do that. thanks a lot anyway

pavel-schwindt · March 7, 2018, 5:43pm

Hey Daniel, check if you have the right description settings in the SEO of your editor. Because mine are sharing perfect with the code from liran.

daniel-laera · March 8, 2018, 1:09pm

Thanks you Pavel actually my button works with the Liran code but when I share my article by the dynamic page in the description I only get the dynamic URL of my page (Name Of My Page (Title)) but I’d like to have a customized description, this is my issue

wbburgin · July 8, 2020, 12:58am

Hi everyone - I posted this on the other dynamic page share button feed.

You use the wixLocation API to get the current page and forward it to the sharer url of the social media service you wish.

Page log, corvid:

import wixLocation from “wix-location”

//Facebook
export function image12_click_1(event) { let url = wixLocation.url; //get the current page url wixLocation.to(https:](http://wixlocation.to/) [//www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=${url}); }
//I used an image I found online of the Facebook logo, do it for every social media service you wish. Make sure that you have created the click event by going to “properties” of your page element - important! // this says “kid-directed site” per FB’s policies - you can change if you wish
//copy the dashes before and after the url

//LinkedIn export function image13_click(event) { let url = wixLocation.url; //get the current page’s url wixLocation.to(https:](http://wixlocation.to/) [//www.linkedin.com/shareArticle?mini=true&url=${url}&title=Waves%20Of%20Paper&source=wavesofpaper.com) } //replace my website with yours, the %20 represents a space. For any of these social media directs, you can add specific parameters/objects as needed (title, source, etc.). However, make sure they work on the sites you choose, because certain variables and objects are referenced by different names for certain services.

//twitter export function image14_click(event) { let url = wixLocation.url; //get the current page’s url wixLocation.to(https:](http://wixlocation.to/) [//twitter.com/share?ref_src=${url}&source=wavesofpaper.com) }

You can do the same template for any and all social media with a share url (i.e. practically everything but Instagram and non-web interfaces), but each share url per social media company will be slightly different. Look up their share button APIs if they have one.

You can then make a social media bar and pin it to the screen - it can be designed with whatever logos/size/colors you so choose. Very design-friendly and much better than what’s given.

It took a bit of tinkering around on my part, but I was surprised by how simple the solution is. I really hope this helps you all - don’t hesitate to reach out if you have questions or issues with this. Worked for me & I know how frustrating it can be.

Walker

sparklewebdesigns · June 22, 2022, 4:08pm

i just need share button on mobile which will open share widget as it opens for other apps / websites

yang-jim-j · October 7, 2022, 9:58am

I’m new to Wix.

I want to have social share buttons on my site. I did a test which doesn’t work.

On my test page (which is a dynamic page), I have an icon-button named facebookShare with the onClick event handler facebookShare_click , and here is the code, using the pattern provided by @wbburgin :

$w.onReady(function () {
 import wixLocation from "wix-location"
)}; 

export function facebookShare_click(event) { 
  let url = wixLocation.url; 
  wixLocation.to(`https://www.facebook.com/sharer/sharer.php?u=${url}`); 
  }

When I run the code, nothing happens when I click on the icon. The icon seems to be un-clickable (no little hand/finger shown when I mouse-over the icon).

What’s wrong?

yang-jim-j · October 8, 2022, 5:55pm

I finally got it working now.

Here is my code, if anyone interested:

import wixLocation from 'wix-location';

$w.onReady(function () {
  	let link = wixLocation.url;

	$w("#facebookShare").link = `https://www.facebook.com/sharer/sharer.php?u=${link}`;
	$w("#twitterShare").link = `https://twitter.com/share?url=${link}`;
	$w("#mailShare").link =`mailto:?subject=${link}`;
 
	$w("#facebookShare").onClick(() => {
		$w("#facebookShare").target = "_blank";
	} ); 

	$w("#twitterShare").onClick(() => {
		$w("#twitterShare").target = "_blank";
	} ); 

	$w("#mailShare").onClick(() => {
		$w("#mailShare").target = "_blank";
	} ); 
});

I didn’t include sharing to Facebook Messenger on my site, because I couldn’t make it working, got “Sorry, this content isn’t available right now” on PC, and “Content not found” on mobile.
Anyone who knows how to share to Messenger?