How to create facebook share link on website

How to Create Social Media Buttons for All the Top Social Networks

Social media is an extremely valuable tool for promoting your marketing content.

Additionally, embedding your social profiles on your website or blog posts can help increase traffic to your social networks, and ultimately create brand consistency across platforms.

But with so many social networks providing their own individual sharing and follow buttons, it's often difficult to know which social media button to use for what purpose.

To address this, we've put together a comprehensive guide to help you understand the differences between the share and follow buttons for six of the biggest social networks — Twitter, Facebook, LinkedIn, YouTube, Instagram, and Pinterest — as well as how to implement them on your website, blog, and other content.

The Ultimate Cheat Sheet for Creating Social Media Sharing Buttons

Differentiating between social media sharing buttons and social media follow buttons lets you identify which type of button you should be using for what purpose.

It's the first step in understanding the nuances of all the various social media buttons available to you. Let's clear that up right now.

Social Media Follow Buttons

These buttons serve to promote your business' presence on various social networks and help you generate fans/followers for those particular accounts. By placing these buttons on your business' website, you can help to create visibility for your social media accounts and easily extend your reach there.

You can put these buttons anywhere on your website, but we recommend at least placing these buttons on your website's 'About Us' page and your blog's homepage/sidebar. The Twitter Follow Button, Facebook Follow Button, LinkedIn Company Follow Plugin, and YouTube Subscribe Button (and more) that we'll cover in this article all serve as social media follow buttons.

Social Media Share Links/Buttons

These links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks. Adding these buttons to your content allows you to expand the reach of your content to new audiences and generate new visitors back to your website.

You should add social media sharing links/buttons to every piece of content you create, including landing pages, web pages, individual blog articles, email content, etc. The Tweet/Share Button, Facebook Like and Share Buttons, and LinkedIn Share Button (and more) that we'll cover in this article all serve as social media sharing buttons.

Now, let's dive into the most important social media buttons available for each of the top six social networks. (HubSpot customers: Many of these buttons come out of the box with HubSpot's Social Media Apps.)

Social Media Buttons for Twitter

1. Twitter Follow Button

What It's For:

The Twitter Follow Button is great for generating new followers for your Twitter account. Users can start following you on Twitter with just one click -- without ever having to leave your site.

How to Add a Twitter Follow Button:

Visit https://publish.twitter.com/# and select "Twitter Buttons" to customize your button's featured account (i.e. the account you want people to follow).

Then, select "Follow Button":

Finally, copy and paste the HTML code it generates where you want the button to appear on your website.

Alternatively, click "set customization options" above the embed link if you'd like to further customize aspects like language, or size of button.

See it in action. Follow HubSpot on Twitter:

Follow @hubspot

2. Twitter Share Button

What It's For:

Use this button to enable site visitors to easily share content (e.g. blog posts, landing pages, other web pages, etc.) with their networks on Twitter, extending the reach of your content to their connections.

How to Add a Share Button:

Visit https://publish.twitter.com/# and select "Twitter Buttons". Then, Choose "Share Button":

We recommend adding your company's Twitter username to increase your account's reach and generate new followers.

Once customized, grab the HTML code for your new button and place it on your site where you want the button to appear.

See it in action. Tweet this blog post:

3. Twitter Hashtag Button

What It's For:

This button is great for encouraging visitors to tweet about certain hashtags you're promoting, like for events or specific marketing campaigns. Add these buttons to pages for these campaigns or events to spread and promote the event and its hashtag. (For more information about hashtag use, check out this blog post.)

For instance, if you're promoting an event with a hashtag, you can grab the HTML code and place it your event's website or registration page.

How to Add a Twitter Hashtag Button:

Visit https://publish.twitter.com/# and click "Twitter Buttons" to customize your hashtag button. Then select "Hashtag Button". Next, you can either customize or copy-and-paste the code as-is into your website.

See it in action.

Tweet about HubSpot's annual marketing and sales event, INBOUND:

4. Twitter Mention Button

What It's For:

Use this button to encourage website visitors to communicate with you via Twitter. Add this button to pages on your site like your 'Contact Us,' 'About Us,' or 'Help' pages. It's great for customer support.

How to Add a Twitter Mention Button:

Visit https://publish.twitter.com/# and click "Twitter Buttons" and then "Mention Button" to customize your button. Then grab the HTML code and paste it into your website's HTML where you want the button to appear.

