How to receive messages to your Twitter and Facebook direct from your website

Having a contact form on your website has been the tried and tested means of communication for website owners for many years. It’s a perfectly simple premise; you have a form, website visitors fill it in and click send, and you receive an email.

What could be easier?

Well, some messages sent via websites can be classed as spam by email programs. Contact forms themselves can be spammed by people offering online marketing services, or people claiming to be members of the Nigerian nobility offering to transfer money to your bank. Some contact forms produce errors, either because of a JavaScript issue, a hosting issue or a validation issue.

In truth, there are a number of potential problems with the humble contact form (which is why you should test yours at least once a month).

We live in the social media age now though and, as businesses, we can now accept messages via Twitter and Facebook. But wouldn’t it be nice if we could accept messages to our business social media accounts direct from our website?

Yes, yes it would… and we can.

Facebook launched the facility to receive messages to your Facebook page via a button for your website some months ago, and Twitter has recently followed suit. This means you can now place ‘message us’ buttons on your website from Facebook and from Twitter.

How cool is that?

Here’s how you do it.

Twitter

Twitter announced its messaging system for websites in August, with a tweet – obviously.

Announcing our new Message button. Now people can easily slide into your DMs from your website. Get yours now! https://t.co/ash9ouvgzu

— Developers (@XDevelopers) August 24, 2016

By following the link in the tweet, you are taken to their embedding section. If you scroll down you’ll see several options for embedding aspects of Twitter goodness. Today, we’re after the Twitter Buttons option.

Clicking the Twitter Buttons option will open a pop-up offering different types of button you can add to your website. Select the Message Button.

It will now ask you for two things. One is the @username for your Twitter, but the link to the profile will do. For example, we could enter either @OLAlearning or https://twitter.com/OLAlearning.

The second box asks for your Twitter ID. If you’ve no idea what this is, don’t fret, as it offers a link where you can go to collect it. You will need to re-enter your Twitter password for security reasons but, once done, you’ll see your Twitter Data page which contains lots of information about you – including your login history!

We just want the User ID though, which should be a number at the top of the page just under your Twitter Username. Select the ID, copy it and paste it into the box as per the below graphic.

Click ‘Preview’ and you’ll see what your button looks like. You’ll also be able to make some subtle changes, such as choosing a larger button, before you copy the code and add it to your website wherever you want the button to display.

Once you have added that code to your website (you may need your web developer to do this for you) you’ll now have a button on your site where people can send you Direct Messages.

As a rule, however, you can only receive Direct Messages from Twitter users whom you already follow. That’s not much use for allowing potential clients or customers to contact you. Therefore, you should access your Twitter settings here** and make sure you tick the box at the bottom of the page that says “Receive Direct Messages from anyone”.

Facebook

Facebook’s system isn’t quite as user friendly as Twitter’s, and requires you to create an App in the Developer section before it will work. Creating an App doesn’t require any coding knowledge; it’s really just a box-ticking exercise, but Facebook isn’t very easy to use and its help section is often very outdated.

Firstly, you visit the Developer site here and select ‘Add a New App’ from the dropdown menu at the top of the page, near your profile photo.

You simply choose a name for the App (something relevant to your website would be ideal), enter an email address related to your website and then choose a suitable category. That’s pretty much it, and it will generate your App ID for you. Note this down, as you’ll need it in a moment.

You can find the reference material for adding a Message Us button for Facebook to your website here.

The code for the button asks you to enter the App ID and the Page ID of your Facebook page. If, like most businesses, you have chosen a ‘vanity URL’ then finding your Page ID isn’t as easy as it once was, as it no longer appears in the URL of the page. In order to find your Page ID now, you need to visit your page on Facebook and click on ‘About’. You then need to click on ‘Page Info’ and scroll down to the bottom. You’ll see a long number next to the label ‘Facebook Page ID’. That is what you enter in your code.

Once this code, and the JavaScript, is placed on your website, you’ll have a button from which people can access Messenger and send you messages via Facebook.

Just remember to check your Twitter and Facebook at regular intervals, as you don’t want to miss any important messages. Your response time on your Facebook page is also important if you want to receive the ‘Very responsive to messages’ badge. You need a response rate of 90% or higher, and a response time of 15 minutes, to get this badge.