Follow Me on Twitter CTA on Ghost and Wordpress

| web | programming | javascript |

The other day I read a post on Hacker News about premature optimization in web application development. This was an excellent post in its own right, but one thing that jumped out at me was the call to action from the author to follow him on Twitter at the end of his post. I liked that it was subtle, simple, and effective  (I followed him on Twitter). Naturally, I stole this idea for my own blogs. This method uses the Follow Button provided by Twitter. In this post, I will show you how to add your own “Follow Me on Twitter” Call to Action on  your own Wordpress or Ghost blog.

Wordpress

I used the Bottom of Every Post Wordpress Plugin because I found that hacking the main wordpress loop caused my CTA to show up at the very bottom of a page rather than at the end of the post content. In addition, I made a small change to this plugin to make sure that it only appears on single posts rather than on the home page. Edit bottom-of-every-post/bottom_of_every_post.php from the Wordpress Plugins Editor and update the method to be:
if( is_single() && file_exists( $fileName )){

/* open the text file and read its contents */

$theFile = fopen( $fileName, “r”); $msg = fread( $theFile, filesize( $fileName )); fclose( $theFile );

/* detect the old message in code to try and eradicate my name and # showing up on strange websites that are run by lazy people */

if( $msg == “<p>Call for an estimate 724-498-1551<br><a href="mailto:[email protected]">[email protected]</a></p>” ){ $msg = “<p>Thank you for installing the Bottom of every post WordPress plugin. To find out how to change or remove this message, read <a href="https://wordpress.org/extend/plugins/bottom-of-every-post/installation/">the instructions</a>.</p>”; }

/* append the text file contents to the end of the_content */ return $content . stripslashes( $msg ); } else{

/* if the_content belongs to a page or our file is missing the result of this filter is no change to the_content */

return $content; }

The key here is
is_single()
Next, edit bottom-of-every-post/bottom_of_every_post.txt and add your call to action. Mine looks like this.
<p>
 If you made it this far, you should probably follow me on twitter. :) 
 <a class="twitter-follow-button" href="https://twitter.com/levlaz"> Follow @levlaz</a>
</p>

<script>window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = “https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);

t._e = []; t.ready = function(f) { t._e.push(f); };

return t; }(document, “script”, “twitter-wjs”));</script>

You only need to replace your twitter username in the above example and it should work as is.

I used ghosts code-injection tool to get this to work for every page. I added the following two scripts to the Blog Footer.

<script> 
 article = document.getElementsByClassName('post-content');
 child = document.createElement('p');
 cta = '<p class="follow"> If you read this far, thank you! Follow me on Twitter to stay up to date on what the fuss is all about.<br />';
 link = '<a class="twitter-follow-button" href="https://twitter.com/tralevnet"> Follow @tralevnet</a></p>'
 child.innerHTML = cta + link;
 article[0].appendChild(child);
</script>

<script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = “https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);

t._e = []; t.ready = function(f) { t._e.push(f); };

return t; }(document, “script”, “twitter-wjs”)); </script>

In the example above you need to change your call to action as well as your twitter username for it to work. I also added a custom style to the Blog Header
<style> 
.follow {
 line-height: 1.5;
 width: 50%;
 padding: 15px;
 border: dashed 1px lightgrey;
 font-size: smaller;
 color: #555;
 font-family: sans-serif;
 font-weight: bold;
 }

.twitter-follow-button { margin-top: 10px; } </style>

That's pretty much it. You can go wild with the style to your hearts content. I like this simple CTA and I am excited to see how effective it is on my own blogs.

Thank you for reading! Share your thoughts with me on mastodon or via email.

Check out some more stuff to read down below.

Most popular posts this month

Recent Favorite Blog Posts

This is a collection of the last 8 posts that I bookmarked.

Articles from blogs I follow around the net

Supermicro NVIDIA GB200 NVL72 System at Computex 2024

We checked out the Supermicro NVIDIA GB200 NVL72 rack at Computex 2024. This is a prime example of why power is becoming such a big deal The post Supermicro NVIDIA GB200 NVL72 System at Computex 2024 appeared first on ServeTheHome.

via ServeTheHome July 22, 2024

Forum

Community is one of the main topics I touch on here. My community, my social media is an email and iMessage, but I thought I could do more. I did such an experiment last year and I quit soon after. I don't think I was ready for it. Today I still don&#…

via Michal Zelazny July 21, 2024

Weekly Update 409

It feels weird to be writing anything right now that isn't somehow related to Friday's CrowdStrike incident, but given I recorded this video just a few hours before all hell broke loose, it'll have to wait until next week. This week, the issue…

via Troy Hunt July 21, 2024

Generated by openring