See it in action. Tweet a message to HubSpot:

5. Twitter Message Button

What It's For:

Use this button to helps users connect with you via a private direct Twitter message. This is another great Twitter button to add to your site's 'Contact Us' or 'Customer Service' pages so customers can easily connect with you for problem-solving.

How to Add a Twitter Message Button:

Visit https://publish. twitter.com/#, and click "Twitter Buttons" and "Message Button" to customize your button. Then grab the HTML code and paste it into your website's HTML where you want the button to appear.

See it in action. Send a direct message to HubSpot:

Message @HubSpot

6. Pre-populated 'Tweet This' Anchor Text Links

What They're For:

Have you ever wanted to create an anchor text link that pre-populates a specific Twitter message for your visitors to share? We call these links 'Tweet This' links, and at HubSpot, we use them in blog articles a lot to make sharing content easier.

Usually, these tweet links are used on landing pages to promote offers using specific messaging, and within content itself such as in blog posts. Similar to the official Tweet Button, 'Tweet This' links enable marketers to have more control over the message a visitor shares about their content on Twitter.

How to Add a 'Tweet This' Anchor Text CTA:

Luckily, there's a great, free tool to help you easily create 'Tweet This' links for your content. Simply visit http://clicktotweet.com, enter the message you want to populate the tweet and click "Generate New Link", and then copy/paste the generated URL into your anchor text (e.g., "Tweet This!"):

As a best practice, include a URL in the tweet message to direct people back to the original piece of content you're trying to promote, and be sure to shorten the URL to save room for the tweet copy. It's also a great idea to include your business' @username in the tweet to help increase reach.

See it in action:

(Remember, you can customize the anchor text however you like.)

Tweet This Blog Article!

7. Twitter Timeline Widget

What They're For:

Twitter's Timeline widget allows you to embed your entire business' Twitter profile onto your website, so users can see all recent Tweets right from within your website.

How to Add a Twitter Timeline Widget:

Visit https://publish.twitter.com/#, click "Embedded Timeline", and paste your business' Twitter profile URL, lists, or favorites. Then grab the HTML code and place it on your website where you want the widget to display.

See one in action:

Social Media Buttons for Facebook

1. Facebook Page Plugin

What It's For:

The Facebook Page Plugin enables you to promote your business' Facebook Page on your website/blog, highlight other users who have already Liked your page, display your follower count, and feature recent posts on your page.

The box also allows visitors to like your Facebook Business Page with just one click -- without leaving your site -- enabling you to promote your Facebook presence and easily increase your page's Likes.

How to Add a Facebook Page Plugin:

To generate a Facebook Like Box for your website, visit https://developers.facebook.com/docs/plugins/page-plugin. Include the vanity URL for your Facebook Page as well as your customization preferences. Then generate the code (available in HTML5, XFBML, IFRAME, or a URL), and place it on your website where you want it to appear.

See It in Action:

2. Facebook Like Button

What It's For:

Facebook's Like Button is a button that enables users to easily give your content a virtual thumbs up. By clicking the Like Button, a story also appears on the user's Facebook Timeline and in their friends' News Feeds with a link back to your content, whether it's a blog post or a specific landing page.

Use this button to make it easy for visitors to endorse your content and share it with their Facebook connections, but keep in mind this button doesn't allow them to add personalized messages to links before sharing them. To allow users to add a personalized message, use the Facebook Share Button (see below).

How to Add a Facebook Like Button:

Visit https://developers.facebook.com/docs/plugins/like-button to customize your Like Button and grab the code (available in HTML5, XFBML, IFRAME, or a URL) to place on your website.

See it in action:

3.

Facebook Share Button

What It's For:

Facebook's Share Button acts similarly to the Like Button (sharing your content on their Timeline and in friends' News Feeds), but it also gives users the option of adding a comment or message to the link when sharing it. This button also allows them to share the content in other ways -- in Facebook Groups and in Facebook Messages to specific users.

How to Add a Facebook Share Button:

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. (Note: The share button is only available in HTML5 or XFBML, and it requires the JavaScript SDK.)

See it in action:

4. Facebook Anchor Text Share Links

What They're For:

There may be times when you prefer to use an anchor text share link over a button. These links are easy to create and can be added to web pages, blog articles, landing pages, or within content like ebooks and whitepapers.

