How to Create a “Link to it” Widget like Google’s John Mueller Suggests

link*

Seemingly every site out there links to several social media sites like Facebook, Twitter or Google+. Social Media widgets are by now standard. Yet

only a tiny fraction of websites has a widget encouraging people to link to itself.

Some of the leading sites do use "link to it" widgets though. Issuu is one prominent example. Even John Muller of Google suggests to use "link to it" widgets to encourage linking. Here's how to add such a widget to your site or blog.

 

John Mueller wants you to copy and paste plus link to it

When John Mueller of Google talked about link building earlier this year he discouraged manual link building but stressed that you need to make your content linkable. You could do it by making sure that your URLs are simple to to "copy and paste". He even suggested to create an "if you like this, this is how you can link to it" widget. His words were largely ignored in this particular case.

Most people misunderstood Mueller's explanation as a "link building is bad" verdict

or simply got angry, confused and defensive. Ever since I was unable to find a proper "link to it" widget that I could use or recommend. I know that some major league sites like Issuu use very nifty "link to it" widgets but couldn't find a WordPress plugin or something to mimic that functionality:

issuu-link-widget

 

DIY "link to it" widget

I decided to make a simple "link to it" widget myself. Although I'm not an active web developer for years I created one in less than half an hour.

It took so long because I had to refresh my ages old JavaScript skills. The code itself is super-simple. Everybody else would have coded in in 2 minutes probably.

You can also use the code on your WordPress blog or virtually anywhere and everywhere. I will show you how in detail below.

What does the "link to it" widget code do? It's nothing fancy. It's mainly a JavaScript that looks the URL up from your browser address bar and then writes it down on your page or post, depending where you choose to include it.

 

It works fine on my WordPress blog

I added it to my WordPress blog over at seo2.us and it worked fine from the start. You can check any of my posts, scroll down to the end of the post and see the result above my comment section:

linktoit-widget-example

As you see above all that this "link to it" widget does is displaying the URL of the post or page you're on and a call to action (CTA) paraphrasing the advice John Mueller gave in his controversial Q&A session:

Do you like this? Then link to it!

In my latest version I added the exclamation mark to make more conversion friendly. The URL is inside of the so called <pre></pre> tag to prevent it from being broken up into two or more lines. It has no stylesheet as of now so that the appearance adapts automatically to your own site layout.

 

John Mueller approved widgets vs unnatural links widgets

john-mu-claps

In case you wonder whether Google will approve of the usage of such widgets you can rest assured. Why do I think so? It's not that that John is aware of my widget and didn't call me out on it yet. It's also not the kid of widget Google disapproves of in general in case you wonder. Yes, Google considers some links from widgets as unnatural links. What kind of widgets are affected by this ruling?

Only widgets with so called rich anchor text used on third party sites are outside the Google guidelines. Especially offtopic links in unrelated widgets.

Let's say you have a weather widget displaying the latest local weather reports which gets used on travel sites but below it there is a link saying "Made by Best SEO Company" and linking to best-seo-company.biz then you have a problem even Houston won't be able to help you with. Then a nofollow link condom might be the solution according to Google.

 

Social Media shares vs backlinks

In our case we only help readers who have websites themselves or like to share the link by mail or on third party sites to copy and paste it. Again, no voodoo or dark magic here. Just a common sense approach that was very popular already 10 years ago, long before the social media button frenzy erupted.

Even today you have to think about it: Do you want people to go to the same bunch of third party services and share your link there

or do you prefer them to add a proper backlink to your content on their own sites and blogs? You are certainly better off in the long run with an incoming link pointing to your site. Social media fame is very short-lived and nofollow links from Twitter or invisible ones from Facebook do not count for Google in most cases. Inbound links can improve your search rankings on Google and beyond for years.

 

Embedding the widget code

How to embed the "link to it" widget? You can copy and paste the code anywhere on your page but ideally it's below the content, otherwise the CTA does not make as much sense. The people need to view the content first to decide whether they like it.

Here is the actual code:

<!-- link to it widget start -->
<script>
// Made by onreact.com - See: http://onreact.com/js/linktoit.html
var url = location.href;
function createWidget(widgetName)
{
	document.getElementById(widgetName).innerHTML = url;
}
</script>
Do you like this? Then link to it! <br>
<span id="linktoit">
<pre><script>createWidget("linktoit");</script></pre>
</span>
<!-- link to it widget end -->

You can also view the latest version of the widget code over on my onreact.com example page. You just have to view the source of the page. In Firefox it's CTRL+U on your keyboard for example. It's bare naked as of now using the default font Times New Roman so don't get discouraged. Again I wanted to keep it as simple and plain as possible.

 

Adding the "link to it" widget to your WordPress blog

add-text-widget

How to add the "link to it" widget to your WordPress blog? On WordPress you need to add a new "Text Widget" to your blog. Ideally you add it below the individual posts.

In my WordPress backend I simply clicked in the left.hand menu "Appearance -> Widgets" then scrolled down to see the last option below "Available Widgets".

After that I chose the third option "After Singular" to place the widget below my actual posts. I refrained from adding a name or title to the widget to keep it simple and not to distract from the CTA and URL.

Then I copy and pasted the widget code which is pretty self-explanatory in case you have some basic HTML and JavaScript knowledge.

after-singular-code

 

Potential issues with the widget you can improve upon

As I'm not a programmer and this widget is really simple as of now there might appear some minor issues with certain use cases and URLs. Luckily you can easily tweak and improve it yourself.

As the widget uses <pre></pre> to prevent line breaks very long URLs might be longer than your content, especially on mobile devices with smaller screens.

Third party tools like Google Analytics and Buffer also love to pollute your URLs with lots of useless parameters only their marketers use to promote their tools and to track their ad performance. For example

Buffer promotes itself inside your URL twice whenever someone shares your post on Twitter using their service.

This is an example of an URL polluted by Buffer:

https://www.stonetemple.com/ello-the-complete-guide-to-the-ad-free-social-network/?utm_content=buffer7d676&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

As you see the promotional tracking parameters are longer than the actual original address. It even adds another website address to yours (here Twitter.com). Thus I use scripts to clean up my URLs so that users and other tools don't get confused. You might need to add such a cleaning script to your site or blog as well. I have explained how it works in an article for Ahrefs recently.

* (CC BY 2.0) Creative Commons image by Yandle

 

LinkToMe – a social share button for links

Christoph here. After reading Tadeusz' draft for this post I couldn't help myself and needed to code something, too. 

The result is LinkToMe: a social share button for links. You can now simply integrate a short snippet of Javascript in your website and you'll get one of those sexy social share buttons – except that this one gets you more links. Here's what it looks like.01_linktome-button

02_linktome-popup

To add LinkToMe to your website, just include the following piece of code into your website: (preferably right before </head>)
<script src="//linktome.linksspy.com/linktome.js" type="text/javascript"></script>

LinkToMe offers your website visitors an easier way to link back to, increasing your referral traffic as well as your visibility in the search results. It automatically strips away the utm_campaign/utm_source/utm_medium variables that get thrown in by Buffer and replaces it with more sane ones, that allow you to exactly track in your Google Analytics how many new visitors you've got through LinkToMe. 

I have a ton of feature ideas in mind for the future, but I also wanted to get this in your hands as soon as possible. So check out the LinkToMe link sharing button homepage for more updates.

Share Button