— Hide menu

How to embed official Tweet Buttons on a self-hosted WordPress Blog

How to embed official Tweet Buttons on a self-hosted WordPress blog | [ david teng photography ] | New York & New Jersey Wedding & Portrait Photographer

The official Tweet Button is here!

Greetings, everyone! Genevieve here. :) I was just browsing through one of my favorite sites Mashable where I chanced upon the following article on HOW TO: Use Tweet Buttons as a Blogger or Site Owner. After reading the full post and the comments, I realized no one had posted any instructions for embedding the official Tweet Button code in a blog page template so I commented (accidentally as David so look for the comments from [ david teng photography ] LOL) on how I was able to achieve this. So here you go!

How to embed Tweet Buttons in an individual post

Edit your Single Post (single.php) file. Copy and paste your customized code from http://twitter.com/goodies/tweetbutton as is where you’d like to place your Tweet Button. It’s that easy.

For those of you who aren’t too familiar with code, a good place to put your Tweet Button near the top of your post is after your post title and before your post content. So you would want to paste the Tweet Button code somewhere between the lines that contain the_title(); and the_content(); tags.

How to embed Tweet Buttons in a blog page template

Generate your Tweet Button code at http://twitter.com/goodies/tweetbutton to your liking. Put some placeholder text for the URL (data-url) and Tweet Text (data-text) options so that the code generator will include those options in the code. To properly tweet 1) the permalink to the individual post instead of the URL of your blog page (for example, www.yoursite.com/blog) and 2) the title of the individual post instead of the title of your blog page, you’ll want to edit your placeholder text as follows:

data-url="<?php echo get_permalink($post->ID); ?>"
data-text="<?php single_post_title(); ?>"

Edit your Blog Page Template (page-blog.php) and paste your modified Tweet Button code where you’d like to place it. Again, a good place to put the code is somewhere between the lines that contain the_title(); and the_content(); tags if you’d like your Tweet Button to show up near the top after your post title and before your post content.

I hope you all found this helpful!

  • http://topsy.com/www.davidteng.com/how-to-embed-tweet-buttons-on-a-self-hosted-wordpress-blog/?utm_source=pingback&utm_campaign=L2 Tweets that mention How to embed official Tweet Buttons on a self-hosted Wordpress Blog | [ david teng photography ] | New York & New Jersey Wedding & Portrait Photographer — Topsy.com

    [...] This post was mentioned on Twitter by Scott Wyden Kivowitz, David Teng. David Teng said: By G in reply to @mashable – How to embed Tweet Buttons on self-hosted @WordPress blog http://bit.ly/baZ8na [...]

  • Pete

    Thanks for the tips David.. nice site too!

  • http://raimanau.com Raiman Au

    Thanks Genevieve!

    At first I was confused as to where the put the code you suggest here when I read it. If you could put an example of the entire code with what you wrote inside of it, I think it would become super helpful for the people who are dropping by to this post!

    And if it helps for others dropping by, I wrote a guide on how to add the tweet button using an iframe instead of javascript, which is your focus here =D

    http://raimanau.com/wordpress-tweet-button-iframe-installation-guide