How to Add Facebook Anchor Text Share Links:

To create your own Facebook share links, replace the orange section of the URL, below, with the URL of the content you want to promote. Then link the full URL to the anchor text you want to appear in your content.

http://www.facebook.com/share.php?u=hubspot.com

See One in Action:

Share This Post on Facebook!

More Facebook Buttons: We've covered the most commonly used social media buttons for your business here, but to find all of Facebook's official social media plugins in one place, visit https://developers.facebook.com/docs/plugins/.

1. LinkedIn Follow Company Plugin

What It's For:

The LinkedIn Follow Company Plugin, similar to Twitter and Facebook's follow buttons, makes it easy for visitors to follow your Company Page on LinkedIn. This enables you to increase your business' reach on LinkedIn.

How to Add a LinkedIn Follow Company Plugin:

Visit https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/follow-company-plugin to configure your button. There are a few different styles to choose from, with options to show your follower count above, to the right, or not at all.

Next, copy the HTML script, replacing the "data-id=1337" part with your own company's ID number. You can find this under the admin section of your company page.

How They Look

2. LinkedIn Share Button

What It's For:

Adding LinkedIn's Share Button enables visitors to easily share your content with their connections on LinkedIn, whether it be a blog post, a landing page, or another web page. Like Facebook's Like and Share Buttons and Twitter's Tweet Button, incorporating this button can help extend the reach of your content to the LinkedIn audience and drive traffic back to your site.

How to Add a LinkedIn Share Button:

To create and install this button, visit https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin, and copy the HTML code. Then, swap out the data-url="https://www.linkedin.com" with whichever URL you'd like visitors to share, i.e. the blog post visitors are reading or the web page they've landed on.

More LinkedIn Buttons: Although we've covered the most commonly used buttons above, you can find all of LinkedIn's official social media buttons and plugins in one place at https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins?context=linkedin/consumer/context.

Social Media Buttons for YouTube

1. YouTube Subscribe Button

What It's For:

This button is an easy way for an organization to promote their YouTube video channels. You can embed this button on your homepage or 'Contact Us' page to increase the reach of the content you promote on your channel and to increase your subscriber base.

How to Add a YouTube Subscribe Button:

To create a YouTube Subscribe Button, visit https://developers.google.com/youtube/youtube_subscribe_button, enter the name of your company's YouTube channel, select a button size and color theme, decide whether you want to display your logo, and decide whether you want to display your follower count shown or hidden. Then, copy and paste the code onto your website where you'd like the button to appear.

See it in action. Subscribe to HubSpot's YouTube channel:

Social Media Buttons for Pinterest

1. Pinterest Follow Button

What It's For:

Just like the other popular social networks, Pinterest also offers a Follow Button to enable you to promote your Pinterest presence and generate new followers for your account.

How to Add a Pinterest Follow Button:

Visit https://developers.pinterest.com/tools/widget-builder/?type=follow, and configure your button by typing in your Pinterest account's URL and account name. Once you input that information it will automatically generate the code, which you can paste into your website.

See it in action. Follow HubSpot on Pinterest:

HubSpot

2. Pin It Button

What It's For:

This is Pinterest's share button, enabling users to share your content on Pinterest and expand its reach. The Pin It button is great for visual content. Place these buttons next to images, infographics, and other visual content on your site.

How to Add a Pin It Button:

Visit https://developers.pinterest.com/tools/widget-builder/?type=pin to create your Pin It Button. Paste in the pin's URL and pin size. Then, copy the generated embed code to use on your website.

See it in action. Pin this blog post:

More Pinterest Buttons: Other Pinterest widgets include a Profile Widget for showing a preview of your pins, a Board Widget for showing off specific pinboards, and a Pin Widget for showing off specific pins. Build them at https://business.pinterest.com/en/widget-builder.

Social Media Buttons for Instagram

1. Adding Instagram Profile to Your Website

What It's For:

Instagram offers a "View on Instagram" badge for organizations to promote their accounts on their blogs and websites. The badge also helps organizations promote their social media accounts without web visitors having to navigate using their mobile devices. The badges keep visitors looking at your content and engaging with you on the same web browser.

How to Add an Instagram Icon:

