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
Related
When fbml was supported by fb, you could use iframes but is there a way to conduct a survey style in a fb post with embedded swf files.
Because I develop using Adobe Flash Builder & Adobe Flex 4.6+?
We can share content on facebook, to do that we use Open Graph tags which are included in your page’s HTML and allow the Facebook Crawler to generate previews when your content is shared on Facebook.
You can start here : https://developers.facebook.com/docs/sharing/best-practices#tags and https://developers.facebook.com/docs/opengraph/using-objects and If you have questions, I am here to help you.
Take this example :
<html xmlns:og="http://ogp.me/ns#">
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="og:type" content="game" />
<meta property="og:url" content="http://your.site.com/page.html" />
<meta property="og:title" content="title here" />
<meta property="og:description" content="description here" />
<meta property="og:image" content="http://your.site.com/image.jpg" />
<meta property="og:video" content="https://your.https.site.com/your_swf.swf" />
<meta property="og:video:width" content="480" />
<meta property="og:video:height" content="360" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
This html code will give you an export like this :
For more details you can also see : https://developers.facebook.com/docs/games/feed-gaming and for you debug on facebook, to verify if you get what you want, you can use facebook debug page here : https://developers.facebook.com/tools/debug/og/object/
No, it isn´t possible, is like trying to post a gif on fb, it will only show the link
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 ave embedded youtube video on my CodeIgniter page, i'm using official youtube embedding code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/msHFJhMqaKI" frameborder="0" allowfullscreen=""></iframe>
But when I try to share my page into facebook, i have no thumbnail, is there a tag or something what can help me with sign my video as future facebook thumbnail?
yap you should add the meta tags in your head portion
<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />
after adding meta tag you can check what facebook scrap from your page
facebook linter
here is some other meta tags that will be helpfull
<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"/>
For more information
visit this link ..
I included Open Graph Tags to convert my web page to a Facebook page so that if I like my web page, it should appear in Likes & Interests in my Facebook profile. But its not working.
Following are the open graph tags i am including:
<meta property="og:title" content="Proto"></meta>
<meta property="og:url" content="<?=SITE_URL?>"></meta>
<meta property="og:site_name" content="Proto"></meta>
<meta property="og:description" content="Lets you create prototypes for web apps." />
<meta property="og:image" content="<?=SITE_URL?>images/proto.jpg" />
<meta property="og:type" content="website"></meta>
<meta property="fb:app_id" content="284826761590524"/>
I included the Facebook Like button on my site. When I click Like, it does say Haris likes this, but this site does not appear in my Likes & Interests section. Why ???
After converting to Timeline view I did find the Like i made in the Likes section.
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.