I have written a simple facebook application using PHP SDK. Application works well but application name (main title which is tagged this on this image : http://xmages.net/storage/10/1/0/e/2/upload/fd7d8c6f.jpg ) looks as "php-sdk". How can I change it ?
You can change the name of your application under the developer settings http://developers.facebook.com/apps click on edit settings and the first page should allow you to update the display name. You can also change your canvas url by changing the namespace.
It looks as though the image you're showing is when you try to share a link to your application, correct? That title and other info is set in the headers under specific Facebook metadata.
Check out their documentation on the meta tags at http://developers.facebook.com/docs/opengraph/
The specific tag for the title is <meta property="og:title" content="[your title here]"/>, this will be found in the HTML <head> area of your application.
Related
I used to have my website hosted through Shopify, and when I linked to it in my LinkedIn job description the logo showed up. I've since moved my website to GitHub Pages, and now the logo is blank when I link to it in LinkedIn (or anywhere else for that matter). Is there something I can do to fix this, or is it just a con of GH Pages?
It always helps to include a link to the codebase for reference, but it looks like you're likely working with this repo on your GitHub profile.
It's possible that Shopify or a theme you were using before included these by default, but typically you have to specify the preview image in your site's metadata. The preview images for formatted links are pulled from an Open Graph image property, which you define in a meta tag in your HTML's <head> section (see the OG documentation here). So, in your head include file, you'd add a meta tag like this:
<meta property="og:image" content="https://graemeharrison.com/assets/img/logo.png" />
Then, ideally, you'll include this head file in each layout file so that it's included in each page's HTML.
A couple of things that worked for me:
Put your image in your 'public' directory near index.html, and in your meta tag retrieve it with content="http://yourdomain.com/yourimage.png". (https didn't work for me but http did)
Also, https://www.linkedin.com/post-inspector is a good tool to check your og image appears.
I've been reading guides and examples for a long time (hours) but I can't manage. I tried to use all html meta tag like title, description, and og:property. Also tried to use the link sharer and also to create a new blank page with just the info I want to share to facebook in order to test. Also I tried to generate an random url in php so to have always a different url variable (the url to share and also the url of the main page containing the script). I also grabbed (url linter) a lot of time the url to clean the cache of facebook. It always give me the title of the site domain as title or the url itself as the shared title and description. I don't know what to do.
The main web site is from joomla. In the code of index of joomla I put a php include if the url has the variable "articolo" id. This incuded php page has regulat head body etc. So maybe I facebook check the main meta of joomla first? So now I tried to open a popup with just the page for sharing. Look here: link
It's possible that the title is locked in, meaning that after X number of likes Facebook doesn't allow you to change it anymore. Can you give us an example URL you're having issues with?
EDIT
Ok, now the link you provided shows some very interesting output. http://modernolatina.it/wjs/index.php?option=com_content&view=article&id=96&Itemid=258&autore=6&articolo=6
First, you webserver, instead of sending back a 200 code, is sending back a 500 code.
Secondly the HTML your webserver is sending back has two HTML tags (Do a view source on the content returned)
Fix up those two issues and I think the linter will be happier with your page.
Test your page here:
http://developers.facebook.com/tools/debug
I have a simple html page/app with all of the common meta:og tags.
PROBLEM: og:image is not getting picked up when app is run within fb.
the app can be accessed via:
1 --- the fb linter ... WORKS ... http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.keleia.com%2Fapps%2Ffacebook%2Fapp_canvas_celjska_puzzle%2F
2 --- the app within fb ... DOES NOT WORK ... http://apps.facebook.com/celjska_puzzle/;
I use window.open( "http://www.facebook.com/sharer.php?u=..." , ... ).
if you wish to test the problem ... visit either url2 from above; look at bottom left corner of the app there are 2 fb text buttons ... use the RIGHT-most of the two fb links ( "Share With Your Friends" OR "Deli s Prijatelji", depending on language prefs. ).
any thoughts as to why the og:image IS NOT showing up when I use the app inside of fb iframe/canvas??
thanks for your time,
Shannon
You are using the old "sharer" which doesn't let you directly manipulate the image you want to share. The opengraph tags will not work as intended in this case because your tags are on your domain while you are trying to share the "apps.facebook.com" domain.
Use the feed dialog referenced below. You will be able to display the exact content you want:
https://developers.facebook.com/docs/reference/dialogs/feed/
I am trying to find a way to embed a share/+1 link for Google+ in a Newsletter, much like the Facebook share and tweeter tweet links can be embedded in a newsletter, which can be achieved with the following two urls:
https://www.facebook.com/sharer.php?u=[URL]&t=[TEXT]
http://twitter.com/intent/tweet?source=sharethiscom&text=[TEXT]&url=[URL]
Is there a similar functionality available for Google Plus?
All I could find on my own, is the Google+ button, which unfortunately uses JavaScript and thus it cannot be used in an email newsletter. I would expect Google to provide a static url fallback, but I cannot find it anywhere.
https://plus.google.com/share?url=http%3A%2F%2Fexample.com
You can share the link on Google+ with the official Google+ share link.
Replace the url parameter with the URL encoded link you want to share.
This one works fine for me :
https://plus.google.com/share?url=your-page-url
The share link allows you to do this. It will work in an email, but it's not quite the same as the +1 button.
To use the share link, add a link element to your email that complies with the Google+ Buttons policy. Set the href attribute to https://plus.google.com/share?url={url encoded share target}
For example, linking to https://plus.google.com/share?url=http%3A%2F%2Fexample.com will allow you to share example.com on Google+: (yes, that is a working demo).
Check out the official docs for more info.
If you use this approach please be aware of the fact that it is not a direct replacement for the +1 button. The link shares the target URL on Google+, but it does not actually +1 the target page. Only the +1 button can +1 a page.
Solution for those who needs custom title, description and image. You should make following changes to target URL:
Step1. add itemscope itemtype="http://schema.org/LocalBusiness" into <html> tag. It will look like <html itemscope itemtype="http://schema.org/LocalBusiness">. More itemtypes here
Step2. Place the follwing meta tags into <head>, change content attributes according your needs:
<meta itemprop="name" content="{Custom title goes here}">
<meta itemprop="description" content="{Custom description goes here}">
<meta itemprop="image" content="{http://www.your_url.com/your_image.png}">
Step3. Add the following link to your newsletter or anywhere you want:
Share it
Tip. To check how google sees your page, you can use this tool http://www.google.com/webmasters/tools/richsnippets. Probably you'll be interested in section Extracted rich snippet data from the page
Good luck, Lauris
I'm using the following.. :)
https://m.google.com/app/plus/x/?v=compose&content=[TEXT]%20[URL]
I personally suggest Google Plus Interactive Posts button
https://developers.google.com/+/web/share/interactive
to use in your apps/websites.Here Google Plus allows many customizations to do according to the requirement. I have used it in my app. Its a better option than Share button.
Maybe this helps. It works (partially) for me.
http://www.stateofsearch.com/share-on-google-plus-any-website/
There has got to be a way to do this by hacking the +1 script.
If you are interested in just changing the apperance you should download and modify this to suit your requirements.
Then, add this to your css:
.Uu .KF {
background: url("your-replacement-image") no-repeat scroll -132px -21px transparent !important;
}
to override the Google icons. However, this is probably very unstable and subject to change.
When someone posts a link on facebook, a script usually scans that link for any images, and displays a quick thumbnail next to the post. For certain URLs though (including mine), FB doesn't seem to pick up anything, despite their being a number of images on that page.
I read up that FB prefers the "image_src" rel tag for the image the user wishes to specify, but this does not generate that thumbnail either for my site.
My url goes directly to the DNS, and is not forwarded, so I don't imagine that could be the problem either.
Does anyone have an idea as to why FB can't generate any thumbnails from my site?
The easiest way is just a link tag:
<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />
But there are some other things you can add to your site to make it more Social media friendly:
Open Graph Tags
Open Graph tags are tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
<meta property="og:tag name" content="tag value"/>
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation.
http://developers.facebook.com/docs/reference/plugins/like
I know this question is old, but I recently dealt with the exact same problem and went round and round on it for a couple weeks. Multiple searches on Google turned up a lot of useful information, but most of it was focused on Open Graph tags, which I wasn't interested in using. Turns out my site had multiple issues, but here are some of the basics.
As EightyEight said, make sure your HTML is valid - and the same goes for your javascript and server-side code (PHP, ASP, etc.). I had a small PHP error in a piece of code that was executing as a separate call to the server from the main page. Due to a number of bizarre coincidences, that code was generating a 500 error - but ONLY for IE6 and strict parsing engines like the W3C validator and the Facebook page crawler. The problem didn't appear in modern browsers (Chrome 4, FF 3.5, IE 8, etc) so I didn't see it right away, but older/stricter clients were showing the 500 every time and that was the main reason FB wasn't crawling our page (when everything else seemed to be correct).
Regarding Randy's response, he's correct that Facebook will keep an old cached copy of your page long after you've updated it. FB claims it's only held for 24 hours, but I experienced much longer times than that. FORTUNATELY, FB has released their "URL Linter" tool that will show you a preview of how your page will appear when being shared on FB, and it will force FB to instantly update its cache of your page. This was a lifesaving tool. You can find it at http://developers.facebook.com/tools/lint/
Regarding the URL Linter tool, be aware that each variation of a URL is cached separately on Facebook, so "www.example.com" is not the same as "example.com". Also, unique capitalization is stored as well, so "ExampleOne.com" is not the same as "exampleone.com". (This led to a lot of confusion between my client and myself when it appeared to me that the cache had been updated just fine and the client claimed they weren't seeing the updates. Turns out I was looking at exampleone.com and had used Linter to update the cache, but they were looking at exampleOne.com which I hadn't submitted to Linter. As a result, I ended up submitting quite a few variations of the URL to Linter just to cover the bases.)
WyrdNEXUS's advice to use the image_src link tag is spot-on. This allows you to be sure that FB is scraping the best possible image for your page. There are some varying guidelines out there about what specs the image file should have, but I've successfully used a 128px square image and have seen a 130x97 image make it through as well. Here is Facebook's official documentation from http://developers.facebook.com/docs/reference/plugins/like/:
Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
Obviously, FB will resize a large image for you, but you'll almost always get better results if you resize it yourself beforehand.
Regarding Mike Cooper's link to the eHow article, avoid using step #1 in that article. It was valid advice when the article was written and when Mike posted the link, but it's now better to use the URL Linter tool for previewing how your page will appear when being shared. By using Linter, you won't cause FB to cache a (potentially) bad copy of the page before you get a chance to tweak it.
Use the facebook lintter available here. http://developers.facebook.com/tools/lint/
This will check your link and re fetch any images. this also clears any old cache.
Or try this - https://developers.facebook.com/tools/debug
To change Title, Description and Image, we need to add some meta tags under head tag.
STEP 1 :
Add meta tags under head tag
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
NEXT STEP :
Click on below link
https://developers.facebook.com/tools/debug
Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags. Click on DEBUG button.
Its done.
You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In above url, u = your website link
ENJOY !!!!
try this: http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html
Is the site's HTML valid? Run it through w3c validation service.
Actually, if you've already tried linking that page on Facebook BEFORE adding the "image_src" link, Facebook will keep using the old cached copy and not even see your changes. Try modifying the URL by removing or adding the 'www', or duplicate your page to test it.
I've noticed that Facebook does not take thumbnails from websites if they start with https, is that maybe your case?
had the same problem and figured out that my head closing tag was in the wrong place
Old question but recently I seemed to be running into same issue with thumbnail images from my link not showing in status updates on Facebook. I post for many clients and this is relatively new.
FB doesn't seem to like long URLs anymore — if you use a URL shortener such as goo.gl or bitly.com, the thumbnail from your link/post will appear in your FB update.
Try using something like this:
<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`
Seems to work just fine on Firefox as long as you use a full path to your image.
Trouble is it get vertically offset downward for some reason. Image is 200 x 200 as recommended somewhere I read.
If you used any plugin for seo then Check 1st your seo plugin settings.Then find out Noindex setting if Enable Media for Noindex then disable it.