Embed Facebook Like & Twitter/Tweet Buttons

Want to easily embed standard Twitter and Facebook Like buttons in your WordPress blog, but want to use standard code and not necessarily a clunky plugin that could break? Believe me, I understand. After piecing together data and tutorials from several different sources, I have a method that has works nicely. You don't have to be an engineer, but messing around with a little code shouldn't totally freak you out, either.
Note: You can use this method to both display these buttons in the full blog view, or in an individual post.

1. Grab the Facebook Like Button code

Facebook makes creating and customizing a Facebook Like button pretty easy. Hop on over to their Like button page, and enter these values into the widget:

• URL to like: CHANGETHIS
• Width: 200 (you can change this, depending on the width of your blog posts)
• any other aesthetic options (light/dark, font, etc.)

Then click Get Code button and paste the iframe code somewhere, like in Notepad. The code should look like this (it might be a little different since Facebook is constantly tweaking these sorts of things):

<iframe src="http://www.facebook.com/plugins/

like.php?href=CHANGETHIS&send=false&

layout=button_count&width=200&

show_faces=false&action=like&

colorscheme=light&font=tahoma&height=21" 

scrolling="no" frameborder="0" style="border:none; 

overflow:hidden; width:200px; height:21px;" 

allowTransparency="true"></iframe>

2. Grab the Twitter Button code

This is very similar to the process for getting the embed code for the Facebook Like button. Head over to the Tweet Button page, and fill out the fields as per below:

• 1 - Button: Horizontal count
• 1 - Tweet text: CHANGETHIS
• 1 - URL: CHANGETHIS
• any other changes you'd like to make to the language, recommended people to follow, etc.

You can grab the code immediately below. It will look something like this:

<a href="http://twitter.com/share" class="twitter-share-button" 

data-url="CHANGETHIS" data-text="CHANGETHIS" 

data-count="horizontal">Tweet</a><script 

type="text/javascript" src="http://platform.twitter.com/widgets.js">

</script>

3. Add some div wrappers

First, add some div wrappers to your two embed codes to create one block of code:
<div style="margin: 0 0 10px 0; float: left;">
[Twitter Tweet button embed code - from step #2]
[Facebook Like button embed code - from step #1]
<div style="clear: both;"></div>
</div><br/><br/>

4. Make some substitutions to CHANGETHIS

In your embed codes, you now have 3 instances of CHANGETHIS which you must, um, change. :)

1. TWITTER: data-url="CHANGETHIS" ----change to----- data-url="<?php echo get_permalink() ?>"
2. TWITTER: data-text="CHANGETHIS" ----change to----- data-text="<?php the_title(); ?>"
3. FACEBOOK: ...like.php?href=CHANGETHIS&amp;... ----change to----- ...like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;...

5. Embed in via your Theme Editor

Drop the entire code block in between these two tags in your Single Post (single.php) and Main Index Template (index.php) files when using the Theme Editor:
<?php include 'by_author.php'; ?>
[ENTIRE CODE BLOCK FROM STEP #4]
<div class="entry">
...Because every template is different, you might have to fiddle with the exact location of the code block, but that's generally where you want to put it if you want it between the blog post title and byline, and the body of the post itself.

Tags: blogging blogging tips