With all the different social media sites out there (Facebook, Twitter, Google+, LinkedIn, Pinterest, and more), it can be hard to figure out the best way to link to your different profiles and get people to like, follow, etc. The matter is complicated further by deciding whether to use interactive buttons, images, or just plain text links to your profiles. There’s so many choices to make, and so many methods, so let’s dive in.

First, you need to choose which method you’re going to use. If you’re going to just use a text link, it’s pretty easy. Just find the link to your profile, and wrap it in a standard HTML link. If you’re going to use an image, it gets a little more complicated. You’ll need to find an image to use. Then just use a link like before around the image. Don’t know how to find the link to your profile? All the information is below!

If you’re going to use an interactive button, it gets a little more complicated. The good news is that I’ve included instructions for each social network below! Just click through to the full post, choose the network(s) you want to use and go!

(You may need to scroll left and right to see all of the code examples.)

Facebook (Personal Profile)

Finding Your Profile’s Link

Finding your profile’s link is pretty easy for Facebook! Just visit your profile and the link is in your browser’s address bar!

Finding Your Facebook Profile Link

It’s really this easy. Click to make it big.

Making It Interactive

Facebook offers a large number of interactive buttons they call “Social Plugins.” For making it easy for people to subscribe to you on Facebook with one click, the best option is the subscribe button. They offer a number of customizable options on their code builder that makes it easy to get it looking how you want it. Just customize all the options and then click “Get Code.” This is where it can get a little confusing. If you can use the HTML5 or XFBML versions, those work best, but if you’re looking for the easiest way, you should choose the IFRAME option. For the IFRAME option, you simply need to copy and paste some code directly into your site.

Here is an example of the code that allows you to subscribe to my updates, without showing faces:

<iframe style="border: none; overflow: hidden; width: 450px;" src="//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D1585320076&layout=standard&show_faces=false&colorscheme=light&width=450" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Facebook (Page)

Finding Your Page’s Link

The easiest way to get to your page’s link, is to visit it and then copy the link from your browser’s address bar.

Finding Your Facebook Page Link

Like this, but with a page instead of a profile. Click to make it big.

Making It Interactive

Facebook’s Like Box is probably the best way to get people to like your page. With one click, without even leaving your site, they can like your page and get updates. Just visit their code builder to choose from a variety of options. They can see faces of people who like the page, the most recent updates, and more! (Facebook claims that 292 pixels wide is the minimum width, but I’ve seen it work with less.) Just customize all the options and then click “Get Code.” This is where it can get a little confusing. If you can use the HTML5 or XFBML versions, those work best, but if you’re looking for the easiest way, you should choose the IFRAME option. For the IFRAME option, you simply need to copy and paste some code directly into your site.

Here is an example of code that will puts a like box without the timeline stories in a page:

<iframe style="border: none; overflow: hidden; width: 292px; height: 290px;" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fcarynesplin&width=292&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Twitter

Finding Your Profile Page Link

It’s pretty easy. Your link is twitter.com/ followed by your username. Or you can visit your profile and copy and paste.

Twitter Profile Link

Twitter Profile Link

The Follow Button

Twitter has several different buttons available, but the relevant one here is the Follow button. When someone clicks on it, they’ll follow you on Twitter, or, if they aren’t signed in yet, they’ll be prompted to sign in and follow you. All without leaving your page. There’s only a few options for customization, and it’ll produce some simple code like this:


<a href="https://twitter.com/<span class=">lazyrivr" class="twitter-follow-button" data-show-count="false">Follow @lazyrivr</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,<span class="hiddenSpellError" pre="">fjs</span>=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

lazyrivr” class=”twitter-follow-button” data-show-count=”false”>Follow @lazyrivr

Displaying Your Tweets On Your Site

If you want an integrated experience and are using a CMS or blog, you’ll want to find a plugin for your CMS or blog. There’s tons of them out there. If you just want something you can copy and paste, you’ll want Twitter’s Profile Widget. Simply customize everything about it (size, colors, number of tweets, and more), and click “Finish & Grab Code.” It’ll spit out something like this:


<script charset="utf-8" type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script><script type="text/javascript">// <![CDATA[
new TWTR.Widget({
 version: 2,
 type: 'profile',
 rpp: 4,
 interval: 30000,
 width: 250,
 height: 300,
 theme: {
 shell: {
 background: '#333333',
 color: '#ffffff'
 },
 tweets: {
 background: '#000000',
 color: '#ffffff',
 links: '#4aed05'
 }
 },
 features: {
 scrollbar: false,
 loop: false,
 live: false,
 behavior: 'all'
 }
}).render().setUser('lazyrivr').start();
// ]]></script>

Google+

Google+ is the most complicated of all the buttons to use. It requires you to insert code into the head section of your webpage. To get the code you need, visit the Profile Badge Config Tool (or, if you’re doing it for a page, go to the Page Badge Config Tool). If you’re logged in, it’ll automatically fill in your profile ID. If not, it’s the mess string of numbers in the URL when you visit your profile.

Google+ URL

That long number is what you need, whether it’s a profile or page.

There are a few options, icon or badge, and under the advanced options you can choose a light or dark color scheme. The code it will give you will look something like this:

<!-- Place this tag in the <head> of your document -->
<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/114748106867967351684" rel="author" width="300" height="69"></g:plus>

 

The first part needs to be put in the head of the document. If you’re using a dynamic website, like a WordPress powered one, you should try to put it into your template or insert it using a plugin. Then, you put the second part in wherever you want the badge to appear.

Inserting a badge for a page is almost the same. Just visit the Google+ page to get the code to put into the config tool.

LinkedIn

A note first: LinkedIn works best when you connect with people you know or have worked with in real life. The Member Profile link would probably work best to direct potential employers to your profile (for example, on a digital resume or portfolio).

To add a “Member Profile plugin” to your webpage, go to this page. The page works best when you have logged into LinkedIn before visiting it. Otherwise you’ll need your public profile link, which can be hard to find. They give you several different options. The inline mode displays your basic information in a nice big box. The other options give you a little button that displays the same information as the inline option when you either hover over the button or click on it (depending on the options you set). Pick your options and then click “Get Code.” It’ll look something like this:


<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/pub/andrew-bell/4/197/8a1" data-format="inline" data-related="false"></script>


Just copy and paste it into your page.

Pinterest

Pinterest is the new kid on the block, and while being with the times on most things, they are behind the times on creating a quick way to follow people and boards or display recent pins without visiting the Pinterest website. Their “follow button” is nothing more than a link and an image. However, here’s the instructions (at least until they make some new goodies).

Go to their goodies page, and scroll down to the “‘Follow Button’ for Websites (there’s no shorter link to get there yet). Click on which image you want to use and it’ll show you the code in a box. It’ll look something like this:


<a href="http://pinterest.com/lazyrivr/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" alt="Follow Me on Pinterest" width="169" height="28" /></a>

Follow Me on Pinterest

Having issues? Have more questions? Feel free to ask in the comments; I’ll help if I can!

Also, if you see that something’s gone out-of-date, be sure to tell me! I’ll update this post as changes happen!

Share This