Add The Brand New Facebook Send Button To Your Blog




| 21 comments


Facebook have just created a brand new shiny button you can add to your blog for people to share your content.The button was released just today so it's not even a day old and you can be one of the first to have it on their blog, Yep people will be seeing it for the first time and checking it out on your blog ! So what is the new Facebook button and what does it do ?

We are all used the the Facebook Like Button by now, well this is a Facebook Send Button.When clicked a pop up appears for users to send the page of your blog they are on to their friends.But rather than posting on their wall as with the Like button the are sending by Direct Email.So you can enter the name of any facebook friend and send it to their Facebook Email or you can even enter the Regular Email of someone, for example their Gmail or Yahoo Mail address and the post will be sent to that Email.

How Cool Is That ! In a way it's a regular 'Email This' button with integrated Facebook Email.On a quick note have you activated your Facebook Email ? Go to your Facebook messages page and you will see a link at the top of the page to activate it.

Facebook also had their thinking hats on by making the new send button available in a new side by side combo format with the Like button.So were you have the like button on your blog now you can add the send button right beside it taking up no extra space.


You can try out the Facebook Send Button at the bottom of this and all posts on Spice Up Your Blog.

Now we seen the button and what it does lets add it to your blog.First up there are two ways you can have the button, in a combo with the like button and on it's own.I will give you the code for both and then we can see were to place it on your blog.

Video Tutorial - For extra help We have a video tutorial at the bottom of the post.

Wordpress And Other Blog Platforms - See how you get your send button here :Facebook Developers Send Button

Facebook Like And Send Combo Buttons Code :

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like expr:href='data:post.url' send='true' show_faces='false' width='450'>
</fb:like><a href="http://www.spiceupyourblog.com"><img alt="Best Blog Tips" src="http://img1.blogblog.com/img/blank.gif"/></a>

Standalone Facebook Send Button

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send expr:href='data:post.url'></fb:send><a href="http://www.spiceupyourblog.com"><img alt="Best Blog Tips" src="http://img1.blogblog.com/img/blank.gif"/></a>

Add Your New Facebook Send Button To Blogger


The button can easily be added to your sidebars by pasting the code into a html/javascript gadget.Below i will show you a the two most popular positions on your blog for the buttons.

A. Directly Below The Post Titles At The Top Of All Posts.
B. At The Bottom Below All The Posts.

Add The Facebook Send Button To Your Blogger Posts


Step 1. For Both positions we go to your blogs html page, so in your Blogger Dashboard Click Design > Edit Html and Tick The Expand Widget Templates Box :

Design Edit Html Widget Templates

A - To place the button at the top of your posts Find the following piece of code in your blogs Html and paste the Facebook Button code Directly Below / Under It: (Click Ctrl and F for a search bar to help find the code - More Info

<div class='post-header-line-1'>

If you cant find that look for this :

<div class='post-header-line-1'/>

B. To place the button at the bottom of your posts Find the following piece of code in your blogs Html and paste the Facebook Button code Directly Below / Under It: (Click Ctrl and F for a search bar to help find the code - More Info

<div class='post-footer'>

Or Alternatively Below This Code :

<data:post.body/>

Once you have the code in position save your template and check out your cool new Facebook Send Button.

Video Tutorial




OK as i said this new Facebook Social button has just been released so you can be one of the first to get it.Make sure to check out more of our Facebook Posts and Social Media Posts.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

21 comments:

  1. How did u add blogger comments, disqus comments, facebook comment? i too using disqus comments. Sometime comments are not display in disqus. i need to see in dashboard-> comments.

    Thanks in advance

    Regards
    Hari (http://hari11888.blogspot.com)

    ReplyDelete
  2. This is cool link.. can i implement in my wordpress blog as well.

    ReplyDelete
  3. I did exactly what you said and it didn't show up. I even went and took my like button off, just in case that was the problem. My like button was the iframe code. Any suggestions?

    ReplyDelete
  4. I also just tried your new facebook like button, but it didn't show up either, the old like button showed up. It's like part of the code is missing. Maybe when I copy and paste?

    ReplyDelete
  5. @ Bonnie - That is the code i added here and in the test blog on the video.I had a look at your blog and you have a lot of "Stuff" going on in the sidebars and footer, maybe that is interfering with the code but i cant see how..

    @ Siddharth - I added a link to the post For Wordpress and other Blog Platforms the code i have in the post is for Blogger Users only.

    ReplyDelete
  6. Wow Paul, Your blog's new look is nice, comments with tabs , admin badge,pop up for social bookmarking, everything is just nice. Hope you will write a tut on these too :)

    ReplyDelete
  7. I love this dual button. My question is this. How do I get rid of a tiny square that appears below it? I got it when I first used your "like" button without the "send" and could not figure out why it was there. Now I get it with this dual button feature as well. I do not really know html; just using what you provide and enjoying that. Any ideas? Thanks

    ReplyDelete
  8. It worked perfectly Paul on my 2 blogs - thankyou

    ReplyDelete
  9. @ Rosie - I would never be in doubt it works for you :) I'm glad you like it.

    ReplyDelete
  10. hello paul. can u do tutorial bout facebook comment like urs? comment using facebook, hotmail ... thanks

    ReplyDelete
  11. FINALLY one that works! the others would work but only show when you opened the comments (i'm using disqus in blogger) but this code actually shows the like and share button without having to open the comments up. THANK YOU!

    ReplyDelete
  12. Sheila in SpringfieldMay 4, 2011 at 5:01 PM

    Paul, I have successfully added the facebook like button to my blogger blog. I can't tell who has "liked" my posts though. I can sometimes see the name of one person, but usually it's just a number of likes. I thought maybe this was because the users were not facebook users (no account) but most of my traffic comes thru my facebook posts that link back to my blog. Any thoughts?

    Thanks very much for all your helpful tutorials!

    ReplyDelete
  13. Sheila - You cant actually Like something on Facebook unless you have a Facebook account, as you are putting that Like on your wall.The button will show the names of your friends who have Liked the post the rest of the names will not be visible.I guess once people are liking your content that's great even if you cant see exactly who it is.

    ReplyDelete
  14. Unfortunately I can't make it work also. I did eveything correctly but buttons doesn't show.

    ReplyDelete
  15. the buttons doesnt work also

    ReplyDelete
  16. I have had the like and send buttons you featured on my blog, kuriositas.com - for about a month now. They were working fine until just recently. Now, when I click 'like' nothing seems to happen. It seems to work if other people have already liked the post but not if I am the first.

    Any hints? I really enjoy this enhancement and I think it has increased my traffic, but I do need it to work properly!

    ReplyDelete
  17. Thank you for the tutorial. Everything worked perfectly.

    ReplyDelete
  18. i like bar button this site (bar slide left) could you share code for me?

    Thanks

    ReplyDelete
  19. The HTML codes that you have to find are not present in my Template

    ReplyDelete
  20. nicely explained and interesting! I recently added a facebook fanpage pop out widget in my blogger
    www.amusing-n-funn.blogspot.com

    but it not work well on IE and Opera while I open post page! can anyone tell me how to solve it??

    ReplyDelete
  21. Thanks Paul...super easy ans super cool! I love it. You are a great teacher. I've learned so much from you. Thanks!

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us