Embed Facebook Like & Twitter/Tweet Buttons - WordPress No Plugin
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 (you may have to put http://CHANGETHIS to get Facebook to accept this)
- 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 then select IFRAME from among the subtab options.
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="//www.facebook.com/plugins/like.php?href=CHANGETHIS&send=false&layout=standard&width=200&show_faces=true&action=like&colorscheme=light&font&height=80&appId=96285278221" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" 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:
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>
4. Make some substitutions to CHANGETHIS
In your embed codes, you now have 3 instances of CHANGETHIS (or http://CHANGETHIS) which you must, um, change. :)
- TWITTER: data-url="CHANGETHIS" ----change to----- data-url="<?php echo get_permalink() ?>"
- TWITTER: data-text="CHANGETHIS" ----change to----- data-text="<?php the_title(); ?>"
- FACEBOOK: ...like.php?href=CHANGETHIS&... ----change to----- ...like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&...
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]
...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.