Social Media Integration Share on Facebook - Customizing the Text and Images that are posted when your web pages are “Shared” on Facebook
|
|
Did you know you can customize the text and image that Facebook uses when a visitor to your website uses "Share on Facebook"?
Facebook Bookmarks or "Share on Facebook"
We have all seen the ubiquitous “Share” buttons on blogs and Corporate websites, such as the below.
They all tend to work the same, when you click Facebook a new browser window opens up and you will see the usual Facebook “Post to Profile” page (such as the one at the top of this article).
What you may or may not know is that the text and image selected by Facebook, and circled in the screenshot above, is completely customizable. You have control over what Facebook displays. Below is what you need to know.
How to Setup a “Share on Facebook” Link or Bookmark
The actual hyperlink for sharing a webpage on Facebook, or put differently, when you post a webpage on your Facebook profile, is really simple. You would just add the following html code to your webpage (it’s just a hyperlink).
| <a target="_blank" href="http://www.facebook.com/sharer.php?u= http://garethhooper.com/articles/social-media/45-integration/145-share-on-facebook-controlling-the-text-and-images-that-are-posted-when-you-share-a-webpage-on-facebook.html" title="Share this webpage on Facebook">Share on Facebook</a> |
- This will launch a new browser window, which I highly recommend, rather than lead your visitor away from your website.
- The u= http://garethhooper.com/articles/social-media/45-integration/145-share-on-facebook-controlling-the-text-and-images-that-are-posted-when-you-share-a-webpage-on-facebook.html is the URL of the page that the "Share on Facebook" link is on. You do have to use the full URL here.
- The title="Share this webpage on Facebook" is the text that displays when you hover your mouse over the link.
- The Share on Facebook is the text of the link, otherwise known as the Anchor text.
How to Customize the Text that Facebook uses
In the example above, the title that Facebook chose was "JW Player 5.1 Just Released!". Facebook simply took this from the html title that virtually every webpage has, and for those of you that use Wordpress or Joomla for your Blogs, you may not even realize that Wordpress/Joomla adds the html title for you.
An example of the html title is:
| <meta name="title" content="JW Player 5.1 Just Released!" /> |
In the example at the top of the article, the description that Facebook chose started with "I don't want this text to be the description...". Facebook took this from the meta description that is common on a lot of websites, but as it no longer influences search engine rankings with the big 3 search engines (Google, Yahoo, Bing), it isn't necessarily on EVERY webpage, and if it's not present, Facebook using it's own algorithm to choose a description for you, from text on your webpage. It's this process where a lot of people get those undesirable descriptions, but it doesn't have to be that way. Just specify a meta description of your choosing, like the example below:
| <meta name="description" content="This is the description of my webpage that I really want to have shared on Facebook!" /> |
How to Customize the Image that Facebook uses
In the example at the top of the article, Facebook didn't even display an image, and instead gave the visitor the option of choosing an image that was displayed on the original webpage. This is probably undesirable, and can be customized with an image of your choosing, and that image doesn't even have to be on your website, you can use an image on another website if you wish.
Here's an example of how you can specify the image that Facebook uses, add the following html code to your webpage, ideally in the HEAD section, but if you can't manage that (for example with Wordpress or Joomla where you don't have that much control) it can live in the BODY section.
| <link rel="image_src" href="/images/stories/articles/social_media/integration/facebook_post.jpg" /> |
OR
| <link rel="image_src" href="http://garethhooper.com/images/stories/articles/social_media/integration/facebook_post.jpg" /> |
Example Link
Here's an example link using everything above:
Caution when testing your own "Share on Facebook" links
When I was testing all the above information, I noticed that Facebook "appeared" to use some kind of cache. I would update my test page and then test the link and nothing changed. It was only when I changed the title of the page and noticed that Facebook still used the old title, did I suspect that there was some kind of caching going on. Clearing the temporary internet files and using a different browser didn't help, I got the same result. It was only when I tried the link after 30 mins did I see the changes I made reflected on Facebook. It may be much less than 30 mins of cache, I didn't try and time it. Just something to bear in mind.
Related Articles
- Share on Facebook – How to embed your own Videos on someone's Facebook wall when your web pages are “Shared” on Facebook
- Share on Facebook – How to embed your own MP3s on someone's Facebook wall when your web pages are “Shared” on Facebook
- How to create your own Facebook Custom Page with your own page icon
- Overview of the New Facebook Social Plugins – Part 1 of 3
Please leave me a comment if you found this article useful or if you have any questions.
Comments (18)
...
i tried this, but i still get not only the specified image ...
may you haye any idea why?
thanks, wolfram
-
- +1
-
-
...
Thanks for the useful info.
-
- +3
-
-
...
-
- +1
-
-
...
Tried "&message_text=CUSTOM" appended to the url but no luck. I guess facebook doesn't allow extra parameters passed. :S
Any good tips are greatly appreciated.
-
- +0
-
-
...
I'm feeling so happy, do u know why? cuz i m so lucky, do u know how? cuz God loves me.Do u know how? cuz he gave me a gift. Do u know what? its YOU my love.
-
- -2
-
-
...
The thing is that it loads an article and image that are not in my site (IANA - Sample Domain) and I don't know what to do.
Can you please help me
-
- +1
-
-
...
Could you post your website so we can take a look at the code please.
Thanks,
Gareth
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
Write comment
Show/Hide comment form
| < Prev |
|---|