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

社交媒体是促进营销内容的极其有价值的工具。

此外，将您的社交资料嵌入您的网站或博客文章可以帮助增加您社交网络的流量，并最终在平台之间创造品牌一致性。

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.

跳转到的指令:Twitter|Facebook|LinkedIn|YouTube|Pinterest|Instagram

The Ultimate Cheat Sheet for Creating Social Media Sharing Buttons

区分社交媒体分享按钮和社交媒体跟随按钮可让您确定应用于什么目的的按钮。

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.

社交媒体关注按钮

这些按钮有助于促进您的业务在各种社交网络上的存在，并为您提供帮助引起粉丝/关注者对于那些特定的帐户。通过将这些按钮放在您的业务网站上，您可以帮助您为社交媒体帐户创建可见性，并轻松地扩展您的范围。

您可以将这些按钮放在网站上的任何地方，但是我们建议至少将这些按钮放在您的网站的“关于我们”页面和博客的主页/侧栏上。Twitter关注按钮，Facebook关注按钮，LinkedIn Company关注插件和YouTube订阅按钮（以及bob全站app更多），我们将在本文中介绍所有这些都用作社交媒体关注按钮。

Social Media Share 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客户：这些按钮中有许多与集线器's Social Media Apps）

Twitter的社交媒体按钮

1. Twitter Follow Button

What It's For:

Twitter关注按钮非常适合为您的新关注者生成新的关注者Twitter帐户。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:

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

然后，选择“关注按钮”：

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.

在行动中看到它。Follow HubSpot on Twitter:

2. Twitter Share Button

What It's For:

使用此按钮使网站访问者可以轻松共享内容（例如，博客文章，着陆页，其他网页等）与他们的网络在Twitter上，将内容的影响范围扩展到他们的连接。

如何添加共享按钮：

访问https://publish.twitter.com/#并选择“ Twitter按钮”。然后，选择“共享按钮”：

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

自定义后，请抓住新按钮的HTML代码，然后将其放在您希望显示按钮的网站上。

在行动中看到它。推文此博客文章：

3。TwitterHashtagButton

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,查看此博客文章）

例如，如果您正在使用主题标签宣传活动，则可以获取HTML代码并将其放置在活动的网站或注册页面。

How to Add a Twitter Hashtag Button:

访问https://publish.twitter.com/#和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.

在行动中看到它。有关HubSpot的年度营销和销售的推文event,入站:

4. Twitter Mention Button

What It's For:

使用此按钮鼓励网站访问者通过Twitter与您进行交流。将此按钮添加到网站上的页面中，例如您的“与我们联系”，“关于我们”或“帮助”页面。很棒客户支持。

如何添加Twitter提及按钮：

访问https://publish.twitter.com/#和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.

5. Twitter消息按钮

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.

如何添加Twitter消息按钮：

访问https://publish.twitter.com/#， 和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.

在行动中看到它。Send a direct message to HubSpot:

6.预先填充的“ Tweet Tweet”锚文本链接

他们是为了什么：

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 theofficial鸣叫按钮，“ tweet this”链接使营销人员能够对访客在Twitter上分享有关其内容的消息有了更多的控制。

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

幸运的是，有一个很棒的免费工具可以帮助您轻松为内容创建“ Tweet Tweet”链接。只需访问http://clicktotweet.com，输入要填充推文的消息，然后单击“生成新链接”，然后将生成的URL复制到锚文本中（例如，“ tweet the Tweet！”）：

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.

在行动中看到它：

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

鸣叫这篇博客文章！

7. Twitter时间轴小部件

他们是为了什么：

How to Add a Twitter Timeline Widget:

访问https://publish.twitter.com/#，单击“嵌入式时间轴”，然后粘贴您的业务'Twitter个人资料URL，列表或收藏夹。然后获取HTML代码，然后将其放在您要显示小部件的网站上。

看到一个行动：

Social Media Buttons for Facebook

1. Facebook页面插件

What It's For:

Facebook页面插件使您能够在网站/博客上宣传业务的Facebook页面，突出显示其他已经喜欢您的页面的用户，显示您的追随者数量，并在页面上发表最新帖子。

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.

