Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a custom LinkedIn share button

I need to be able to add sharing functionality to my custom button. I'm not interested with their generator, as I can't change LinkedIn image there. I want to use my own image for the LinkedIn share button.

like image 445
Karol Avatar asked May 23 '12 04:05

Karol


People also ask

How do I add a share button on LinkedIn?

To generate a Facebook Share Button, visit https://developers.facebook.com/docs/plugins/share-button and specify the URL you want people to share as well as the width. Then generate the code, and paste it into your site where you want the button to appear.

How do I share my HTML page on LinkedIn?

Take the URL of the page you are sharing (i.e., example.com, not linkedin.com/share? url=example.com), and input that URL into the following: LinkedIn Post Inspector. This will tell you everything about how your URL is being shared!


4 Answers

Official LinkedIn API for sharing:

https://developer.linkedin.com/docs/share-on-linkedin

Read Terms of Use!

Example link using "Customized URL" method: http://www.linkedin.com/shareArticle?mini=true&url=https://stackoverflow.com/questions/10713542/how-to-make-custom-linkedin-share-button/10737122&title=How%20to%20make%20custom%20linkedin%20share%20button&summary=some%20summary%20if%20you%20want&source=stackoverflow.com

You just need to open it in popup using JavaScript or load it to iframe. Simple and works - that's what I was looking for!

EDIT: Video attached to a post:

I checked that you can't really embed any video to LinkedIn post, the only option is to add the link to the page with video itself.

You can achieve it by putting YT link into url param:

https://www.linkedin.com/shareArticle?mini=true&url=https://www.youtube.com/watch?v=SBi92AOSW2E

If you specify summary and title then LinkedIn will stop pulling it from the video, e.g.:

https://www.linkedin.com/shareArticle?mini=true&summary=youtube&title=f1&url=https://www.youtube.com/watch?v=SBi92AOSW2E

It does work exactly the same with Vimeo, and probably will work for any website. Hope it will help.

EDIT 2: Pulling images to the post:

When you open above links you will see that LinkedIn loads some images along with the passed URL (and optionally title and summary).

LinkedIn does it automatically, and you can read about it here: https://developer.linkedin.com/docs/share-on-linkedin#opengraph

It's interesting though as it says:

If Open Graph tags are present, LinkedIn's crawler will not have to rely on it's own analysis to determine what content will be shared, which improves the likelihood that the information that is shared is exactly what you intended.

It tells me that even if Open Graph information is not attached, LinkedIn can pull this data based on its own analysis. And in case of YouTube it seems to be the case, as I couldn't find any Open Graph tags added to YouTube pages.

like image 135
Karol Avatar answered Oct 10 '22 17:10

Karol


You can make your own sharing button using the LinkedIn ShareArticle URL, which can have the following parameters:

https://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}

You can find the documentation here, just choose "Customized URL" to see the details.

like image 36
Tamer Shlash Avatar answered Oct 10 '22 16:10

Tamer Shlash


Step 1 - Getting the URL Right

Many of the answers here were valid until recently. For now, the ONLY supported param is url, and the new share link is as follows...

https://www.linkedin.com/sharing/share-offsite/?url={url}

Make sure url is encoded, using something like fixedEncodeURIComponent().

Source: Official Microsoft.com Linkedin Share Plugin Documentation. All LinkedIn.com links for developer documentation appear to be blank pages now -- perhaps related to the acquisition of LinkedIn by Microsoft.

Step 2 - Setting Custom Parameters (Title, Image, Summary, etc.)

Once upon a time, you could use these params: title, summary, source. But if you look closely at all of the documentation, there is actually still a way to still set summary, title, etc.! Put these in the <head> block of the page you want to share...

  • <meta property='og:title' content='Title of the article"/>
  • <meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
  • <meta property='og:description' content='Description that will show in the preview"/>
  • <meta property='og:url' content='//www.example.com/URL of the article" />

Then LinkedIn will use these! Source: LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn.

Step 3 - Verifying LinkedIn Share Results

Not sure you did everything right? Take the URL of the page you are sharing (i.e., example.com, not linkedin.com/share?url=example.com), and input that URL into the following: LinkedIn Post Inspector. This will tell you everything about how your URL is being shared!

This also pulls/invalidates the current cache of your page, and then refreshes it (in case you have a stuck, cached version of your page in LinkedIn's database). Because it pulls the cache, then refreshes it, sometimes it's best to use the LinkedIn Post Inspector twice, and use the second result as the expected output.

Still not sure? Here's an online demo I built with 20+ social share services. Inspect the source code and find out for yourself how exactly the LinkedIn sharing is working.

Step 4 - Finding More Social Sharing Services and Their Share URLs

I have been maintaining a Github Repo that's been tracking social-share URL formats since 2012, check it out: Github: Social Share URLs.

Why not join in on all the social share url's?

Social Share URLs

like image 50
HoldOffHunger Avatar answered Oct 10 '22 15:10

HoldOffHunger


Its best to use customize url approach. And its the easiest. Found this one. It will open a popup window and you dont need any bs authentication issues because of w_share and all.

<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://chillyfacts.com/create-linkedin-share-button-on-website-webpages&title=Create LinkedIn Share button on Website Webpages&summary=chillyfacts.com&source=Chillyfacts" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
  <img src="http://chillyfacts.com/wp-content/uploads/2017/06/LinkedIN.gif" alt="" width="54" height="20" />
</a>

Just change the url with your own url. Here is the link http://chillyfacts.com/create-linkedin-share-button-on-website-webpages/

like image 9
Kingshuk Deb Avatar answered Oct 10 '22 15:10

Kingshuk Deb