We wish to implement a page with a list of content items, showing a title and excerpt for each one. We want to have a Like button next to each content item, which, when clicked, "likes" the individual item, rather than the index page.
We've seen this implemented elsewhere (formerly Mashable.com, on their homepage), but using a standard implementation we can't get it to work. Does anybody have any tips?
We are using PHP/Symfony.
NB: I'm not a programmer so this question isn't framed in technical language - however any answers will be passed to programmers who will be able to understand them.
You just need to set the href attribute on each like button on your page. For example,
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.example.com/item1"></fb:like>
<fb:like href="http://www.example.com/item2"></fb:like>
<fb:like href="http://www.example.com/item3"></fb:like>
If each button has its own href then each button will behave independently. If you don't include the href then the like button assumes you are liking the current page you are viewing.
Additionally, you should implement the open graph protocol on each url you have a like for. By this I mean the url in your like button's href, not the necessarily page the like button is on. You can read about this here: http://developers.facebook.com/docs/opengraph
It is pretty simple to do. You just add meta tags to your pages header like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
Put this after each content:
<div class="fb-like" data-href="unique_url_here_for_the_content" data-send="true" data-layout="button_count" data-width="100" data-show-faces="true"></div>
replace "unique_url_here_for_the_content" with the actual url of the content
To modify data-* atrribute please go to fb like plugin page here
and of couse you need to use this after the body tag
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Related
i added an like button to my page which were meant do display each like on the specific users timeline.
Although when the user clicks like, and confirms (since it's a new site) the "like" nothing happens except that it says on the like button on the page that "Name likes this". Nothing on the users Facebook timeline or in profile.
The Facebook debugger doesn't report any errors whatsoever. Which makes it hard to tell for me why it doesn't share on the timeline. So i don't know exactly what to do or correct right now.
Any insight from someone who has been in this spot would be appreciated.
<meta property="fb:app_id" content="MY_APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.MY_URL.se/" />
<meta property="og:image" content="http://www.MY_URL.se/folder/fbLike.png" />
<meta property="og:title" content="MY_URL.se - PAGE TITLE" />
<meta property="og:site_name" content="SITE_NAME" />
<meta property="og:description" content="DESCRIPTION" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="https://www.MY_URL.se/" data-width="100" data-show-faces="false" data-send="false" style="position: absolute; z-index:5; margin-top: 40px; margin-left: 335px;"></div>
The confirm doesn´t come for new sites, it usually comes if you aren´t using an app id (which is the case here), or if spammy behaviour is detected. Try using an app, just select it in the generator: https://developers.facebook.com/docs/reference/plugins/like/
This could be the solution, but to make it more visible, the user has to add a comment too.
So, i have come to the conclusion that since the update to the "new" timeline in Facebook, an like with no attached comment will not be displayed in the users timeline/activity feed.
When the user includes an comment during the Like click, it will be shown (This is only based on theory, i haven't been able to actually confirm this yet).
This can happen if the page does not have the correct open graph tags and can be fixed by inspecting them here. https://developers.facebook.com/tools/debug/
I am having trouble implementing the Like Description for one of my projects I am developing on my local machine. My problem was the I can only get the Title and Url to appear in the Like Description and it was missing the Image and the Text. I created a blank page with just a Like button and uploaded it onto a public server and noticed that I am unable to update the contents inside the Like Description.
For example, if you go to my test page below and click the Facebook Like button, you will see the Like Description description as 'Page description, expected to output'. However, if you view the page source, you will see that I have set the description with the Meta OG tag as <meta property="og:description" content="This is a new page description"/>. The current description tag is what I first used when I created this page.
So my question is why can I not update the Like Description? Does Facebook cache this somewhere on their server? If so, do you know how long it is cached for? In addition, will this work if I tested on my local?
http://www.sfu.ca/~jca41/stuph/test.html
<head>
<meta property="og:url" content="http://www.sfu.ca/~jca41/stuph/test.html"/>
<meta property="og:image" content="http://www.placehold.it/320x200/">
<meta property="og:description" content="This is a new page description"/>
<meta property="og:title" content="Site title"/>
<meta property="og:type" content="game"/>
<meta property="og:site_name" content="Site name"/>
<meta property="fb:admins" content="690014395"/>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.sfu.ca/~jca41/stuph/test.html" data-send="true" data-width="450" data-show-faces="false"></div>
</body>
Facebook has a tool called Debugger, this tool fetches the latest content, and also updates it cache with the latest content: https://developers.facebook.com/tools/debug
This should help.
I got my code to validate with debugger but none of my properties are showing up on the new feed like I want them to. Instead it seems to show a Facebook default text:
Cosmetology & Spa Institute | Facebook www.facebook.com Facebook is a
social utility that connects people with friends and others who work,
study and live around them. People use Facebook to keep up with
friends, upload an unlimited number of photos, post links and videos,
and learn more about the people they meet.
How can I get it to display my og properties?
All code on my site is below.
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1" id="facebook-jssdk"></script>
<meta property="og:title" content="Cosmetology Schools and Beauty Salons" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.cosmetologyandspainstitute.com/facebook-tabs/CSI_Logo_2012-square.jpg" />
<meta property="og:url" content="http://www.cosmetologyandspainstitute.com/" />
<meta property="og:site_name" content="Cosmetology and Spa Institute" />
<meta property="fb:admins" content="1540268369" />
<meta property="og:description" content="The Cosmetology and Spa Institute has 2 of the best cosmetology and esthetician schools in Chicago. Our Illinois beauty schools, cosmetology and esthetics programs, provide results that truly matter." />
</head>
<body>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style="margin-left:25px" class="fb-like" data-href="http://www.facebook.com/CosmetologySpaInstitute" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</body>
Just tested it – can’t find any problems, your description and image show up as in the meta elements.
It's because the data-href on your like button is pointed at a page on Facebook (http://www.facebook.com/CosmetologySpaInstitute) not the page the like button is on, so the opengraph tags never even get read. Instead Facebook scrapes what it can from the page on Facebook.
In effect, clicking like doesn't like your webpage, but your Facebook Page.
i have this facebook page: LINK
And i want to implement multiple facebook like button on product page on site: LINK
When i click on "Like" Buttom, this aways shows "1" and when refresh the page, this count disapear.
for my product page i use:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and for buttons:
<div class="fb-like" data-href="http://www.calcadosabruzzo.com.br/2012/catalogo/1402.html" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-font="segoe ui"></div>
for each phantom pages for the products i use these meta tags:
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">
<head>
<title>Calçados Abruzzo - Ref.: 1402</title>
<meta property="og:title" content="Calçados Abruzzo - Ref.: 1402" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://www.calcadosabruzzo.com.br/" />
<meta property="og:image" content="http://www.calcadosabruzzo.com.br/2012/produtos/1402_5122_Marrom_montila.jpg" />
<meta property="og:site_name" content="Calçados Abruzzo" />
<meta property="fb:app_id" content="100002115061810" />
<meta http-equiv="refresh" content="0;url=http://www.calcadosabruzzo.com.br/2012/catalogo.html">
</head><body></body></html>
i dont know where to get the APP_IP becouse the client make his page on facebook and dont make an APP
when i put the product page on Facebook Debug, show me these errors: LINK
How to solve this? Its the first time i use this Plugin...
I managed to find few reports on this behaviour. I seems Facebook introduced a bug because even their reference where you can create like button gives errors. What people suggested is to make an app through developers.facebook.com/apps
Get the app_id from there and in the app settings under App Domain add your website (calcadosabruzzo.com.br).
For fb:admins you should add the app admin id (probably yours).
Hope this helps.
I am trying to create a share button for links using the Facebook share button:
http://www.facebook.com/facebook-widgets/share.php
http://wiki.developers.facebook.com/index.php/Facebook_Share
However when I try to use the t value in my URL's they don't work.
I even tried using the example on the API page:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fdevelopers.facebook.com%2F&t=Facebook%20Developers
And it doesn't work... It sets the title as developers.facebook.com not Facebook Developers as specified by the URL
Anyone know how I can make this work correctly?
I want my share links to come up as... 'Title Of what I am sharing' and then... the url directly to that item.
The Facebook share link dynamically fetches the title and images from the page/website to share. The title specified in the link is only used while Facebook loads the page details. Check this link out:
http://www.facebook.com/sharer.php?u=http://www.rackspace.com&t=SOME%20TITLE
My solution to the title parameter is:
as url, add to the page url a variable (lik real_title):
http://www.facebook.com/sharer.php?u=http://mydomain.net/mypage?real_title=MyTitle
Then, in the index.php page:
< title>
<?php if (isset ($_GET['real_title']))
print ($_GET['real_title']);
else
print ("Default page title"); ?>
< /title>
Facebook crawls the given URL in search of Open Graph meta tags. It gives precedence to the contents of those tags, if they're present. Here's a sample of what the Open Graph tags look like:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
More info at http://developers.facebook.com/docs/opengraph/
Try Facebook Feed dialog http://developers.facebook.com/docs/reference/dialogs/feed/
Use direct URL example
I also met this problem, but i have found the problem because i didn't put facebook code in that file http://bannedadsense.com/banned-adsense-list/isbanned, i was very stupid with it and lost time to fix, but now i'm lucky, i have just fixed done now, simple only copy fb code to all pages you want to use fb share like button.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=put_number_id_here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>