Searching...
12 February 2014

Create and Add Facebook Invite Friends Button to Website, Blogger and Wordpress

Facebook Invite
Looking for a way to bring in more Facebook fans to like your blog page and thus generate more traffic, add the Facebook Invite button which am going to share with you in this tutorial to your blog.

Just the same way you send invites to your friends on Facebook to like a specific product or website, this script enables your blog visitors to be able to do the same thing but this time directly from your blog.

When you add the script to your blog page, people who visit the page and have liked it, can invite their friends to like the page too thus expanding your Facebook page and blog’s audience. By clicking on the Invite button, a pop up window will come up with the list of the visitor’s Facebook friends from which he/she can send the invite to a maximum of 50 friends at a time.

To add the Invite button to your blog,

  • If you have never created a Facebook App before, then you need to register by click on Register to create one. But if you are already registered, then click on Create a new app.

Facebook Invite


  • For those of you who have ever created a Facebook App before, the Create a new App button as shown in the image above will not be shown on the Developer Page. You need to click on Apps and then select Create a new app from the drop down option.

Facebook Invite


  • Once you click on that, a new pop up page will open. Enter the title of your website as the Display name, leave the Namespace as it is since it is optional and choose a category for the App then click on Create App.

Facebook Invite


  • Enter the Captcha as it is shown and click Submit.
  • In the new page, copy your App ID and save in Notepad for use in the code am going to provide here.

Facebook App ID


Creating Access to the App from Your Blog or Website

  • Now click on Settings from the App’s Panel.

Facebook Invite


  • Click on + Add Platform.

Facebook App ID


  • On the next pop up page, click on Website.

Facebook Invite


  • Next under Site URL, enter your blog’s or website address (e.g. www.easytins.com) and then click on Save Changes.

Facebook Invite



Adding the Invite Button to Your Blog or Website

To add the Invite button to your blog or website, simply copy the code snippet below and paste anywhere in between <body> and </body> .

For Blogger Users,

  • Click on Layout >>> Add a Gadget.
  • From the list, scroll down and select HTML/JavaScript.
  • Now copy the code snippet provided below and paste into the HTML/JavaScript box. 
  • Finally click on Save, leaving the Title blank.

For WordPress Users,

  • Go to Dashboard >>> Appearance >>> Widgets.
  • Add a Text widget to sidebar.
  • Now open the text widget.
  • Copy the code snippet below and paste into it. Leave the title as it is (i.e. blank).
  • Then Save.


THE CODE SNIPPET

<style>
 .easytins-FB a {
  font-family: tahoma, verdana, arial, sans-serif !important;
  font-weight:bold !important;
  font-size:12px !important;
  width:150px !important;
  border:solid #29447e 1px !important;
  border-bottom:solid #29447e 1px !important;
  cursor:pointer !important;
  padding:6px 6px 6px 6px !important;
  background-color:#5c75a9 !important;
  border-top:solid #8a9cc2 1px !important;
  text-align:center !important;
  color:#fff !important;
  text-decoration:none  ! important;
 }
 .easytins-FB a:active {
  background-color:#4f6aa3 !important;
 }
</style>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
 FB.init ({
  appId:'217778455086619',
  cookie:true,
  status:true,
  xfbml:true
 });
 function FacebookInviteFriends () {
  FB.ui ({
   method: 'apprequests',
   message: 'Invite your Friends to EasyTins'
  });
 }
</script>
<div id='fb-root'></div>
<span class='easytins-FB'>
 <a href='#' onclick='FacebookInviteFriends();'>Invite your Friends to EasyTins</a>
</span>
<script type='text/javascript'>
 if (top.location != self.location) {
  top.location = self.location
 }
</script>

Make sure you change the following after copying the code before using it on your website or blog.

Replace 217778455086619 with the App ID you copied to your Notepad.

You can change the text Invite your Friends to EasyTins to whatever you like but i advice you stick to something relating to the user inviting his friends to your page to let them know what the button is for.

When you are done with, preview the button by checking your website or blog to make sure it is appearing the way you want it.

Need any help? Am always ready to assist if you tell me your problem using the comment section below.

14 comments:

  1. Hi, I did every step you said, I can see my friends, but they cannot see the invitation I sent. The alert appears, but there's no notification

    ReplyDelete
    Replies
    1. If you followed the steps above properly, then it means you are sending invitation to friends who are already a fan of your page. Send the invitation to friends who are not yet fans of your page and you will see it working.

      Delete
  2. There are hundreds of reasons to purchase the Facebook lovers but most important reason.

    ReplyDelete
  3. Thanks for showing me the way.

    ReplyDelete
  4. I'm having the same trouble as Anonymous above: I did all the invites and checked with those who were not already followers, and they have not gotten any notification or invite.
    Here's the only changes I made to the code for my widget. Thanks for any help you can give.

    message: 'Invite your Friends to elderjoshuarunyan'
    'FacebookInviteFriends();'>Invite your Friends to Josh's Mission Blog

    ReplyDelete
    Replies
    1. Sorry for the late reply Lorraine. For the invite button to work for you, you will have to Replace 217778455086619 with your own APP ID

      Delete
  5. Hi Charles,
    Did the steps, but keep getting this error: Game Requests are only available to games.
    What am i doing wrong?

    Regards,
    Robert

    ReplyDelete
    Replies
    1. Mr Robert if you have followed the steps as outlined, then I don't think you should be getting that error. What page are you adding the invite to?

      Delete
    2. Hi Charles,
      Thanks for your reply. Here is my code as outlined in my app.
      I added it to the menu of my social site (socialize.socialsuriname.com). I have added a icon and translation string.

      Delete
    3. Sorry Robert, you can't enter codes into the comment form as they won't be displayed. Send intead to admin(at)easytins.com

      Delete
  6. Okay Charles, just dropped you a mail.

    Regards,
    Robert

    ReplyDelete
  7. Dear Charles,

    Does this still work? Does it matter if my website is not Wordpress or Blogger?

    Thank you,
    Alex

    ReplyDelete
  8. Hi Charles Ugwoke, you widget great and working properly, here i am facing same problem like @Robert, "Game Requests are only available to games". Kindly assist.

    ReplyDelete
    Replies
    1. Sorry! This app has unfortunately been disabled by Facebook for some pages. Contact Facebook to resolve the issue for your page.

      Delete

IMPORTANT INFORMATION

Please do bear in mind that any Comment left on this Blog that is in no way related to the post under which it is being left, will not be accepted and so won’t be published. For any such unrelated question and enquiries, please use the Contact Us section to get in touch with us and we promise to get back to you 30 minutes after we get your message.

 
Back to top!