I'm using custom AddThis buttons to share things in Twitter and Facebook... for Twitter share I use:
addthis:templates="{ twitter: ' {{title}} # {{url}} via #agenciauzzye' }"
I know that for the Facebook custom description, title, url, image and other things I must have to use meta tags. The problem is that I have a blog with one static page and all the content (posts) are loaded inside one div with AJAX. The main page is a posts list where I have the buttons to share each post...
How do you guys share content in Facebook with AddThis without set up the meta tags???
The only solution I found is to use direct Facebook share URL, without pass by AddThis code (and so, without log for analysis). Something like:
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[summary]=<?php echo rawurlencode(striptags(abrev_texto(get_output($descricao),1000,"p"," ...",true)));?>&p[title]=<?php echo rawurlencode(get_output($post->titulo));?>&p[url]=<?php echo rawurlencode(ROOT_SERVER . ROOT . "blog/" . $urlAux); ?>&&p[images][0]=<?php echo rawurlencode($imageShare);?>','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)"></a>
You can see more details in http://blog.uzzye.com
Luckily the Facebook developers were smart enough to realize they cannot predict every type of web page on the internet. Instead, they offer a few simple meta tags that control how this information is passed to Facebook:
title: <meta name=”title” content=”The title of the link being shared” />
short description: <meta name=”description” content=”A description of the page” />
optional thumbnail image: <link rel=”image_src” href=”http://example.com/images/image.jpg” />
That’s all you need to tell Facebook what to populate in the link details when someone shares your page with others on Facebook.
Related
I am working on a site where posts are made and I'd like to give visitors the ability to "share" a particular post that they link on their timeline. I have never done any social media integration, but I followed the instructions here and am still having problems. It's easier to show you than try to explain it. Go to http://www.badcustomerbureau.com/ and click on any of the Share links at the top of any post. Instead of sharing the post you clicked on, it tries to share a generic post with the same photo every time (photo of a dog). I used the code generator on the FB help site and it still has this issue. Please help!
The problem is in your meta tags. if you want your users to share any post to their timelines,then u have to give proper meta tags for each post.for eg: you have to pass the image name,title and description of particular post
<meta property="og:title" content="Worlds Worst Customer" />
<meta property="og:image" content="http://www.badcustomerbureau.com/uploads/evidence/62.JPG" />
OR
You can also call a javascript function onclick of your share button.like
<button type="submit" title="Share" onclick="Javascript:fbSharing('https://www.facebook.com/sharer/sharer.php?u=" + post_url + "');>
and add javascript function to your page
<script>
function fbSharing(post_url) {
var url = new String(post_url);
window.open(post_url , "share_dialog", "width=500,height=300");
}
</script>
I've just stumbled upon sharing a text (a hashtag) togeher with a text on Facebook / LinkedIn. Here is hwat I am trying to do (hashtag: #STUFF):
<li class="facebook"><a target="_blank" href="http://www.facebook.com/share.php?u=<?php echo '#STUFF'. urlencode(get_the_permalink()); ?>">facebook</a></li>
THIS, unfortunately doesn't work (no wonder!)
There is "Say Something about it" field on FB. Can I add a piece of code to the sharing button so that field will contain text (pretty much like with "subject" for email sending).
I am able to do that with Twitter. Like this:
<li class="twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title() . ', #STUFF'); ?>&url=<?php echo urlencode(get_the_permalink()); ?>&original_referer=<?php ?>">twitter</a></li>
While I am uncertain about the other services, you can customize the share text on LinkedIn using this format (Note that all of the {} placeholder values should be replaced with URL-encoded values):
Link text
E.g.
Link text
Complete documentation for sharing content can be found here: https://developer.linkedin.com/docs/share-on-linkedin
Facebook
Using sharer, you can only specify url, like so...
https://www.facebook.com/sharer.php?u={url}
Source: Facebook Sharer Documentation.
BUT, if you register your app, get an app id, and install the Facebook share dialog plugin, then you have virtually unlimited access to specify sharing...
https://www.facebook.com/dialog/share?app_id={app_id}&display={page_type}&href={url}&redirect_uri={redirect_url}
Source: Facebook Dialog Documentation.
LinkedIn
So, you cannot really specify any text when sharing on LinkedIn. You can only set the url param. But you can set the og: tags to show title, image, etc., as a preview in your share page:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Source: LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn.
Verify that you did it right with: the LinkedIn Post Inspector.
BUT, similarly to Facebook, if you register your app, get an appid, etc., you can use this format fully to your heart's content...
"com.linkedin.ugc.ShareContent": {
"shareCommentary": {
"text": "Hello World! This is my first Share on LinkedIn!"
},
"shareMediaCategory": "NONE"
}
Source: Microsoft LinkedIn Documentation: Share on LinkedIn.
We are using the Facebook comments plug-in on our pages using:
<div class="fb-comments" data-href="<?=$page_url?>" data-num-posts="2" data-width="520"></div>
...where $page_url contains the URL of that specific page (dynamically generated, think of it as article pages). However, when posted on Facebook Wall, the image and page content are different (shows a different page). When we click the link though, it does go back to the correct page.
Why does it get an image and page content from another page even though we have a unique ID on the URL?
I figured out how. I just need to put the necessary open graph metadata on top like so:
<meta property="og:description" content="[page description]" />
<meta property="og:image" content="[page image]" />
This way, it always shares the correct image and description for that page.
(For more info on open graph: http://ogp.me/)
Is there a special url for sharing to Facebook and Twitter for mobile?
Or are they the same as those from websites?
Using
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Twitter
for Twitter and
<script>
function fbs_click()
{
u='www.something';
t='title';
window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=someurl" onclick="return fbs_click()" target="_blank" class="">Facebook</a>
for Facebook.
Your sharing implementation should be the same and should work so long as your mobile users have devices capable or rendering JavaScript. Otherwise you can use each platforms' API url to share inside a link, the only problem is the callback redirects them either to Twitter or Facebook and they'll have to manually return to your site. The links are as below:
Sharing on Facebook:
http://m.facebook.com/sharer.php?u=<urlencoded url>t=<urlencoded title>
For example:
http://m.facebook.com/sharer.php?u=http://www.google.com
Updating status on Twitter:
http://mobile.twitter.com/home?status=<urlencoded status>
A couple of notes regarding Simpleton's answer.
The http://m.facebook.com/sharer.php URL may not be what you want. The site that you provide in the u query parameter needs to have some tags in the page in order for the share
page to be at all interesting. Just try putting another URL in there other than Google to see what I mean. I was never really able to figure out what it is looking for in the page of the site in order to show anything useful in your share page. I did not see any way to provide extra information about the site you are sharing.
The t query parameter is no longer read by facebook as far as I could tell
I found that the Facebook feed dialog was a better sharing alternative (https://developers.facebook.com/docs/reference/dialogs/feed/). See the example at the bottom of that page for the information you can share. Paste that example URL in to your browser to see what it looks like. You can play around with the parameters to see what each parameter controls in the post. For example, if you don't provide the caption parameter, it seems that the base URL of the link parameter is used in it's place. To use the feed dialog approach, you need to register your app in Facebook to get an app_id that you will need to include in the feed dialog URL. You also associate your app with a web site URL, which you also use in the feed dialog URL. If you want Facebook to serve you a mobile-friendly page, append &display=touch to the end of the feed dialog URL. Lastly, you must provide redirect_uri parameter where the user will be redirected (with the post ID included as a query parameter), so you have to have something at that URL to handle the response.
Regarding the http://mobile.twitter.com/home?status URL, I learned a couple of things: first, any URL's in include in the status will not be shortened (bummer); second, if your status includes any single quotes, they will be encoded as ' (HTML entity code) but will not get decoded when your post the tweet. However, this doesn't happen if you are posting via the desktop, using the same URL. You can see what I mean by trying the following URL from both your iPhone (I was using Safari on iPhone) and then from your desktop (I was using Safari):
http://mobile.twitter.com/home?status=Wayne's%20World
Note, I do an javascript encodeURI on the status, but single quotes are not generally encodable characters by most URL/I encoders. There are some that will replace the single quote with a %27, but I tried inserting that manually and it still didn't get decoded in the status text.
I hope this information helps someone comes here looking for simple Facebook and Twitter sharing options.
Twitter - This is how I solved the tweet by url for all devices/browsers issue:
http://twitter.com/intent/tweet?text= + encodeURIComponent(tweet);
encodeURIComponent - is a built in javascript function, explained here.
The 'http://mobile.twitter.com/home?status=' is not supported, and you will get encoding issues when twitter requests a login.
Facebook - For facebook sharing I used Facebook API example
The url is ok, but you need to do some work on your server to get Facebook to really make it look decent. Facebook now uses "Open Graph", which allows you to add special tags to your web page that Facebook understands. You can define what types of media are on the page, even add your own objects with definitions you create inside your Facebook app. The link to the developer Open Graph objects page is Here.
A sample of Open Graph on a detail page might look like this:
<meta property="fb:app_id" content="YOUR FACEBOOK_APP_ID }}" />
<meta property="og:url" content="The URL that this page is on" />
<meta property="og:site_name" content="Your domain" />
<meta property="og:title" content="Title of your page" />
<meta property="og:type" content="This is very important - it is how
Facebook refers to your post. Image, video, text, etc. Even custom stuff is
possible" />
<meta property="og:image" content="image url for facebook to display on
the user's wall" />
<meta property="og:determiner" content="auto" />
<meta property="og:description" content="A description you want with this
content" />
And so on. This all goes in the <head> of the page of the actual url you are supplying to Facebook. Then Facebook will translate this into the appropriate post. In addition, you need to set up the Open Graph on your apps developer page, so that Facebook knows to look for the og: tags. It's complicated, but it does work.
Good luck!
We are making use of the FB Like/Share functionality on various pages for our client's site(s). On each page we want shared, we add the following in the meta tags:
<head id="ctl00_Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- social sharing metadata -->
<meta property="og:title" content="Our Site Title" />
<meta property="og:description" content="A description to be used in the share dialog." />
<meta property="og:image" content="http://us.oursite.com/images/FB_ShareThumbnail_US.png" />
<title>Our Page Title</title>
<!-- favicon -->
<!-- stylesheet and js links -->
<!-- inline js -->
</head>
In addition, we also display a Facebook graphic with the following HREF:
The client would like a standard Image, Title, Description used, regardless of the actual page\article shared (sort of "brand control"). We currently have our og: meta tags setup to render down the same data for each page/article.
When the users click the "share" functionality, they don't get a page/article picture, nor any good description or title (as i thought the tags were supposed to provide).
The pages currently being shared are accessible to anonymous users, so the FB bot can access the pages. The image specified in the og meta tag is also available to anonymous users. The first question is why does this method of sharing not seem to use the correct defaults for sharing??
The next question is, the next feature request is to have authenticated pages be able to be shared with the same default image, title, description. I was approaching this from a server perspective, where I'd look for the FB bot and redirect the bot to a "static" page that contains only the minimal markup needed to extract the image, title, description. I've proofed this and it works pretty well. I just feel like it might be a bit complicated. Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??
Thanks In Advance!
Update:
I found this related Q/A on StackOverflow: Facebook Share doesn't show my description or my thumbnail
When I ask "Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??", this is the type of thing I am talking about. If I can pass all data needed to the Facebook sharer.php via querystring parameters (and this results in no Facebook scraper action needed/taken), that is ideal, then I don't need to write any server side logic to re-route the Facebook scraper.
I tried taking the Url provided in the above noted Q/A, reformat with my data, but no luck. Wondering if this is documented somewhere on FB?
There can be a number of reasons why it isn't using the provided og meta data, but unless you share us the code/url we can just guess what might be the issue.
Make sure the og metadata resides inside the <head> tag as it won't be looking for them anywhere else. If you define them in the <body> tag or some other place, it will just ignore them.
If the pages have been liked before you added the metadata, you need to refresh the cache Facebook has for the page by providing the url's to the Facebook linter tool.
If neither of those steps resolve the problem, please share the url/code.
As far as your question regarding authenticated pages goes, you could just add that metadata on the public, non-authenticated version of the page, without checking is it actually Facebook or not, as when someone shares the page, that same information becomes public regardless of the users who view the share have access to the page or not.
After some further digging, I found a way to work with the "sharer.php" functionality to specify exactly the Image, Url, Title, and Description I want displayed, without relying on the OG meta tags. This will work for both anonymously accessible pages and pages that require an authenticated user. The linked StackOverflow Q/A (http://stackoverflow.com/questions/2950189/facebook-share-doesnt-show-my-description-or-my-thumbnail) got me headed in the right direction, then after some digging, found some other posts in the Facebook developer forums (http://forum.developers.facebook.net/) by searching for "sharer.php". This one in particular got me to where I needed to be: http://forum.developers.facebook.net/viewtopic.php?id=101127
In essence, there is no need for the OG meta tags. Just ensure the pieces of your URL are correctly encoded and that you are using the correct parameter keys (i.e. "&p[title]=" rather than "&t=".
After removing the OG meta tags from our site/pages, I also modified our Facebook sharing button/link to render the following markup:
<a href="http://www.facebook.com/sharer.php?s=100&p[title]=Our+Site+Title&p[url]=http%3a%2f%2fus.oursite.com%2fdefault.aspx&p[images][0]=http%3a%2f%2fus.oursite.com%2fimages%2fFB_ShareThumbnail_US_90x85.png&p[summary]=Our+facebook+description+that+is+used+on+the+FB+share+page." target="_blank">
<img src="/images/fb_icon_20x20.png" />
</a>
Note that I was tempted to investigate whether I could find a parameter that allowed me to specify a default "message", but that was not a requirement for us, so perhaps later on I'll dig for that information.
How about this now:
https://developers.facebook.com/docs/sharing/webmasters/crawler
You just need to whitelist the facebook crawler