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.
Related
Just wondering what HTML5 element is shown as the image for a Facebook post which contains a preview of the URL mentioned in the post?
I want to post a link to my website and have my logo appear in the image box of the URL preview...
Hopefully my question makes sense.
You can achieve that by adding Facebook specific OpenGraph meta tags in the header of your webpage.
Here are the meta tags you need to add
<meta property="og:url" content="WEBSITE LINK" />
<meta property="og:type" content="article" />
<meta property="og:title" content="IT WILL APPEAR IN BIG FONTS" />
<meta property="og:description" content="THIS WILL BE SUBTEXT" />
<meta property="og:image" content="LINK OF THE IMAGE" />
you can check out meta tags in details here
Also to verify how it will look and what actually Facebook sees through meta tags you can go to the Open Graph Object Debugger
Example shows what will be seen once you try to share https://images.google.com
Hope this is what you are looking for.
This Facebook post https://www.facebook.com/damnlolcom/posts/812448255487528 looks like a photo post but is actually link, it clicks through to an external site.
I have tried sharing a link, removing all og metatags from my site except image path but it doesn't look like that.
The closest I can get is the default link behaviour without any title description, so just an image with the url besides/below rather than displayed over the top of the bottom of the image.
So what sort of post is this?
Thanks for any help.
Check out the url in linter .
raw tags found on page
Meta Tag <meta property="fb:app_id" content="172220699476208" />
Meta Tag <meta property="og:site_name" content="Damn! LOL" />
Meta Tag <meta property="og:title" content="Turns Out My Friend's Mom Is A Racist" />
Meta Tag <meta property="og:description" content="Click for your daily dose..." />
Meta Tag <meta property="og:url" content="http://www.damnlol.com/turns-out-my-friends-mom-is-a-racist-47206.html" />
Meta Tag <meta property="og:image" content="http://www.damnlol.com/pics/998/d6c09d2cc01d04bc5e47483e85774aee.jpg" />
Meta Tag <meta property="og:type" content="article" />
Everything looks normal here . They are not using anything special . It is just facebook presents links in slightly different designs on feed on different times .
ps : try setting property="og:type" content="article"
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
How facebook identify the entered hyperlink and get data from that link. it shows thumbnails, text, pictures, etc. Does facebook using any javascript for framework?
Open graph protocol (OGP) is what helps Facebook get specific data from URL i.e. Web page title, site name, description ... etc
To install OGP on your site (page)
Add: prefix="og: http://ogp.me/ns#" into <html> tag
And:
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="{site_type}" />
<meta property="og:url" content="{page_URL}" />
<meta property="og:image" content="{Thumbnail}" />
between <head> tags.
Those above are basic meta properties You can read more about it on OGP
I have a website that uses the Facebook like button.
I am attempting to get the "Administration" link to show up on the page so that I can push content to people who like the page.
My page's HTML namespace is like:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#">
My meta tags are like so:
<link rev="canonical" href="http://mysite.com/welcome/" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="MySite" />
<meta property="fb:app_id" content="012345678910" />
<meta property="og:title" content="Name of my page" />
<meta property="og:description" content="Description here..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mysite.com/welcome/" />
<meta property="og:image" content="http://mysite.com/path/to/image.jpg" />
I have checked the page with the Facebook debugging linter and it passes without any warnings or errors. I am an admin of the app.
What am I doing wrong?
Note: I've also tried to put the <meta property="fb:admins" content="01234567" /> in to no avail. I've also tried different xmlns tags and even without any xmlns tags.
There is no og:admins tag. Try fb:admins and fb:app_id tags:
<meta property="fb:admins" content="USER_ID1,USER_ID2"/>
<meta property="fb:app_id" content="1234567"/>
You'll also need to press the 'Like' button.
1) Are you logged into Facebook
2) How long have you been waiting it can take some time to trickle thru Facebook's Servers.
3) The correct tag is fb:admins check Page Administration on https://developers.facebook.com/docs/opengraph/ -
<meta property="fb:admins" content="USER_ID1,USER_ID2" />
Also your og:app_id is wrong it is fb:app_id
4) At the bottom of the debugger it will give you a Graph URL click that to confirm the admins are correct
Whats the URL you are trying in the debugger?
It appeared that the problem stemmed from having the wrong xmlns tags in the <html> element.
I had a custom xmlns tag that was sending likes to the wrong graph (I believe...).
The current tags that are working are:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
After this change, liking a page would show up the Administration link.
Thanks for the responses!