Using Social Media Sharing using-social-media-sharing-in-aem-sites

Transcript

Let’s take a look at the social media sharing component that’s part of the of the AEM core component. So I have created a new page on We Retail and this is just a content page. So let’s go to our sidebar components. And as you can see we have a We Retail proxy of the social media sharing component. And this is of course required because you can’t use the AEM core components directly, your AEM sites project needs to proxy them in. So that’s what this We Retail component is. So I’ll simply drag and drop it in and you’ll see that this component is not configured by default. If I click it, normally you’d see a wrench that would allow you to configure this component. So the social media sharing component is a little bit special in that you need to configure it through the page properties and because this page inherits from the AEM core components page component, I have this social media tab. If I click on this, I have a few options. So the core components allows me to share via Facebook and Pinterest so I can simply check the ones that I want to use. I’ll check both. Let’s save and close and see what this looks like.

And now you can see that we have our usual Facebook and Pinterest sharing buttons and this is going to allow end users of our site to share this page on their social accounts. So let’s see what happens. I’m going to go to preview and then click on our Facebook share button. And as you can see I get an error here and this is because Facebook is smart enough to know that you should be sharing pages where the link is pointing to local hosts because they won’t work for anybody except for you. We need to fix this. And this is really easy to do. We simply head over to our AEM web console and search for externalizer. And this is the service that is responsible for exposing links as external. I can locate our publish mapping and I can simply change this to a domain. And I have my etsy host file set up to map www dot example dot com to my local host. And note that I have made this change on author. Head back to our promo page and refresh.

And as you can see, now we’re able to share this page. Do note that this is going to be sharing the publish link to this page even though I click this button not author and it turns out this page is not actually even published so let’s go ahead and do that and try this out on our published instance. So, I’ll cancel this. Publish the page.

Head over to my www example dot com 4 5 0 3. And again the www example dot com is mapped to my local host. Just refresh this to load the page. You can scroll down and let’s click on the Facebook share button. And there we go. We get that error message again. And that’s because we made that externalizer change only on our author instance. So we need to make the same change on our published instance. So again we do that in the very same way.

Refresh our page.

And we can post this to Facebook. So I mean just go ahead and jump over to my Facebook and here you go. Here’s the post that I just made from the AEM author page and it’s pointing back to our example dot com promo page. I click on this. That takes us back. So there you go. Now I have successfully posted this to Facebook and as you can see I have the number reflected here. So it change from zero to one. Let’s go ahead and close this up. So let’s try sharing to Pinterest. I’m gonna go ahead and click on the Pinterest button. And as you can see it selected this image with a green background to share. And as you’ll notice on my actual page this image does not have a green background. So where did this come from. So by default the image that is selected comes from the thumbnail for the page.

So if I head over to my page properties on author, and click on thumbnail, you can see I’ve uploaded a picture of the gloves with the green background and that’s why this is selected.

Alternatively, I can specify a preferred experience fragment variation. So I’ve already created a variation for my comfort gel gloves and I have Facebook and Pinterest variations. The Facebook variation has a picture of the gloves with a blue background and the Pinterest variation has a picture of the gloves with a red background, so I’m going to go ahead and select my Pinterest variation, save and close, and let’s publish these changes to this page. So AEM is smart enough to know that the reference variation and its assets haven’t been published, so it’s going to ask me to publish them. And as you can see here here’s the picture of the gloves with the red background. Let’s go ahead and publish these and we’ll head back over to our AEM publish page and refresh. And I’ll click the save to Pinterest button again. And now as you can see it is selecting the experienced fragments image instead of the pages thumbnail. You can also see that the pin name is set to the pages title so we can change this and we can pin to a board. So go ahead and save this. And we get an error message. And the reason for this is because Pinterest doesn’t allow the posting of your URLs that contain port numbers. So as you can see here, for specifying port 4503 to point to our AEM published instance. And if you think about it this makes sense because for all of the social posting, we want people to be accessing the web content to the public facing domain. What we want to do here is head back to our externalizer, and again this is on my published instance. And ultimately we want to make the same change on our author instance as well. We’ll go back to our externalizer. And we’re gonna get rid of our port number so it’s matching our publisher mode to http://www.example.com. No port. For this to work. You have to make sure that you have dispatchers set up and that is practicing all the requests to your publishers. And luckily I’ve already done that. So if I head back here and I remove :4503 and refresh the page just on example.com, it loads the promotional page going through dispatch. So now let’s try this again.

And we get this message here. Sorry we cannot fetch the image. And this is because Pinterest’s servers is trying to make a call to get this image in order to pin it to the Pinterest board. Because I’m running this on a local instance and I am spoofing www.example.com Of course Pinterest can’t get this image. In a real life scenario, this image would be accessible through a public domain that would go through dispatcher and then hit AEM publish. So Pinterest would be able to collect this image and successfully pin it to my board. And unfortunately because I’m running a local instance, I won’t be able to show you that and you’ll just have to take me for my word that it works. So the last thing I want to show you in the context of the social media sharing component is its use on product pages. So if you remember the promo page that we created is just a simple content page. But if I had back to my AEM author and go to products to products, equipment, biking, and open up my comfort gel gloves page which is a product page and I add the social media sharing component.

And remember I have to enable this through my page properties.

And let’s go ahead and enable both the Pinterest and Facebook share, save our changes and note that we did not specify an experience fragment. So now our component is visible, publisher changes, and now let’s open this on the published instance, switch my domain to example.com so I’m going through my dispatcher, and I’ll click the Pinterest share button.

And you’re going to see that because I’m on a product page, the default image that’s being used is not the page’s thumbnail but it’s the product image. So product pages are special in that they pull this image versus the page’s thumbnail by default. If we had specified a preferred experienced fragment on the page, it would have used that image instead of the product image. All right. There you go. Now you should have a pretty good idea about the ins and outs of the social media sharing component. -