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 ..
Related
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
I own a video site. I need to share one video on my site on Facebook embedding it on the timeline, just like Youtube does. When a Facebook user clicks on the preview image on my Facebook profile my player should open into the timeline and the video should play without opening a new page.
I'm using flowplayer on a Wordpress site. Of course I used OG: tags. This is my <head> code:
<meta property="fb:app_id" content="123456789101112"/>
<meta property="og:type" content="video"/>
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="385">
<meta property="og:url" content="http://www.mysite.com/videogallery/title/"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="Some description"/>
<meta property="og:image" content="http://www.mysite.com/link-to-image.jpg"/>
<meta property="og:image:type" content="image/jpeg">
<meta property="og:video" content="http://www.mysite.com/flowplayer-3.2.16.swf?config={%22playerId%22:%22player%22,%22clip%22:{%22url%22:%22http://www.mysite.com/link-to-video.mp4%22},%22playlist%22:[{%22url%22:%22http://www.mysite.com/link-to-video.mp4%22}]}" />
I'm noticing a very strange thing: I have more than one Facebook account and I can see the embedded video just like I want it with one of these accounts. I only can see the preview image and the simple link to my site with the other ones.
When I click on the link button on my website , I get the notification on Facebook that I have liked such and such thing and along with that my Logo of the website Appears. However I want that the logo of the website is not shown but instead the Image of the product is shown.
I am using the step 1 like button on this URL https://developers.facebook.com/docs/reference/plugins/like/
You need to look at open graph meta tags and in particular the image tag. og:image.
A full example of tags and how they work can be found here http://developers.facebook.com/docs/opengraphprotocol/ but the general jist of what you need is:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Movie Website</title>
<meta property="og:title" content="My Movie Website"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://mymovies.com/images/logo.png"/>
<meta property="og:site_name" content="My Movies"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="Some content description blah..."/>
...
</head>
...
</html>
By setting this tag it should tell Facebook the image to load. You can test this via Facebooks tools online here http://developers.facebook.com/tools/debug
I am using the following script to share links with Facebook:
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>Share on Facebook
When facebook share screen popup opens it displayes title and description. I want to provide my own title and description of share are there parameters available for this?
Create a Facebook Application at http://developers.facebook.com/
Then embed Open Graph metatags in your document that describe to the Facebook document linter which title, image, description, and URL to use when shared.
Open Graph Documentation
Open Graph Debugger
Here is an example copied from the Facebook documentation that shows the Open Graph meta tags used to describe a website.
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
website: http://ogp.me/ns/website#">
<meta property="fb:app_id" content="YOUR_APP_ID">
<meta property="og:type" content="website">
<meta property="og:url" content="URL of this object">
<meta property="og:image" content="URL to an image">
<meta property="og:title" content="Name of blog">
<meta property="og:description" content="Description of object">
</head>
<body>
<!--a wonderful website -->
</body>
</html>
See http://developers.facebook.com/docs/share/ for more detailed view of the Facebook Share.
I think you can change the t= parameter to change the title of your share post on Facebook, not sure if you can change the description, I think the description comes from the meta Description of the page you are sharing.