Sharing certificates via social media

[steffen74]

Write a customer announcement
You can share your certificate now directly on LinkedIn or Xing from the EduHub platform. Just click on the button next to the certificate download button and it will be added as certificate to your profile.

Describe the solution you'd like
Implementation of a new button component named ShareCertificate to post the a certificate from the current course on LinkedIn or Xing. Input of the component are the certificateURL and the name of the social media platform (xing, linkedIn), it shall be shared. On the right of each certificate download button (see component frontend-nx/apps/edu-hub/components/CourseContent/index.tsx, line 170), two new buttons should be placed - one to share the certificate via LinkedIn and one to share it via Xing. The two buttons should be relatively small in width and have the same design as the download button.

[StoneCoder123]

Hi @steffen74! I would like to work on this issue. Please assign it to me and mark it as hacktoberfest-accepted. It would be much appreciated.

[steffen74]

Hi @StoneCoder123 , nobody else is currently working on the issue. Feel free to start working on it and do it pull request.

[steffen74]

Instructions by ChatGPT:

Implementing a feature to add certificates to LinkedIn profiles requires a two-step process. First, you need to create a URL for each certificate that follows LinkedIn's Add to Profile URL format. Second, you'll need to create a React component that users can click to add their certificates to their LinkedIn profiles.

1. LinkedIn's Add to Profile URL Format: LinkedIn provides a way for users to add certifications to their profile through a special URL format. The URL has the following format:

   https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=NAME&organizationId=ORG_ID&issueYear=YEAR&issueMonth=MONTH&certUrl=CERT_URL&certId=CERT_ID

   • CERTIFICATION_NAME: The name of the certification task (this can be a simple string like "Certification").
   • NAME: The name of the certification.
   • ORG_ID: The organization ID from LinkedIn's database.
   • YEAR and MONTH: The year and month the certification was issued.
   • CERT_URL: The URL of the certificate.
   • CERT_ID: A unique identifier for the certificate.

   You'll need to replace the placeholders in the URL with the actual data for each certificate.

2. React Component: Create a React component that users can click to add their certificates to their LinkedIn profiles. Below is a basic example:

   import React from 'react';
   
   function AddToLinkedInButton({ cert }) {
     const linkedInUrl = `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${cert.name}&organizationId=YOUR_ORG_ID&issueYear=${cert.issueYear}&issueMonth=${cert.issueMonth}&certUrl=${cert.url}&certId=${cert.id}`;
   
     return (
       <a href={linkedInUrl} target="_blank" rel="noopener noreferrer">
         <button className="btn-linkedin">
           Add to LinkedIn
         </button>
       </a>
     );
   }
   
   export default AddToLinkedInButton;

   In this component:

   • cert is a prop that contains the certificate data.
   • linkedInUrl constructs the LinkedIn Add to Profile URL using the cert prop.
   • A button is rendered that, when clicked, opens the LinkedIn Add to Profile page in a new tab.

You may need to gather the necessary data and ensure it's formatted correctly to populate the URL. Additionally, ensure that you replace YOUR_ORG_ID with your organization's LinkedIn ID.

[steffen74]

import React, { FC } from 'react';

interface IProps {
  cert: {
    name: string;
    id: string;
    issueMonth: string;
    issueYear: string;
    url: string;
  }
}

const AddToLinkedInButton: FC<IProps> = ({ cert }) => {
  const linkedInUrl = `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${cert.name}&organizationId=5186963&issueYear=${cert.issueYear}&issueMonth=${cert.issueMonth}&certUrl=${cert.url}&certId=${cert.id}`;

  return (
    <a href={linkedInUrl} target="_blank" rel="noopener noreferrer">
      <button className="btn-linkedin">Add to LinkedIn</button>
    </a>
  );
}

export default AddToLinkedInButton;