A few weeks ago, I wrote about adding a Tweet button to a self-hosted WordPress blog, and followed up by writing about using a little CSS trickery to align the Tweet button (thanks to Alex Coles). Whilst I was implementing the Tweet Button, I also went about putting a Facebook Share button on each post.
There are plug-ins to do this for me but why use a plugin when the answer is just a single lines of code in two files within the template?
In the same paragraph as the Tweet button (i.e. styled with the same class), I used this code, generated using the Facebook Share Button generator:
This time, the code is identical for both index.php and single.php as, unfortunately, Facebook doesn’t seem to give me any control over the title of the link (it just takes the </code> tag from the page). <a href="http://askville.amazon.com/add-Share-Facebook-button-webpage/AnswerViewer.do?requestId=1539369">There is another method, using query string parameters in the URL</a> but I chose to stick with Facebook’s recommended method.</p>
<p>Incidentally, I chose to Share, rather than <a href="http://developers.facebook.com/docs/reference/plugins/like">Like (which can be implemented by following these guidelines)</a> because they have subtly different purposes and <a href="http://daggle.com/facebook-button-facebook-share-keeping-1792">each is represented in a slightly different manner (as Danny Sullivan describes in his post on the subject)</a>. After reading Danny’s post, I agree that Share is best for linking to a single post, whilst Like is more suited to the site as a whole (someone might <em>Like</em> markwilson.it and <em>Share</em> one or more posts from the site).</p>
</div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<div class="taxonomy-post_tag is-style-post-terms-1 is-style-post-terms-1--2 wp-block-post-terms"><a href="https://www.markwilson.co.uk/blog/tag/social-networking" rel="tag">Social Networking</a><span class="wp-block-post-terms__separator"> </span><a href="https://www.markwilson.co.uk/blog/tag/wordpress" rel="tag">WordPress</a></div>
</div>
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);">
<nav class="wp-block-group alignwide is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-9b36172e wp-block-group-is-layout-flex" aria-label="Post navigation" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)">
<div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="https://www.markwilson.co.uk/blog/2010/09/the-effects-of-sunscreen-on-volkswagenaudi-paintwork.htm" rel="prev">The effects of sunscreen on Volkswagen/Audi paintwork</a></div>
<div class="post-navigation-link-next wp-block-post-navigation-link"><a href="https://www.markwilson.co.uk/blog/2010/09/preparing-images-for-projection-in-photography-club-competitions.htm" rel="next">Preparing images for projection in photography club competitions</a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div>
</nav>
</div>
<div class="wp-block-comments wp-block-comments-query-loop" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)">
<h2 class="wp-block-heading has-x-large-font-size">Comments</h2>
<div id="respond" class="comment-respond wp-block-post-comments-form">
<h3 id="reply-title" class="comment-reply-title">Leave a Reply<small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2010/09/adding-a-facebook-share-or-like-button-to-a-self-hosted-wordpress-blog.htm#respond" style="display:none;">Cancel reply</a></small></h3> <form id="commentform" class="comment-form">
<iframe
title="Comment Form"
src="https://jetpack.wordpress.com/jetpack-comment/?blogid=29247765&postid=2024&comment_registration=0&require_name_email=0&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=mystery&greeting=Leave+a+Reply&jetpack_comments_nonce=74013d1698&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_GB&jetpack_version=15.4&iframe_unique_id=3&show_cookie_consent=10&has_cookie_consent=0&is_current_user_subscribed=0&token_key=%3Bnormal%3B&sig=8fe60042fa482d391d9aa4be7b42ea1852f7a588#parent=https%3A%2F%2Fwww.markwilson.co.uk%2Fblog%2F2010%2F09%2Fadding-a-facebook-share-or-like-button-to-a-self-hosted-wordpress-blog.htm"
name="jetpack_remote_comment"
style="width:100%; height: 430px; border:0;"
class="jetpack_remote_comment"
id="jetpack_remote_comment"
sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups"
>
</iframe>
<!--[if !IE]><!-->
<script>
document.addEventListener('DOMContentLoaded', function () {
var commentForms = document.getElementsByClassName('jetpack_remote_comment');
for (var i = 0; i < commentForms.length; i++) {
commentForms[i].allowTransparency = false;
commentForms[i].scrolling = 'no';
}
});
</script>
<!--<![endif]-->
</form>
</div>
<input type="hidden" name="comment_parent" id="comment_parent" value="" />
<p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed.</a></p>
</div>
</div>
<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<h2 class="wp-block-heading alignwide has-small-font-size" style="font-style:normal;font-weight:700;letter-spacing:1.4px;text-transform:uppercase">More posts</h2>
<div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow">
<ul class="alignfull wp-block-post-template is-layout-flow wp-container-core-post-template-is-layout-3ee800f6 wp-block-post-template-is-layout-flow"><li class="wp-block-post post-9247 post type-post status-publish format-standard has-post-thumbnail hentry category-site-notices tag-php tag-wordpress">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://www.markwilson.co.uk/blog/2026/01/excuse-the-basic-appearance-whilst-i-try-to-improve-site-reliability.htm" target="_self" >Excuse the basic appearance whilst I try to improve site reliability</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2026-01-13T22:11:36+00:00"><a href="https://www.markwilson.co.uk/blog/2026/01/excuse-the-basic-appearance-whilst-i-try-to-improve-site-reliability.htm">Tuesday 13 January 2026</a></time></div>
</div>
</li><li class="wp-block-post post-9240 post type-post status-publish format-standard has-post-thumbnail hentry category-technology tag-artificial-intelligence tag-datacentre-design tag-digital-transformation tag-generative-ai tag-natural-resources tag-predictions">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://www.markwilson.co.uk/blog/2026/01/2026-anti-prediction-generative-ai.htm" target="_self" >My 2026 anti-prediction: we won’t see an endless rise in generative AI</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2026-01-06T18:47:01+00:00"><a href="https://www.markwilson.co.uk/blog/2026/01/2026-anti-prediction-generative-ai.htm">Tuesday 6 January 2026</a></time></div>
</div>
</li><li class="wp-block-post post-9223 post type-post status-publish format-standard has-post-thumbnail hentry category-business category-inane-waffle tag-marketing tag-thought-leadership">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://www.markwilson.co.uk/blog/2025/11/rethinking-thought-leadership.htm" target="_self" >Rethinking thought leadership</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2025-11-26T18:43:33+00:00"><a href="https://www.markwilson.co.uk/blog/2025/11/rethinking-thought-leadership.htm">Wednesday 26 November 2025</a></time></div>
</div>
</li><li class="wp-block-post post-9212 post type-post status-publish format-standard has-post-thumbnail hentry category-inane-waffle tag-community tag-society">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://www.markwilson.co.uk/blog/2025/11/a-sense-of-community-on-remembrance-sunday.htm" target="_self" >A sense of community, on Remembrance Sunday</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2025-11-09T12:56:16+00:00"><a href="https://www.markwilson.co.uk/blog/2025/11/a-sense-of-community-on-remembrance-sunday.htm">Sunday 9 November 2025</a></time></div>
</div>
</li></ul>
</div>
</div>
</main>
<footer class="wp-block-template-part">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)">
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow">
<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e5edad21 wp-block-group-is-layout-flex">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><h2 class="wp-block-site-title"><a href="https://www.markwilson.co.uk/blog" target="_self" rel="home">markwilson.it</a></h2>
<p class="wp-block-site-tagline">get-info -class technology | write-output > /dev/web</p>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div>
</div>
</div>
<div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-570722b2 wp-block-group-is-layout-flex">
<nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Blog</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">About</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">FAQs</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Authors</span></a></li></ul></nav>
<nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Events</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Shop</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Patterns</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Themes</span></a></li></ul></nav>
</div>
</div>
<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-91e87306 wp-block-group-is-layout-flex">
<p class="has-small-font-size">Twenty Twenty-Five</p>
<p class="has-small-font-size">
Designed with <a href="https://en-gb.wordpress.org" rel="nofollow">WordPress</a> </p>
</div>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/blog/*"},{"not":{"href_matches":["/blog/wp-*.php","/blog/wp-admin/*","/blog/uploads/*","/blog/wp-content/*","/blog/wp-content/plugins/*","/blog/wp-content/themes/twentytwentyfive/*","/blog/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="module" src="https://www.markwilson.co.uk/blog/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=b0f909c3ec791c383210" id="@wordpress/block-library/navigation/view-js-module" fetchpriority="low" data-wp-router-options="{"loadOnClientNavigation":true}"></script>
<script defer src="https://www.markwilson.co.uk/blog/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1762968775" id="akismet-frontend-js"></script>
<script src="https://c0.wp.com/c/6.9/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async data-wp-strategy="async" fetchpriority="low"></script>
<script id="wp-block-template-skip-link-js-after">
( function() {
var skipLinkTarget = document.querySelector( 'main' ),
sibling,
skipLinkTargetID,
skipLink;
// Early exit if a skip-link target can't be located.
if ( ! skipLinkTarget ) {
return;
}
/*
* Get the site wrapper.
* The skip-link will be injected in the beginning of it.
*/
sibling = document.querySelector( '.wp-site-blocks' );
// Early exit if the root element was not found.
if ( ! sibling ) {
return;
}
// Get the skip-link target's ID, and generate one if it doesn't exist.
skipLinkTargetID = skipLinkTarget.id;
if ( ! skipLinkTargetID ) {
skipLinkTargetID = 'wp--skip-link--target';
skipLinkTarget.id = skipLinkTargetID;
}
// Create the skip link.
skipLink = document.createElement( 'a' );
skipLink.classList.add( 'skip-link', 'screen-reader-text' );
skipLink.id = 'wp-skip-link';
skipLink.href = '#' + skipLinkTargetID;
skipLink.innerText = 'Skip to content';
// Inject the skip link.
sibling.parentElement.insertBefore( skipLink, sibling );
}() );
//# sourceURL=wp-block-template-skip-link-js-after
</script>
<script src="https://c0.wp.com/p/jetpack/15.4/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script>
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", {"v":"ext","blog":"29247765","post":"2024","tz":"0","srv":"www.markwilson.co.uk","j":"1:15.4"} ]);
_stq.push([ "clickTrackerInit", "29247765", "2024" ]);
//# sourceURL=jetpack-stats-js-before
</script>
<script src="https://stats.wp.com/e-202604.js" id="jetpack-stats-js" defer data-wp-strategy="defer"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.markwilson.co.uk/blog/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://www.markwilson.co.uk/blog/wp-includes/js/wp-emoji-loader.min.js
</script>
<script type="text/javascript">
(function () {
const iframe = document.getElementById( 'jetpack_remote_comment' );
const commentIframes = document.getElementsByClassName('jetpack_remote_comment');
window.addEventListener('message', function(event) {
if (event.origin !== 'https://jetpack.wordpress.com') {
return;
}
if (!event?.data?.iframeUniqueId && !event?.data?.height) {
return;
}
const eventDataUniqueId = event.data.iframeUniqueId;
// Change height for the matching comment iframe
for (let i = 0; i < commentIframes.length; i++) {
const iframe = commentIframes[i];
const url = new URL(iframe.src);
const iframeUniqueIdParam = url.searchParams.get('iframe_unique_id');
if (iframeUniqueIdParam == event.data.iframeUniqueId) {
iframe.style.height = event.data.height + 'px';
return;
}
}
});
})();
</script>
</body>
</html>