We will look at several ways to create a button to share a link on Facebook or send an article to Facebook.
In this article we are going to show several ways to create the typical button to share a link in your Facebook account, with which visitors to your website can send your content to their profiles within this social network and thus promote your content.
There are several ways to achieve this and the easiest would be to use the scripts that Facebook offers to create these buttons almost instantly. However, some developers will prefer to customize these buttons, through their own images or icons and cause different behaviors than usual when clicking the button to send to Facebook.
Basically, to send content to Facebook we have to generate a link to a Facebook site address, sending the URL we want to share. That URL will have this simplified form:
http://www.facebook.com/sharer.php?u=http://www./manuales
If we access that URL with our browser we will see the Facebook page to share that link and post it on our user’s wall. If your browser saves the Facebook session (that is, if you requested Facebook to remember your username when you access the social network), the sharing page will appear directly. Otherwise you will see a page to enter your access data (login) of your user.
Facebook is in charge of recovering the title of the article or page to share, as well as the associated images, etc. Therefore, in principle it is not necessary to indicate anything else for this to work.
Now that we know this basic behavior, let’s look at some simple ways that we can implement on our website.
1.- Use a Facebook button/script
Facebook has a thing they call the “Share Button”, which creates this button on its own by inserting a link and script into your web page. This way of acting is interesting, because these buttons are quite “smart” and provide a counter of people who sent your link to the social network, apart from the sharing functionality itself. In addition, the service can be configured to display different types of buttons, which we can choose depending on the appearance of our page.
It is perhaps the most appropriate way to place the button, but it has the drawback of not allowing you to customize the image or button to be used (or at least at the time of writing this article, this option does not exist). Therefore, if we want to use a button with a custom look, we will have to find another solution.
All the instructions to implement this button on your website are on the Facebook Developers Wiki, on the page about .
The HTML code to insert a button provided by Facebook will have this form:
In addition, we can select the type of button to use among several possibilities, with the “type” attribute in the link.
The “share_url” link attribute is optional and is used to indicate the URL that we want to share. But if we do not indicate anything in that attribute, the URL of the page where the button has been placed will be sent to Facebook.
Also, if we want a personalized message to be written inside the button, we can put text in the link, something like:
2.- Simple link to send to Facebook
Another variant that we can implement, if we want to customize the send to Facebook button, is to create a normal link, directed to the URL to share on Facebook.
In this case, a link would be created and “Share FB” would appear in the text, and of course, if we want to use our own icon instead of that text, we would put the image we want inside.
3.- Link that opens in a popop
This code could be altered a bit so that this link opens in a secondary or popup window. To do this we need to use a bit of Javascript on our own.
Additional considerations when creating the Facebook share button
I comment on a couple of details that are important and that we can experience when making these links to share content on Facebook.
Also indicate the title of the resource:
One thing I’ve seen done on various sites is sending a string as the headline of what is to be shared. In the link to send content to Facebook we can indicate, in addition to the URL to share, the title that we want to be assigned to this post within our user’s wall. We signal this by sending an additional parameter when creating the URL to send a link.
http://www.facebook.com/sharer.php?u=http://www./&t=sitio%20interesante%20para%20desarrolladores
Now, apparently, Facebook receives the title, but then when interpreting the submitted page, it changes it to the actual title it has, so it seems that this content is not very useful. Maybe it’s useful if the page doesn’t have a title or Facebook can’t interpret it.
Convert the data to URL format:
The other thing I wanted to comment on is the ability to send the data in the URL encoded in URL format. In principle, this detail is not necessary in most cases, since browsers already do this work in a transparent way for users, but it would be recommended.
For example, this link has the URL to share encoded in the format that, in principle, would be appropriate:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.%2Fmanuales
I already said that if this sounds Chinese to us, we can forget about it and in the vast majority of cases (at least in all current browsers) there will be no problems.
If we want to convert a string to URL format we can use a programming language like PHP, with the urlencode() function:
Or even Javascript:
Reference: The Facebook like button is another good solution to add a social touch to your article based on Facebook tools. If you have found a problem with that button, consult the article .
If you are also interested in creating a similar button for Twitter, I recommend that you read the article “”.
Facebook Comments
Disqus