如何添加Facebook页面插件：

要为您的网站生成像Facebook一样的框，请访问https://developers.facebook.com/docs/plugins/page-plugin。包括虚荣URLfor 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.

在行动中看到它：

2. Facebook喜欢按钮

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喜欢按钮, a story also appears on the user'sFacebook时间轴在他们的朋友的新闻中，无论是博客文章还是特定bob官网官方网站的着陆页，都可以返回到您的内容的链接。

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).

如何添加Facebook之类的按钮：

访问https://developers.facebook.com/docs/plugins/like-button要自定义您的喜欢按钮并获取代码（可在HTML5，XFBML，IFRAME或URL中使用），以放置在您的网站上。

在行动中看到它：

3。FacebookShare Button

What It's For:

Facebook's Share按钮的作用类似于类似的按钮（在他们的时间轴和朋友的新闻源中共享您的内容），但它也使用户可以选择在共享链接时向链接添加注释或消息。bob官网官方网站此按钮还允许他们以其他方式共享内容 - 在Facebook组和Facebook消息中，向特定用户共享内容。

How to Add a Facebook Share Button:

生成一个Facebook的年代hare Button, visithttps://developers.facebook.com/docs/plugins/share-button并指定您希望人们共享的URL以及宽度。然后生成代码,并将其粘贴到您的网站中，您希望按钮出现。（（Note: The share button is only available in HTML5 or XFBML, and it requires theJavaScript SDK）

在行动中看到它：

4. Facebook Anchor Text Share Links

他们是为了什么：

有时候，您喜欢使用按钮上使用锚文本共享链接。这些链接易于创建，并且可以添加到网页，博客文章，着陆页或电子书和白皮书等内容中。

如何添加Facebook锚文本共享链接：

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

看到一个行动：

在Facebook上分享此帖子！

更多Facebook按钮：我们在此处涵盖了最常用的社交媒体按钮，但是要在一个地方找到所有Facebook的官方社交媒体插件，请访问https://developers.facebook.com/docs/plugins/。

Social Media Buttons for LinkedIn

1. LinkedIn Follow Company Plugin

What It's For:

LinkedIn关注公司插件，类似于Twbob全站appitter和Facebook的关注按钮，使访问者可以轻松关注您Company Page on LinkedIn。这使您可以增加对LinkedIn的业务范围。

如何添加LinkedIn关注公司插件：bob全站app

访问https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/follow-bob全站appcompany-plugin配置您的按钮。有几种不同的样式可供选择，其中有选项可以显示您上面的追随者数量，或者根本没有。

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.

他们的外观

2. LinkedIn Share Button

What It's For:

添加LinkedIn的共享按钮使访问者可以轻松地与LinkedIn上的连接共享您的内容，无论是博客文章，着陆页还是其他网页。就像Facebook一样并共享按钮和Twitter的Tweet按钮一样，合并此按钮可以帮助您将内容的覆盖范围扩展到LinkedIn受众，并将流量带回您的网站。

如何添加LinkedIn共享按钮：

To create and install this button, visithttps://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin， 和copy the HTML code. Then, swap out thedata-url =“ https://www.linkedin.com”与您希望访问者共享的任何URL，即博客文章访问者正在阅读或他们降落的网页。

lang:%20en_US%20" rel="noopener" target="_blank">

更多LinkedIn按钮：尽管我们涵盖了上面最常用的按钮，但您可以在一个位置找到LinkedIn的所有官方社交媒体按钮和插件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:

此按钮是组织推广其YouTube视频频道的简便方法。您可以将此按钮嵌入主页或“联系我们”页面，以增加您在频道上宣传的内容的覆盖范围并增加订户基础。

如何添加YouTube订阅按钮：

要创建YouTube订阅按钮，请访问https://developers.google.com/youtube/youtube_subscribe_button，输入公司的YouTube频道的名称，选择一个按钮bob全站app大小和颜色主题，确定是否要显示徽标，并确定是否要显示显示或隐藏的追随者计数。然后，将代码复制并粘贴到您的网站上，您希望在其中显示该按钮。

在行动中看到它。订阅HubSpot的YouTube频道：

%20%20