I have incorporated facebook like button in my application
Suppose you like this page
https://developers.facebook.com/blog/post/397/
Then, when you go to your facebook wall, you will see "fb_account_name" likes an article on developers.facebook.com.
I want my like to work in this way. My like button is not working in this manner, it does not show my website name with sentence like "fb_account_name" likes an article on
I have get my code from here https://developers.facebook.com/docs/reference/plugins/like/
What should i do ?
The open graph protocol
In your page head tags, Add:
<meta property="og:site_name" content="Site Name" />
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="article" /> // site type (og type)
<meta property="og:url" content="http://example.test/" />
<meta property="og:image" content="http://example.test/og_image.png" /> // can be .jpg, too
<meta property="og:description" content="A sentence describes your site purpose" />
Those above will help Facebook to understand "How to publish the user action on their timeline" when hits the "Like" button
<div class="fb-like" data-href="http://example.test/myPage.html" data-width="450" data-show-faces="true" data-send="true"></div>
And remember to include Facebook JS
Related
I have a job portal website and on that I have a facebook button named as share in fb. I want that when user clicks on that button the that specific job description of my webpage should share on his wall.
<a rel='nofollow' href='http://www.facebook.com/share.php?u=http://testing.com/current_openings.php?JobId=".$jobiid."' target='_blank'>share in fbk</a>
Above link go to share page,but its content is coming from webpage about us page,not specific content.
Set the meta tags for each site you want to be shareable.
Put them in the HTML Header like this
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
The properties include descriptive meta-data about the article that we specifically want to present when
Is there any HTML/PHP/jQuery code to share picture on twitter and facebook? Not just the src of picture, but to display the picture on the sharing screen.
There's PHP & HTML, but not jQuery
Facebook
Facebook has something called Open Graph Protocol, to install them add the following meta tag between <head> of your page
<meta property="og:title" content="My awesome website title" />
<meta property="og:type" content="website" />
<meta property="og:description" content="my example website is on facebook!" />
<meta property="og:url" content="http://example.com" />
<meta property="og:image" content="http://example.com/og_img.jpg" />
Twitter
On the other hand Twitter provide its own meta tags called Twitter Cards to install it
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://example.com">
<meta name="twitter:title" content="My awesome website title">
<meta name="twitter:description" content="my example website is on twitter">
<meta name="twitter:image" content="http://example.com/og_img.jpg" />
Hint
PHP renders a HTML output, but the benefits of PHP is to deal with different page without editing each page meta tags every time you change your meta tags OR if you have a blog and each post has its own permalink and its own title, description, image .. etc, PHP comes handy!
Further reading
Open Graph Protocol
Twitter Cards
How to Create a Twitter Card - David Walsh Blog
i am having some tweets like things and i would like to post that custom text with facebook like button. is it possible if yes then how.
thanks
Use Open Graph Tags:
Put this tags on your page head section:
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="og:image" content="custom image path" />
<meta property="og:site_name" content="name of the website" />
<meta property="og:title" content="custom title" />
<meta property="og:url" content="url of the page" />
<meta property="og:description" content="custom description" />
<meta property="og:type" content="website/article/game etc.." />
</head>
use Linter to check your custom properties has affected.
More about Opengraph tags
You should add OpenGraph meta tags to the page located on URL you linking your like button. Once user click on Like Button Facebook crawl that page and post content of OG tags to feed.
Read more on Like Button documentation and Open Graph protocol
Although it is true as both the other commenters say you would need to create a facebook app which then would require a secure canvas URL in the end to be verified. Hence the obstacle is quite high.
Sometime ago I made a like button for my website with the help of this tool: http://developers.facebook.com/docs/reference/plugins/like/ and it worked well, the visitor could like the page and also make a comment.
Recently I noticed that the like button doesn't work anymore, when I click it the count goes +1 for a second then reverts back, also the comment windows appears and disappears as quickly.
I have searched the internet and found that I know have to have an appid, so I got one and added to my existing headers for facebook
<meta property="og:title" content="Title" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://www.myurl.com/url.html" />
<meta property="og:image" content="http://www.myurl.com/my/image/url.jpg" />
<meta property="og:site_name" content="Jocurile.US" />
<meta property="og:locale" content="ro_RO" />
<meta property="fb:admins" content="1058594454" />
<meta property="fb:app_id" content="294633860579624" />
Checked it with http://developers.facebook.com/tools/debug and it doesn't give any errors, but my like button still doesn't work.
The integration code that I use on my page is
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo $canonical;?>" send="false" layout="button_count" width="400" show_faces="false" colorscheme="dark" font="arial"></fb:like>
I haven't written my url because I don't want people to think I want likes but if it's necessary I will give you the url.
I just found out that the culprit was the facebook button color scheme.
People had to confirm that they liked my page but the button was showing the text colored in white over a white background, because the color scheme was dark.
I am building a News section for a client website (in ExpressionEngine) and they have requested that each article have the Facebook like button. So I went to Facebook's developer site and found the necessary code to make it work.
The problem I have is that if I like one article, it counts that like for all of them! I'm using my ee tags for title and permalink in the OpenGraph meta tags, but to no avail.
Open graph code:
{exp:weblog:entries weblog="news" orderby="date" sort="desc" limit="1" disable="member_data|trackbacks"}
<meta property="og:title" content="{title}" />
<meta property="og:type" content="non_profit" />
<meta property="og:url" content="{title_permalink=news/article}" />
<meta property="og:image" content="http://dallascityhomes.net/_images/dch-logo-big.png" />
<meta property="og:site_name" content="Dallas City Homes" />
<meta property="fb:admins" content="--removed--" />
{/exp:weblog:entries}
The actual button (it is wrapped within a exp:weblog:entry tag):
<div>
Tweet
<fb:like href="{title_permalink=news/article}" layout="button_count" show_faces="false" width="80" font="arial"></fb:like>
</div>
And of course the JS script for FB like, I moved to the bottom of the doc:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Has anyone encountered this before? Know a solution?
Do the og:url meta property and the href property of the fb:like tag appear to be rendering correctly when you view source?