Twitter has a beautiful share API. If I want to customize text, I just include it in the URL I'm linking to:
<a href="https://twitter.com/share"
class="twitter-share-button"
data-text="whoa, check out this SUPER-EASY CUSTOMIZED TWEET TEXT!"
data-via="foo">
Tweet
</a>
My question is whether there is a way to do this with Facebook, Google Plus, and LinkedIn.
I want to be able to do this without having to put og meta tags in the link target. Basically instead of the link target having knowledge of the message, I want the share button itself to have that knowledge.
Thanks
It is a good idea to populate your pages with metadata to describe them to non-human systems including search engines, social networks, screen readers etc. For Google+, you have your choice methods: Schema.org metadata, OpenGraph, or simple meta names/descriptions. You can read more about how to populate snippets from your site at https://developers.google.com/+/plugins/snippet/
Related
This is my post featured image.
This is my post entitled "First post" with social icons at the bottom for sharing using social media feather plugin
This is what shows up when I clicked the facebook button
The image above shows that it doesn't return the right image set as featured image for the first post to be shared in facebook. I also encountered the same problem using WP Social Sharing. Can anybody help me solve this please. Thanks a lot.
Facebook, and other platforms that allow social sharing (LinkedIn, Twitter, G+, etc), all use a protocol called OpenGraph.
In it's simplest form, OpenGraph is a series of meta tags placed on a web page that describe that page. Common tags include a title of the page, description, image and a category. It is this OpenGraph image that Facebook uses in it's preview for the social share.
The tag itself is called og:image, and Facebook suggest it is at least 1200x630 pixels, although they will still use the image if it is less than that. As a side note for anyone viewing this thread and having the same issue with Facebook apps - you'll need to serve the image over HTTPS for that, something you don't need to do in this case.
I would suggest viewing the source of your page and finding the OpenGraph tags. If none are present (very possible) then Facebook is just doing it's best based on what it sees on the page. You can remedy this by adding your own tags, or using one of the many OpenGraph plugins available for WordPress.
More information on Facebook's best practices for social sharing are available.
I can't see any solutions out there that allow this specific request without a lot of scripting or meta tags so I'm hoping there's a simple way to do this.
I'm looking for a custom share links for all four social networks. Let me give a concrete example.
If someone clicks on a twitter icon link on my site, they're clicking the following:
<a href="https://twitter.com/home?status="Welcome to my site and tell all your friends! #sitename #mysiterules http://bit.ly/site">
<img src="twitter.png">
</a>
it will go to Twitter's site and produce the following:
This allows someone to very quickly promote my site with a custom message that they can change if they like but there's no effort involved outside of clicking the icon link.
This is exactly what I want to do with the other three social networks, with a custom message and links. They can also pull the default logo of my site which twitter can't do.
How can I accomplish this?
I recommend you use the proper social sharing buttons like we implemented in on our live campaign page, but here is some code I stole from a mockup of the campaign page.
<div class="leader-half kids0514-share">Share this on:
<img src="images/en/share_mail.jpg" alt="email">
<img src="images/en/share_fb.jpg" alt="facebook">
<img src="images/en/share_tweet.jpg" alt="twitter">
<img src="images/en/share_pin.png" alt="pinterest">
<img src="images/en/share_plusone.jpg" alt="google plus">
</div>
Not all social sharing buttons are created equal, some have more functionality and even old versions you can still use. Pinterest is pretty minimal. I recommend using the official buttons and full structured meta data, not doing it the way this snippet from the mockup does.
On Facebook you are not allowed to share a prefilled message according to Platform Policy 2.3: "Ensure that all content in the user message parameter is entered by the user. Don’t pre-fill. This includes posts, messages, comments, and captions."
If you want people to share on Facebook I would suggest using the Share button: https://developers.facebook.com/docs/plugins/share-button/
Every time I copy a link from popular news channels like TNW, Engadget, etc. I have a very nice sharing view (with a thumbnail that I may select, a bold title, and a short summary).
When I do the same with an article from my website, it does not look as nice.
How can I customize how my Facebook share will look?
You need to embed the Open Graph (OG) meta tags into your page to give the facebook page scraper a chance
http://davidwalsh.name/facebook-meta-tags
EDIT
the facebook debug tool should help interpret what is being read
This is my first attempt with social share buttons on a classic HTML website (not a CMS).
I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).
What I don't get is how to share a specific article only when you have ten articles displayed on the same page.
All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons).
How would I achieve that?
Thank you.
(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)
I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.
The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.
When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.
In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).
When I paste a friend's wordpress site url in a facebook comment, I see the following extra text (I've changed the url for anonymity) The home page of the wordpress blog is titled "Home"
For some reason facebook adds the extra lines in i.e. where it says "You may use these HTML tags and ... " or perhaps the wordpress generated html get incorrectly parsed/referenced in the facebook comments browser.
I have zero wordpress experience but do understand CMS concepts well. Any help on how to resolve this will be much appreciated by my friend. I can disclose the url if its really needed to resolve the issue. I decided to try posting the question with an anonymous url first, just in case this is a known, encountered-before issue.
Wondering if the facebook graph-api has anything to do with this? (FB graph-api is not my forte either as I'm more into iOS development)
Home
http://mywordpressfoo.net/
You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title="">
<b> <blockquote cite=""> <cite> <code> <del datetime="">
<em> <i> <q cite=""> <strike> <strong>
It sounds like your friend's blog does not have OpenGraph tags. Facebook uses these to determine how URLs display when posted on their site (e.g. YouTube URLs display embedded videos, Flickr URLs photos, etc.).
You can find more information about the metatags that Facebook supports in their OpenGraph documentation. Your friend will probably want to make individual posts "Articles", while the homepage should be a "Blog" or a "Website".
Depending on your friend's competency with editing WordPress templates, they might find it easier to integrate Facebook's official WordPress plugin, which includes support for OpenGraph tags.