Most popular website builders, including HubSpot, WordPress, and Wix, come with social media icons, including Instagram, to easily embed into your site. From there, you'll simply want to link the icon out to your business' Instagram account (http://www.instagram.com/yourusername).

Alternatively, there are third-party plugins that enable you to embed your entire Instagram feed. Some options include Powr and Juicer. It's important to note, you might not want to embed your feed into your website since it might dissuade users from checking you out on Instagram. In that case, simply having an Instagram icon linking to your profile is the best option.

How They Look:

(This is how the button looks on HubSpot.com, but you can design your own to match your website's aesthetic.)

Note to Sharers: Social Media Terms of Service

Before modifying social media buttons on your website, take a look at the Terms of Service for Facebook, Twitter, LinkedIn, Pinterest, YouTube, and Instagram. Modifying logos and branding could result in your website being penalized, so when in doubt, use the exact logos populated by the widgets we've listed above. Happy sharing!

Editor's Note: This post was originally published in December 2011 and has been updated for accuracy and comprehensiveness.

Topics: Images

Don't forget to share this post!

javascript - how to create a Facebook share button with only a share link?

Ask Question

Asked 2 years, 5 months ago

Modified 2 years, 5 months ago

Viewed 766 times

I want to create Twitter and Facebook share buttons. I only want create share links because I don't want to take the buttons they provide from their docs. For Twitter this was really easy because it only expects one url parameter

(I'm using VueJs so I can pass in variables)

<a :href="`https://twitter.com/intent/tweet?text=${shareText}`">Share</a>

where the shareText is just a property combining the page title and page url ${this.title} ${encodeURI(window.location.href)}. From the Facebook docs https://developers.facebook.com/docs/plugins/share-button/ I was not able to find information about how to create a share link without downloading Facebook packages.

How can I create the equivalent for Facebook?

Update

From the comments I took this link Facebook share link without JavaScript for more information. I think there is no way I can share a text with a link so I try to stick with the link only. This is what I have so far

<a :href="`https://www. facebook.com/sharer/sharer.php?u=${encodeURI(window.location.href)}`">Share</a>

In my application the generated sample link would look like

https://www.facebook.com/sharer/sharer.php?u=http://localhost:8080/users/1

When clicking on it the Facebook page opens up and shows this error message

So how can I fix it?

javascript
html
facebook

Sign up or log in

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

per person page, post, profile or group post

Active links to user profiles are quite common in Facebook posts. What are these links for? How to create them? We will talk about this in detail in the proposed review.

Content:

What is a label?
Links in publications
- Facebook secret
Links to group and page
Links in comments
Link to photo
Label setting

What is a label?

An active link is called, according to Facebook terminology, a "tag". Users often meet such labels:

in the texts of posts;
in headers of various publications;
on images;
in the comments.

The way a link to a Facebook user profile is created and the range of users available for designation depend primarily on where the link is placed. nine0003

When a user is tagged in posts, photos, or comments, they receive a notification. In addition, the friends of this user also see the publication or photo in which he was tagged.

Links in publications

In Facebook posts, tags are placed in the text or in the header. To generate a label, you must know under which nickname the selected user is registered in the social network.

Basic method:

Enter the @ sign and after it, without a space, enter the user's nickname.
Wait for the drop-down list with matches to appear and select the required profile.
You have received an active link to the profile of the mentioned user.

You don't need the @ sign to get a link to the personal profile of the mentioned user in the mobile app. Just write the person's nickname correctly and select his profile from the drop-down list. You can do the same on the desktop version of Facebook, but this feature does not work in all browsers. nine0003

Facebook Secret

There is another way to embed a link to a user profile in a post. Moreover, the method is little known and with a rather interesting effect. A link to the user's profile will appear as a thumbnail of their page.

To do this, go to the profile of this user and copy the link to the profile from the address bar in the following format: https://www. facebook.com/username (often an ID number is indicated at the end of the link).

This link is inserted into the text of the post, and as a result, a thumbnail appears in the form of a user profile header. The thumbnail is an active link to the profile, by clicking on which you can “visit” the user. nine0003

Links to a group and page

But for links in posts or comments to pages or communities, the @ sign is required. In the text of the post, you can refer to any user of the social network, regardless of his presence or absence in the friend list. That is, any user can mark any user.

There is another way to get an active link to a user's profile for a post.

Create a post. nine0008
Click on the inscription "Tag friends" located at the bottom of the working window.

When the line “Who are you with?” appears, enter the user's nickname from your friend feed and select it from the drop-down list.
In the process of publishing a post, its header is generated, where the author's nickname, the name of the page or group are required. If the author of the post mentioned a friend, then his name will be indicated next to the author's name. For example: Andrey Andreev with Olga Smirnova. nine0008

Links in comments

Generating a link to a user profile in a comment is very easy. It will appear if you write your own comment in response to another user's comment by clicking "Reply".

If in the process of communication you just need to contact a user, then @ is entered, and then the nickname of this user, and as a result an active link is obtained.

Link to photo

You can also tag any social network user on the photo. Tags are placed on photos in albums and in publications with photos. nine0003

Album:

Go to your profile.
In the "Photos" section, find the "Albums" tab.
Click on "+Create Album".
Enter the name of the album and, if necessary and desired, its description.
If you need to add co-authors from the friend list, do it using the appropriate option.
Upload your media files (photos and videos) and click "Tag People".
Tag those in the published photos. If a photo of the place where an event took place that is significant for you and one of your friends is posted, then as a reminder of this, you can click on any place in the photo and mark the people related to it. nine0008
In co-authorship, as a rule, albums are created about events with several participants: it can be a trip, a party, a solemn event. All participants in this event who have their own multimedia content can add it with their own comments.

Tip: When linking to someone's Facebook profile, be sure that that user won't mind. This is especially true for photographs. A person may consider his image unsuccessful. Or, for some reason, do not want to advertise their presence in any place or event. nine0003

How to tag photos in posts:

Create a new post.
Upload a photo, wait for the icons to appear.
Click Edit on mobile or Mark on desktop.
Select the faces and enter the names of friends, the system will find them, and you will have to choose from the options.
Save your changes and publish the post.

Tags with links to Facebook user profiles are also made on previously published photos. To do this, click on the "ellipsis" icon in the upper right corner and go to content editing. nine0003

Photos posted by other users can be tagged with a link to your profile if you are in the images. However, this is allowed if this option is open in the privacy settings of the user who posted the photo. If marks are allowed to be set, then they do it through the “Mark on photo” option.

Setting up tags

Tags with active links to user profiles are a very good and useful component of Facebook. But there is also a “reverse side of the coin”: this option is also used to the detriment, spreading offensive, defamatory or false information about someone. Therefore, you need to protect yourself so as not to become injured during any bad events. nine0003

How to protect yourself:

Go to your profile and click on the triangle icon in the upper right corner.
Go to "Settings", and from there - to the "Chronicle and Tags" section.
In the "Tags" subsection, select the desired settings: "Who can see the posts in which you are tagged" - everyone, friends, friends of friends, or just me.
In "Verification" set the mandatory verification of all posts where someone tries to tag with a link to your profile. nine0008

How to remove an unwanted tag:

Somewhere on Facebook, a tag that you don't want has appeared in a post. What to do? Firstly, ask the author of the publication to remove the tag or remove the entire post if you think that there is offensive content that discloses confidential information or a lie is posted. If the first method is not available, remove the tag yourself by clicking on the "ellipsis" next to the post. Or complain about the post and give the administration the opportunity to protect your interests. nine0003

Facebook basics: how to link to a friend's profile? | Network | Society

29.05.2012 20:05

Marina Purim

Estimated reading time: 2 minutes

213405

Photo: www.globallookpress.com

Type an @ sign and start typing the person's name. For example, @Ksenia... A list of all your friends who have typed letters in their first or last name will drop out. nine0003

Choose the one you need, click on his name - the link is ready!

You can, of course, write text before and after the link. You can shorten the first and last name of a person to one name, you just need to erase the last name by placing the cursor at the end of the link.

Moreover, you can mention a person both in posts and in comments. This is especially true if you want to reach out to one of the people who commented on your post. Then he will definitely not miss your remark in the discussion and will come to read it. nine0003

Many people mention friends on Facebook if they want to get their attention. For example, you post a link to an interesting piece of news and ask a colleague on Facebook, what do you think about it? In the general flow of messages, he might have missed your appeal, but he will definitely come and read it.

But do not abuse these marks, because by mentioning a person, you make your post available for reading by his friends too. Perhaps not all of them want to know that you go to coffee on Thursdays with your mutual friend Ivanov.