Solved
Share AEM URL in social media
I want to share the URL of aem site page on social media, such as Facebook, LinkedIn, Twitter, etc. It should be display as thumbnail image, title and description?. Is it possible.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
From the looks of it, you shouldn't use the out of the box social share component, as it is depreciated in the latest versions of the WCM Core Components, v3.
So a quick answer, and Nope, it's not out of the box behavior that AEM ships for free. You need to create your own custom implementation.
Create your own implementation of the social feature. Id suggest you to put the implementation code in your own base page component, and then add some author editable fields in the page properties, so you can enable and disable features. Next your sightly would need to expose special meta-data tags which will be used by the social media platform itself.
Just for testing, paste this meta tags (mentioned in the code editor) into the <head> HTML element, view the page as published, then source edit and this is what you are going to have to create as the page is rendered for customers; its probably best for you to hard code these values at first during your development phase, so you know exactly which tags you would need. if you'd like to see a live example, visit this website, https://sourcedcode.com/blog/aem/advancing-your-aem-skills-tips-for-junior-developers. View the page source, and expect all the required meta fields to exist. Once you understand what you are looking at, try to share it on Linkedin, Facebook, and you'll see the magic.
<!-- Facebook Open Graph Tags -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" content="https://sourcedcode.com/storage/2019/09/cropped-aem_logo.jpeg">
<meta property="og:url" content="URL of the Page">
<meta property="og:type" content="website">
<!-- Twitter Card Tags -->
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your Page Description">
<meta name="twitter:image" content="https://sourcedcode.com/storage/2019/09/cropped-aem_logo.jpeg">
<meta name="twitter:card" content="summary_large_image">
<!-- LinkedIn Open Graph Tags -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" content="https://sourcedcode.com/storage/2019/09/cropped-aem_logo.jpeg">
<meta property="og:url" content="URL of the Page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Author Name">
<meta property="article:published_time" content="Publish Date">
<meta property="article:modified_time" content="Modified Date">
<meta property="article:section" content="Section">
<meta property="article:tag" content="Tag">
<!-- LinkedIn Company-specific Tags (for company pages) -->
<meta property="og:company" content="Your Company Name">
<meta property="og:company_id" content="Your LinkedIn Company ID">
<!-- Pinterest Rich Pins (for articles) -->
<meta name="pinterest:rich:pin:title" content="Your Page Title">
<meta name="pinterest:rich:pin:description" content="Your Page Description">
<meta name="pinterest:rich:pin:image_url" content="https://sourcedcode.com/storage/2019/09/cropped-aem_logo.jpeg">
<meta name="pinterest:rich:pin:link" content="URL of the Page">
<!-- Pinterest App-Install Pins -->
<meta name="pinterest:app_name:iphone" content="App Name for iPhone">
<meta name="pinterest:app_name:ipad" content="App Name for iPad">
<meta name="pinterest:app_name:googleplay" content="App Name for Android">
<meta name="pinterest:app_url:iphone" content="URL to App on the App Store">
<meta name="pinterest:app_url:ipad" content="URL to App on the App Store">
<meta name="pinterest:app_url:googleplay" content="URL to App on Google Play">
<!-- Facebook and Twitter require at least the following three tags: title, description, and image -->
<!-- LinkedIn requires at least the following two tags: title and image_url -->
<!-- Pinterest requires at least the following two tags: title and image_url -->
For Facebook Open Graph Tags:
For Twitter Card Tags:
For LinkedIn Open Graph Tags:
- Documentation: https://www.linkedin.com/help/linkedin/answer/46687
- LinkedIn Company Page Guide: https://business.linkedin.com/marketing-solutions/linkedin-pages/get-started
For Pinterest Rich Pins:
- Documentation: https://developers.pinterest.com/docs/rich-pins/overview/
- Pinterest App-Install Pins Documentation: https://developers.pinterest.com/docs/app-occurrence-pins/overview/
You can visit these links to understand more about the individual meta tags and how they work for each social media platform. Replace the "URL to Thumbnail Image," "Your Page Title," and other placeholder values with the appropriate content specific to your website and content.
========
Next, what you'd want to do next is determine which values will be rendered in each of the meta tags, like
<meta property="og:title" content="${currentPage.title}">
<meta property="og:description" content="${currentPage.description}">
<meta property="og:image" content="${page.imageUrl}">
========
PRO TIP: instead of overloading your sightly.html file, you should create backend logic to pull together and generate a hashMap of all the meta fields you need, and then using sightly, to traverse through the map, and render each block on HTML element on the page.
private void initMetadata() {
metadata = new LinkedHashMap<>();
if (socialMediaEnabled) {
WebsiteMetadata websiteMetadata = createMetadataProvider();
put(OG_TITLE, websiteMetadata.getTitle());
put(OG_URL, websiteMetadata.getURL());
put(OG_TYPE, websiteMetadata.getTypeName());
put(OG_SITE_NAME, websiteMetadata.getSiteName());
put(OG_IMAGE, websiteMetadata.getImage());
put(OG_DESCRIPTION, websiteMetadata.getDescription());
if (pinterestEnabled && websiteMetadata instanceof ProductMetadata) {
ProductMetadata productMetadata = (ProductMetadata) websiteMetadata;
put(OG_PRODUCT_PRICE_AMOUNT, productMetadata.getProductPriceAmount());
put(OG_PRODUCT_PRICE_CURRENCY, productMetadata.getProductPriceCurrency());
}
}
}
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.