Sharing blog posts to a Facebook page instead of your personal profile

You can share from your blog to a Facebook page, instead of a profile, by switching to use the Facebook page before you carry out the share.

Sharing blog posts to Facebook

There are several  tools that anyone who is reading your blog (including you) can use to share it on Facebook, provided you have implemented them.   They include Blogger-provided social sharing buttons, Facebooks' own like / recommend / send social plug-ins and share button and 3rd party tools (AddThis, ShareThis etc).

And in the most low tech-option of all, anyone can just copy your post's URL and manually paste it onto Facebook themselves.

But no matter what option is chosen, one thing stays the same:   the place in Facebook is the share or like goes to is controlled by how the person doing the sharing is logged in to Facebook.   It is not controlled by you, the blog-owner who is providing the share / like / etc button.  This is true even if you are sharing your own posts:  it's your Facebook settings that matter, not the settings in your blog.


Switch to a page so you can share to it:

If you want to share your own blog to a Facebook page instead of your personal account, then you need to have switched to use Facebook as that page before you do the share (or like / recommend etc).  
 

Doing this is quite easy, provided you are an administrator for the page:

1   Log in to Facebook.

2   Choose Use Facebook as Page from the Account menu (currently a drop-down in the top right corner ... it may move around in future).

3  Click Switch beside the name of the Page that you want to share to, from the list shown.   (There may not be a list if you are only an administrator on one page)

