Putting a badge for a Facebook Page into your Blog

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

What is a Facebook page

This article is nigh how to construct a badge to promote a Facebook Page.

This is an instance of the "follow me" approach to linking your spider web log too the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Many people are confused nigh when they should utilisation each of the types of "thing" inwards Facebook, ie
  • Profiles - accounts for flesh-and-blood, living, breathing, private people
  • Pages - for websites, brands, too organisations that don't desire to approve all their Facebook members
  • Groups -  for organisations that desire to approve private members who bring together (and inwards return, group-owners tin ship private messages to private members.
The most mutual "thing" for blogs to convey is a Page - too a Badge is the tool which Facebook provides to assist yous to promote a Page on your spider web log or other website.


How to construct a badge to promote a Facebook Page

View all your Pages using the arrow drop-down at the real laissez passer on correct of Facebook's toobar.
(Facebook direct chances the house for actions similar this from fourth dimension to fourth dimension - yous may require to hold back exactly about to notice your pages.)

Copy the URL for the Page yous desire to promote
(One agency is to correct click on its name, too pick out copy-link-location- or whatever phrase your browser uses.   Another is to to boot the bucket the page, too re-create the URLfrom your address bar.)

Come dorsum to this article too click  here --- Facebook Social Plugins, to achieve Facebook's tools.
(I used to convey instructions to launch this from Facebook - but I cannot notice whatsoever link to it from my Pages page whatsoever more.)

Choose Page Plugin  / Web.  

Scroll downward the page, too laid the options for your badge.  The outset i is critical - the others optional:
  • Facebook Page URL - this needs to endure changed to the URL of your page (which yous copied earlier)
    If yous convey less than 25 Fans already, thence your page's URL volition endure something similar http://www.facebook.com/pages//144194435594821 too yous tin larn it yesteryear copying the link from the listing of Pages for your account.
    Once yous convey to a greater extent than than 25 fans, yous tin pick out a  page-url on the Edit Info > Username screen.
  • Tab - the tab on your page that is shown
  • Width - pick out a value that suits the infinite on your template where yous desire to lay the box.
  • Show faces, demo header:  pick out options that adapt your move too spider web log template
  • Show stream:  this controls whether yous demo posting from the Page within your blog
As yous pick out options, the preview at the bottom updates to demo what the push volition hold back like:



When yous are happy amongst the selections, pick out Get Code.
  • Currently, in that location are options for an iframe or Javascript SDK:   I recommend using the iframe, unless yous are comfortable amongst the two-part installation needed for the Javascripit, too yous are certain that the visitors yous desire to target volition convey Javascripti enabled. 



Copy the code provided

Install the code into your spider web log - in that location several options for installing the HTML, depending on where yous desire to lay the badge or button.


Job Done!   Your spider web log volition at nowadays display a gadget that promotes the selected Facebook page - people tin thought too similar your Page from within your blog.


What your visitors volition see

People who see your spider web log through a web-browser volition run across a Facebook area, including a Like push too whatever other options yous convey chosen.

This tin endure quite a powerful tool:  yous tin easily utilisation 2 or iii different combinations on dissimilar parts of your blog:  i that has no border, no faces too no header but does demo a Stream tin effectively hold back similar a "live" feed from your Facebook page to your blog, field some other i amongst dissimilar options tin demo off the size of your fan-base.

Be aware that the Like push shown inwards this push gives people the alternative to Like your Page inwards facebook  - non your spider web log directly, too non the electrical current post that they are reading.   If yous desire them to endure able to Like your spider web log or blog-posts, yous require to render this alternative separately (and many of your visitors are probable to endure confused yesteryear the different).

As always, people who read your spider web log via a feed reader (Bloglines, Google Reader, etc), or yesteryear electronic mail subscription (eg having used follow-by-email) may non run across the Facebook item, depending on where is places too what options their electronic mail plan has.


Customizing the code

You tin alter the characteristics of the box without having to generate the code from Facebook again.   For instance yous tin afterward the width and/or pinnacle - exactly retrieve to produce it inwards both of the places required if yous are using the iframe option:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F%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 convey exactly quoted this code, too said to utilisation it on your blog.  But I don't commonly produce this when I'm describing how to link Blogger too whatsoever tertiary political party product, because it's probable that Facebook (or whoever) volition alter their code inwards the future:  it's ever safest to larn the most up-to-date re-create of the code from the source-site when yous require it.

The facebook page where yous larn the code from also has to a greater extent than information nigh controls yous tin laid inwards the code, too.   Check it out for to a greater extent than information.


Do yous require to ain the page yous desire to promote?

No - non whatsoever more.

At i stage, the outset measuring inwards these instructions was to
"Log into Facebook amongst a profile (ie personal account) that has administrator rights for the page you desire to promote."

But that's no longer necessary.   You tin promote whatsoever Facebook page that yous desire to, on your blog.

But endure aware that if yous demo the page-feed on your blog, too yous don't ain the page, thence yous convey no command over what is shown.   It's possible that a feed from someone else's Page volition demo cloth which breaks Blogger's price too atmospheric condition - or which yous exactly don't desire on your blog.    For this argue along, I'd recommend exclusively promoting your own, or closely trusted, pages on your blog.




Related Articles

Putting HTML from a third-party into your blog

How the information inwards Blogger blogs is organised

Linking Blogs too Websites

Tools for linking Blogger too the Social Networking sites

Putting a Facebook "share this" push on your blog

Copyright, Blogs too Bloggers

Why RSS / Subscribe to Posts is of import for bloggers

Popular posts from this blog

Finding a picture's place (URL) inwards Google+ Photos or Picasa-web-albums

How to include the spider web log postal service description when you lot percentage on Facebook