Blogger 'Share on Facebook' Code
If you have a blogger blog, and want your visitors to easily share your posts with their facebook friends, you can make blogger automatically place a 'share on facebook' link at the end of each post. Add this code after the body of the post:
for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked): <b:if cond='data:post.url'>
<br/>share <a expr:href='data:post.url' title='permanent link'>this</a>: <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'>facebook</a>
</b:if>
for classic templates: share <a href="<$BlogItemPermalinkURL$>" title="permanent link">this</a>: <a href="http://www.facebook.com/share.php?u=<$BlogItemPermalinkURL$>">facebook</a>
and you'll also have a permalink before the 'share on facebook' link. You can make facebook sharing look good: specify the picture, title and description facebook will use; apply the tips on your post pages.
Where to put the code: It depends where you want the share links to appear, probably below the post. Likely after the <$BlogItemBody$> for classic templates and somewhere in the <div id='main-wrapper'> code for layouts. The specifics depend on your template/layout and your preference.
You can also add a link for sharing and saving for other social networking and social bookmarking sites too. If you'd like the code for that, please read the comments.
Labels: blogger, social networking, web coding
posted by David August at 10:52 AM
share this:
36 Comments:
Hi there,
Do you know of anyway to display these links as the favicons for the associated webpages instead of the "share on facebook" text?
Displaying favicons can't easily be done inline on a web-page; the favicon file format doesn't usually get rendered on a page the way a gif, jpg or png file does. What you can do is replace the "facebook" text that's the link text in the code above with an img tag using any image you want. You have to first download the image and host it somewhere online yourself, like photobucket.com (unless you get too much traffic for photobucket to work). Your best bet is to host the image in your own web hosting space, and than link to it from there.
I'd like that cote. . . .for the expanded tool bar.
Your code for facebook worked perfectly, thanks. I'd love to see the same thing for digg, stumble upon, etc...
Hi,
I'm new to this so please forgive me if this is a stupid question.. :)
I copied your code for layouts (though I couldn't find a check box for Expand Widget Templ.? I only find this in the editing for the blog itself) but when I publish the post, there's text only. "Facebook" get underlined when I put the mouse cursor over it, but it's like there's no link.
Hope you understand what I'm talking about... :)
If you did not find the "Expand Widget Templates" check box, were you in the "Edit HTML" tab of the "Layout Tab"? If you weren't, that could be the issue.
>the expanded tool bar
Not sure to what this refers.
Where in the html do you paste that code?
It depends where you want the share links to appear, probably below the post. Likely after the <$BlogItemBody$> for classic templates and somewhere in the <div id='main-wrapper'> code for layouts. The specifics depend on your template. If you want help specific to your blog only, please contact me directly.
Would love the other codes. Thanks. And thanks for posting this.
There are likely more than 100 social bookmarking and sharing sites; I won't cover them all, you can probably figure most of them out yourself with some trial and error.
delicious:
for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked):
<b:if cond='data:post.url'>
<br/>share <a expr:href='data:post.url' title='permanent link'>this</a>: <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title'>delicious</a>
</b:if>
for classic templates:
share <a href="<$BlogItemPermalinkURL$>" title="permanent link">this</a>: <a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">delicious</a>
Hope that helps.
i am looking to add the facebook share on my blog but not having any luck
Sammy, I wrote in the post what my general recommendations are, so if it still doesn't work for you that's no fun at all. If you'd like to discuss how I might be able to help your personally, please contact me directly.
hi David,
thanks. i got it finally after 3 days trying to understand HTML. you see, i'm not a blog expert, just started trying out. but, i mus say David, your tips worked! thanks... :)
Thanks David. Your HTML code worked superbly!
Hi,
I managed to include the function and changed the text to a facebook-logo. The problem is that my template always draws borders around images, so it does not look very good for me as the image is somewhat higher than the text etc. Is there some way to disable the border just for this image? I tried border='0' but it does not work.
Thank you in advance!
Depending on which version of HTML/XHTML code your blog is written in, CSS must be used for all formatting. That may be why "border='0'" didn't work, but adding "img {border: 0px;}" to the style sheet, which is in or referred to in the head of the code may work. It is likely between <style type="text/css"> and </style>.
How about the code to share on Twitter? Is this easily done?
Thank you!!!! The code they had posted on fb didn't work for me at all. Yours did! :)
I'd love the twitter code too... The code they offer doesn't work for me, using the classic blogger template.
im about to lose my mind, i have tried everything to get the share to facebook link by posting the code. it either tells me there is no "post" in the dictionary, or it simply will not work. can you tell me exactly where to post this code to make it work? i spent 2 hours looking for div id wrapper w/e and still no luck.
Please read the earlier comment. Specifics depend on your template/layout. Ensure you are using the right code for the right type, i.e., the template code for templates, layout code for layouts.
this is my result:
http://iiirgendwas.blogspot.com/
unfortunately, there is no link. If I use the other code, Blogger tells me that the code isn't correct. As well there is no checkbox, no matter what code I edit my posts in.
Sorry for all the blabla, but I'd love to add that code!
Perhaps making sure you have used the proper code will help (template for template layout for layout), and if you cannot the way to expand the code in a layout, you may not be able to install any custom code, including facebook sharing code.
Sorry but i don't quite understand where to post the code.
I am looking in the layout for my template and have the exanded widgets button checked but exactly where should i put it? i used one of the template layouts and don't really understand the ins and outs of it but i have tried several locations and some refuse to accept it and others accept it but nothing changes....
Also am i right in thinking you just place it in the template and not after the body text when writing each post as well?
Sorry about this i'm just getting a bit confused by it all.....
This depends on your specific blog and where you want the link to appear. Please read my earlier comment on where to put the code.
Hi David
I've managed to insert the share link into my blog posts which is great and it all works fine except....when my posts appear in facebook they don't show the post title - they just repeat the blog.url? I think this is something in my template as i've tried sharing with other blogs and they register the title of the post. Do you know what string it is in the template that automatically highlights to facebook what title to feed for each post?
In the fifth paragraph of this original post (one this page above the comments) I link to an entire blog post about specifying the title, description and picture Facebook will select when sharing. Please read that. Good luck!
hi
when i add ur given code for layout for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked) after body tag.
I got this error
Error interpreting blog template
Invalid data reference post.url: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']
please tell me how to fix it
thanks
Hi....
Youtube has a "share" feature under the videos on its page. This feature allows users to post the video to there facebook and myspace page. I would like to be able to post my videos to facebook with the same ease. have any idea!!!!!
Sadiua,
I'm not sure what you are looking for that isn't in the original post or the comments above this one. If your videos are on YouTube they already have that sharmg feature. If they are on blogger, this post describes how to make a share on Facebook link.
If you are getting an error after installing the layout code, it is likely installed in the wrong location or the code itself is messed up/the wrong syntax. I recommend restoring your layout to a backed up previous version without the code (if you have one) and ensuring you have a layout (not template). Your error is complaining using the word template; they layout share code will not work on a template since templates require template code.
Hi David,
Could you please tell me how to add the facebook wall feeds in my blogger classic template? There is no luck for me upto now....
That's a little beyond the scope of this post, but the short version is make the wall public, locate the feed link, then import the wall feed into your blogger layout as you would any other RSS/atom. It would be more complex to do this with a template.
Hello, I'm having a problem on sharing my blogger posts on Facebook. The image preview and description simply don't show, only 2 text lines. It was working fine until yesterday. It appears there's a lot of people with the same problem.
what should I do?
Thx
Stereo, perhaps you could try the pretty facebook sharing that I linked in this post, in the part about how you "specify the picture, title and description." If I'm understanding you correctly is what you seem to want to do.
Post a Comment
Subscribe to Post Comments [Atom]
Links to this post:
Create a Link
<< Home