This will take you back to whatever Facebook screen you were on before.  However when you do anything (eg click Top News or Recent, post to someone'e Wall, etc), it looks like it was the Page, not your Profile, that did the action.

This means that you can share a blogger link in the usual way, and it will look like it was shared by the Page - and it will be shared to the Fans of the page, not to your personal Friends.

And if you are not an administrator?
If you're not an administrator for a Facebook Page, then you cannot switch to it.   You may be able to post to its wall, depending on the security settings that the administrator has entered - but you will need to share the blog (etc) manually.

Current limits and problems:

I'm 99% certain that you need to be logged in to Facebook  and reading the blog using the same browser (ie in two different tabs or windows) for this to work.

Also, at the moment, there is a problem with Facebook's own social plugins (the Like / Recommend / Send buttons, and at least some of the other badges):  when you are using Facebook as a page and looking at a website which has the Facebook plug-ins installed, then the wrong thing is shown.   For example, on Blogger-HAT I'm currently seeing

• My Facebook profile picture instead of the Like / Send buttons above and below posts, and
• A big Facebook logo instead of the Like badge for my page.

This means that I cannot use the Like/Send buttons to recommend new posts to my Page.  However the old-style Share button does still look and work correctly (I just tried it out on BloggerSentral, to be sure - see the result here).

For my own posts, I don't think this is much of a problem:  I'd rather do the sharing manually, so that I can customise the message to the section of my audience who follow my blog on Facebook rather than on Twitter or through RSS or using a follow-by-email subscription.   But it may be more of an issue if you want your readers to share your blog, and they would like to do it on their own Facebook Pages instead of their Facebook Profiles.    Lets hope that Facebook fix this soon.

Automatically sharing to a Page:

Many people would like a Page to be automatically updated when they post to their blog.  

I've heard lots of people saying that this can be done, and talking about doing it via RSS feeds etc - but personally I've not succeeded in making this work reliably.   For one of my pages that has quite a few fans, it worked occasionally - and it was a bit annoying when I couldn't control the timing of the page update because the feed seemed to be delayed.

Have you found a method that works every time?

---

Related Articles:



Adding Facebook's Share button to your blog

Putting a badge for a Facebook page into your blog

Putting a badge for your personal Facebook account into your blog

Tools for linking Blogger and the social media

Putting "follow me on Twitter" into your blog

Why RSS matters to bloggers

Making an email sign-up option for your blog

Putting a Facebook "like", "send" or "share" button on your blog

There is an official Facebook button that your readers can use to share your blog, your current post, or any website, on their own Facebook account.  This article describes how to get the code from Facebook and install it into Blogger - but most of the information applies to other blogging tools (Wordpress, TypePad, etc) and many other web-site tools also.

Background

Previously I've described the different ways that you can link your blog and the social-networking sites.

Facebook badges can be used to send your blog's readers to your personal Facebook profile, or to your page.  These are an example of the "follow me" approach.

But often blog authors want to give their readers a tool to share the blog that they are reading on their own (ie the readers own) Facebook account - that is to use the "Look what s/he said" approach.

Your readers could just copy-and-paste a hyperlink to your page into their own Facebook account, but it's clunky, and means that they have to start up Facebook themselves.

Various people have written 3rd-party widgets to put a Facebook icon on your blog, set up so that when a reader clicks it the current page it is automatically shared on the reader's Facebook account.  Some even count how many times the button has been clicked.

But I really don't like, or trust, 3rd party gadgets:

• There's no guarantee that they don't have nasty side effects on your blog.  
• Some of them ask you to type your Facebook id and password onto a page owned by a 3rd party.   They promise that the won't do nasty things with the data - and some of them mean it.  But you just don't know who to trust.  
• If Facebook change how they do things, there's no guarantee that 3rd party tools will also be changed:  you could easily be left with a button that doesn't work any more.

I'm not saying that all the 3rd party gadgets are bad:  I've used some on my sites with no ill-effects.   But I've never been happy about it. And the day that I used the AddThis button on a newspaper website to share an article to my personal travel-blog, I had a mini panic-attack 1/2 an hour later when I realised that I'd just given my email and AdSense password to a third-party.


One approach - Blogger's social-sharing buttons:

Google have now introduced social-media buttons which can be shown at the bottom of each post.   They only work on blogs with Designer Templates (ref Types of Blogger Templates)

They're an improvement on the 3rd party gadgets, but I still don't like the way they look, and the lack of options to customize them, so I usually have them turned off.


A better approach - Facebook's official gadgets:

The Share Button: 

The first "look what s/he said" option that Facebook offered was the Share  button, officially called the the Post To Profile gadget.

This let you customise a few features, and also had a preview function

You can still see this gadget on many web-pages.   But you cannot get the code for this from Facebook any more:  they now recommend using the social plugins (more about them below) instead.

The Share button still works though, and can be added to your site using this code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float:left;padding:3px 3px 3px 3px;'>
<a expr:share_url='data:post.url' 

href='http://www.facebook.com/sharer.php' 

name='fb_share' 

type='box_count'>

Share

</a>

<script 

src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' 

type='text/javascript'>

</script>
</div>

</b:if>

(I've spaced the code out a bit so it can be understoond more easily - the extra line-breaks can be removed when you use it.)

You can configure the code by changing the value of type:  other options are

• button_count   (shows a counter beside a smaller button)
• button (shows a smaller button, still with the word "share"
• icon (shows the small "f" only)

See Sharing from your blog to the Social Networking Sites for more information about where to put the code, including general and post-specific options. 

Notice that because the code above includes   expr:share_url='data:post.url'   you need to put it in a post-specific place in your blog.   Another option would be to replace data:post.url  with the URL for your blog, and put the code into a gadget etc.

Be aware that sometime in the future, the Share button may stop working, because Facebook stop supporting it.   I don't expect that to happen soon though, because it's now installed on so many web-sites worldwide.

The Like and Send buttons:
Facebook's official gadgets for saying "look what s/he said" are now the Like and Send buttons.

Officially, you can get the code for them on the Developers > Social Plugins > Core concepts page:  don't be put off because the page is labelled "develoeprs" - it really is quite simple to install the buttons into your blog.

However the last few times I tried to get the code from Facebook, it's refused to give it to me, saying:

"The href entered is not recognized as a valid URL.".

So this is the code I got from them before, modified to be used in a post-specific place - see below - and to not use the width that was suggested:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>

This picture shows the options that were available when I got that code:

It's fairly easy to look at these options, and work out changes you might like to make, eg

like action='recommend' colorscheme='dark' font=''Arial layout='box_count' send='true' show_faces='true'

When you have chosen the options you want:

• Click the Get Code button at the bottom of the page, 
• Copy the code that is provided, and 
• Install it into your blog (see below for more info about this).

Sharing a Post vs Sharing the whole blog:

If you put a a Like, Send or Share button into your own blog as a gadget, then what is shared is your whole blog, not the particular Post that is being read, for example   

http://blogger-hints-and-tips.blogspot.com   (this blog)

instead of

http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html  (a post)

If this is what you want your readers to do, then just put your blog's URL into the "URL to Like" field (or the expr-statement if you're using the Share button code), and add the code as a gadget.

But if you want your readers to share individual posts, then you need the Facebook-button to appear with EVERY post, in either the post-header or post footer  This is a little harder than adding it as a gadget.  To get the code to use for the Like/Send buttons

1. Put some dummy text into the URL to share field
2. Get the code
3. Replace the dummy text with instructions to use the URL of the current post, ie change it from

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&amp;xfbml=1"></script><fb:like href="DUMMY-TEXT" send="false" width="450" show_faces="true" font=""></fb:like>

to

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&amp;xfbml=1"></script><fb:like

expr:share_url='data:post.url' send="false" width="450" show_faces="true" font=""></fb:like>

The way to add the code to your blog is described fully in Putting Share this on XXX buttons into your blog (it's done the same way, no matter what social network's share button you are adding).


What your readers see

When a reader clicks your Facebook button, they'll be asked to log in to Facebook (unless they're already logged in).

Once they're logged in, then:

If they used the Like button:
The "like" is recorded on their wall, and they are shown a small message in your site, giving then the opportunity to un-do the like, or to add a comment which is also shown on their wall along with the like.

If they used the Send button:
They are shown a small pop-up window where they can type in names (from their existing Facebook friends) or email addresses.  A message about the item is send to the selected people using either Facebook Messages or regular email for people who aren't on Facebook.

If they used the Share button:

They see a window where they can enter a message, and see the link and description that they're going to be sharing.

The link is either the page that they were viewing when they clicked the button, or another URL (if you chose the Custom URL option when you were setting up the gadget).  The description is an advertisement for Blogger.  However both of these these can be changed if your reader clicks on them.

Lastly there's a captcha window, where they have to enter some security test.

---

Related Articles: 



Linking your Blog and the Social Media

Adding a Facebook personal account badge to your blog.

Adding a Facebook Page badge to your blog.

Types of Blogger Templates

Putting 3rd party HTML code into your blog

Adding the "Find us on Facebook" plug-in box to your blog

Adding a Facebook personal account badge to your blog

This article describes making a Facebook badge to promote your personal Facebook account, and putting it onto your blog.

Facebook, Profiles and Pages:


As I've previously explained, Facebook has Profiles for people, Groups for collections of people who want to approve individual members who join, and Pages for everything else.

Many people called their Profile their Facebook "account" - and lots are confused about the differece between personal profile, and pages.   But there is a big difference - and it starts to become obvious when you look at how to promote your facebook presence inside your blog.

I've already described how to make a badge for a Facebook Page.   Now I'm going to look at how to make a different kind of page, to promote yourself, ie your Profile.

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Making a badge for your Facebook profile:

Log into Facebook with the personal account that you want to promote.
.
Choose Profile (currently on the top right menu, just next to Home).

Scroll down the left hand panel,until you see Share a Badge (usually at the bottom) - click it.   This takes you to Facebook's badges page, with Profile badgets automatically selected.
  
Click Edit this Badge,

Choose the format and contents that you want to show.
Remember, what's shown is the information from your personal Facebook account, and if you put it onto your blog the usual Facebook security rules won't be used to control who sees the information.   Only use these badges if you're very sure that you want your information to be shared.

When you are happy with the selections, choose, Save the badge.

Facebook has options to step you through the process of adding the badge (as a gadget) to Blogger.   But I always prefer to choose Other and then Copy the code provided (put the mouse into the field, press Ctrl/a to select it all, then Ctrl/c to copy).

Install the code into your blog:  as always there several options for installing 3rd party HTML, depending on where you want to put the badge.


What your visitors will see

People who visit your blog through a web-browser will see a badge showing the information that you have chosen to show.

When they click on it, they will be taken to Facebook and as much of your profile as your current privacy settings let them see.

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.


Customizing the code:

Unlike other Facebook badges, the profile badge has very few options for being customized by editing the code, which looks like this:

<!-- Facebook Badge START --><a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="WHOEVER">WHOEVER</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span>

<a href="http://en-gb.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create your badge</a><br/>

<a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" title="WHOEVER"><img src="http://badge.facebook.com/badge/WHOEVER.WHOEVER.png" width="177" height="84" style="border: 0px;" /></a><!-- Facebook Badge END -->

An important note:   if you create a badge like this and put it into a website, and then go back and edit the badge in Facebook - the website will show the updated badge.

---

Related Articles: 



Putting HTML from a third-party into your blog

Adding a Facebook "Page" badge to your website

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

Putting a badge for a Facebook Page into your Blog

This article describes making a Facebook badge to promote your page, and putting it onto your blog.

How Facebook is organised:

This article is about how to make a badge to promote a Facebook Page. 

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Many people are confused about when they should use each of the types of "thing" in Facebook - so it's worth remembering that:

Facebook has

• Profiles - accounts for flesh-and-blood, living, breathing, individual people
• Pages - for websites, brands, and organisations that don't want to approve all their Facebook members
• Groups -  for organisations that want to approve individual members who join (and in return, group-owners can send private messages to individual members.

The tools that Facebook provides for promoting the each of these are slightly different. 

Making a badge to promote a Facebook Page:

Log into Facebook with a profile (ie personal account) that has administrator rights for the page you want to promote.

View all your Pages from the Pages link in the left sidebar

Select the Page you want to promote, by clicking on its name.

Click Edit Info:  this shows you the basic information stored in Facebook about the thing that the page is for (you may like to edit it while you're here).

Click the Edit button (on the right side of the screen)

Choose the Resources tab from the left-hand menu bar

Choose Social Plugins, from the Connect with People category.  
(This takes you to the Developers / Documentation page - I could have just linked directly to it - but Facebook change things around sometimes, so I think it's helpful to understand how to get things based on their thinking.)

Choose Like Box.  

Set the options for the item  

• Facebook Page URL - this needs to be changed to the URL of your page.  
  You may need to open Facebook again in another tab to see this
  If you have less than 25 Fans already, then your page's URL will be something like http://www.facebook.com/pages/Blogger-Hints-and-Tips/144194435594821 and you can get it by copying the link from the list of Pages for your account.
  Once you have more than 25 fans, you can choose a  page-url on the Edit Info > Username screen.
• Width - choose a value that suits the space on your template where you want to put the box.
• Show faces, show header:  choose options that suit your purpose and blog template
• Show stream:  this controls whether you show posting from the Page inside your blog

As you choose options, the preview on the right updates to show what the button will look like:

When you are happy with the selections, choose Get Code.

• Currently, there are options for an iframe based button, or XFBML which uses Javascript - only use it if you are sure that all your visitors will have it enabled. 

Copy the code provided

Install the code into your blog - there several options for installing the HTML, depending on where you want to put the badge or button.


What your visitors will see

People who visit your blog through a web-browser will see a Facebook area, including a Like button and whatever other options you have chosen.

This can be quite a powerful tool:  you can easily use two or three different combinations on different parts of your blog:  one that has no border, no faces and no header but does show a Stream can effectively look like a "live" feed from your Facebook page to your blog, while another one with different options can show off the size of your fan-base.

Be aware that the Like button shown in this button gives people the option to Like your Page in facebook  - not your blog directly, and not the current post that they are reading.   If you want them to be able to Like your blog or blog-posts, you need to provide this option separately (and many of your visitors are likely to be confused by the different).

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.


Customizing the code:

You can change the characteristics of the box without having to generate the code from Facebook again.   For example you can later the width and/or height - just remember to do it in both of the places required if you are using the iframe option:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Hints-and-Tips%2F144194435594821&amp;width=160&amp;colorscheme=light&amp;show_faces=false&amp;border_color=purple&amp;stream=true&amp;header=false&amp;height=395" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:160px; height:395px;" allowTransparency="true"></iframe>

fyi, I could have just quoted this code, and said to use it on your blog.  But I don't usually do this when I'm describing how to link Blogger and any third party product, because it's likely that Facebook (or whoever) will change their code in the future:  it's always safest to get the most up-to-date copy of the code from the source-site when you need it.

The facebook page where you get the code from also has more information about controls you can set in the code, too.   Check it out for more information.

---

Related Articles: 



Putting HTML from a third-party into your blog

How the data in Blogger blogs is organised

Linking Blogs and Websites

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

Copyright, Blogs and Bloggers

Why RSS / Subscribe to Posts is important for bloggers

Tools for Linking Blogger and Social Network sites

Previously I've described the approaches for linking your blog and the social networks. This article is about specific tools that can be used for each approach.

"Follow-me"

Inviting readers to connect your account to theirs on ...

• Facebook: 
  Adding a Facebook personal account badge to your blog
  Putting a Facebook Page badge into your blog
  

• Twitter:     Put a Following Me on Twitter button into your blog

• LinkedIn:  There must be a way - not found it yet.

"Look at This"

Giving readers a tool to talk about or recommend your blog-post in their account in:

• Facebook   Put the Post 2 Profile gadget, in your blog, inviting people to share your post

• Twitter   Put the Tweet button into your blog, inviting readers to share either your whole blog, or a specific post

• LinkedIn   Put a Share this to LinkedIn button onto your blog.

• Google:     Put a customised +1 button into your blog

• Email-this-post:
  Turn this on using Design > Page Elements > Blog Posts - tick the Show Email Post Links button.  You have some options deciding where in the post it goes.  

A Word about Third Party Tools:

Untill recently, a common approach has been to use a 3rd party tool, eg AddThis.

But there have been some less than well-behaved tools which are effectively hackerware (eg the TweetMe widget) - so it's been hard to work out what to trust.

Personally, I almost jumped out of my skin the day I first used an AddThis button on a newspaper site to put a link to an article about me onto my Google blog:  half-an-hour later I suddenly realised that I'd just given my main google account password to a 3rd party that I knew nothing about.  I couldn't get to a computer to change it fast enough!.

I don't recommend installing any tool that asks a reader to enter their password for a social networking site anywhere except on that social networking site.

"Look-what-I-wrote"

Showing content from your blog on ...

• Facebook:  Automatically updating Facebook every time you publish your Blog (coming soon)

• Twitter:  One approach is to use Feedburner's Socialise your Feed option

• LinkedIn  Automatically updating LinkedIn every time you publish your Blog (coming soon)

"Look what I said over there"

This options is about updating your blog with content from your social media site(s), and has a few possible approaches.

1 Use an RSS feed:

Burn (or just get the address of) a feed from your Twitter / Facebook / LinkedIn etc account, than then:

• Display it in an RSS Gadget in your blog, or
• Use a service like feed2js.org to convert the feed into Javascript, and put the resulting Javascript into the post.

2 For Facebook, use a page badge:

Make a badge for your Facebook Page choosing to show the stream but hide the Faces and Header - this will show what was posted in the Page on your blog.    It's especially useful if you can put it in a place (eg a post or page) where the badge can be quite wide.

3 Manual update:

This won't be a popular approach.

But personally I've found that different networking tools respond best to different messages, so generally I try to do cross-platform promotion (ie from Blogs to Social Networks ad back again) in a way that customises the message for the platform - and manual is the only realistic way to do this at the moment.

---

Related Articles:

Approaches for linking your blog and the social networks

Using the Post 2 Profile gadget,

Making a Facebook personal account badge

Making a Facebook Page badge 

Putting the tweet button into your blog.

Putting a Blog into Facebook, changing the title and descrption

This article is about putting a note about your blog (or any other website) onto Facebook using their share tool, and controlling the heading and text that are shown.

Overview

There are many ways to link a blog and your Facebook account.  The simplest options are manual:

• If the blog has a Share-this-on-Facebook button or Facebook Like or Send buttons, click this button, if necessary log into Facebook in the window that opens, and a post is automatically made.   (see Putting a Facebook "share this" badge on your blog for more about this.)
  
• If the blog doesn't have these tools, then you need to manually copy the URL from the blog, and paste it into your Facebook wall or status field.  

No matter which option you use, Facebook suggests what title, text and picture from the blog shoul be shown in the Facebook entry.  They've got better and better at choosing appropriate text and images, but in come cases options suggests are  not appropriate.

Fortunately, you can  change the suggested title and description..


Follow these steps:

1  Click the Share / Like / Send button, or copy the URL for the blog that you want to link to.

2   If prompted, log in to Facebook and / or past the link - otherwise it will come up automatically.

3  Click on the link item (it's in the Attach bar, looks like a drawing-pin)), and when the window opens, paste in the web-address (URL) that you copied in step 1)

4  Click on Attach, and you will see a preview of the default values that Facebook is suggesting, based on what it finds on the blog:

5  If you hover over the title and description part of this preview, you will notice that they are highlighted.  This means that you can click on them and edit them.

6  Choose a thumbnail-picture (using the arrow buttons at the bottom left, and edit the title and description by hovering and then clicking on them.

What your readers see:

Your readers will not know that you have changed the title and description suggested by Facebook - they simply see the values that you entered.

---

Related Articles:




Putting a Facebook "share this" badge on your blog.

Tools for linking Blogger and the social networking sites

Sharing on Facebook to Page intead of your personal Profile

Automatically sending your posts to Twitter