Add a Facebook Button to WordPress without JavaScript and php

Facebook provides a code snippet to implement a facebook button. But to have a button with custom look, like a follower number being displayed as a bubble next to the button, you’re asked to additionaly paste a JavaScript code to the header of your every page. Therefore, you have to implement it into your php files. Here is a way around this.

Menu action in Facebook:

Go to → Settings (menu upper right corner next to notification icons)
Left side menu → Followers → right side: Follower settings

There is a facebook button code like this:

<iframe 
  src="//www.facebook.com/plugins/follow?
  href=https%3A%2F%2Fwww.facebook.com%2FYOUR.USERNAME
  &amp;layout=standard&amp;show_faces=true&amp;
  colorscheme=light&amp;width=450&amp;
  height=80" scrolling="no" frameborder="0" 
  style="border:none; overflow:hidden; 
  width:450px; height:80px;" allowTransparency="true">
</iframe>

It provides a simple follow button code for your facebook profile page. This easy facebook button code does not provide a customization-friendly snippet.

However, the more advanced version wants you to use this:

1. Include the JavaScript SDK

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js
     #xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2. The button itself is only this div (also much more friendly than the iframe from above!).

<div class="fb-follow" 
     data-href="https://www.facebook.com/YOUR.USERNAME"
     data-width="100%" data-layout="button_count" 
     data-show-faces="true">
</div

[Source]

Now it is clear that the last version of the button has the advantage of the more adaptable layout (which you can customize on the facebook page), but you’d have to implement the JavaSrcipt code on every page (that ist, in your php header corresponding to the region right after the <body> tag).

I find this quite annoying, so I find it really nice that unexpectedly the above button works with the facebook layout from the below version, if you just copy one attribute, this one and adapt it:

data-layout="button_count"

The result should look like this:

Just add this to your sidebar by going to:

Appearance (WP Admin) → Customize → Widgets → Sidebar → Add a widget → Text

<iframe src="//www.facebook.com/plugins/follow?
  href=https%3A%2F%2Fwww.facebook.com%2FYOUR.USERNAME&amp;
  layout=button_count&amp;show_faces=true&amp;
  colorscheme=light&amp;width=100&amp;height=80" scrolling="no"
  frameborder="0" style="border:none; overflow:hidden; 
  width:100%; height:80px;" allowTransparency="true">
</iframe>

The adapted attribute is highlighted in this example. As simple as that you have the same look & feel as for the usual JavaScript supported button but without unneccessary additional code. The code above provides a button that shows the follower number as a bubble, a functionality which is normally only provided by the second version and not the first… but, obviously they use the same parameters. Good for us 🙂

This might be interesting for users, who don’t like to implement Jetpack or other social media plugins.

Leave a Reply

Your email address will not be published. Required fields are marked *