This is for a wordpress site, but it could be for any. I want a like button at the top of the page to 'like' the whole site. I also want a like button at the end of a post to like that post.
Ok, I get that I can create two iframe buttons, using just the site url and the post url. What i dont get is how to set up the meta tags. eg, the image field would be different (site logo vs. post image)
Furthermore, I can imagine that it would be usefull to have even more like buttons, eg on a page that listed several posts, a like button on each. I realize that too many iframes will slow or stop the browser.
Mostly i just need 2 buttons, with 2 sets of info.
Yes you can add two like buttons.
for site url button set up meta tags in your home page.
for post url set up meta tags in your post page.
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
How do I make posts on a new page on my tumblr? For instance, my home page is just omyn.tumblr.com, where all my normal reblogs go. But I also have a page there with the URL: omyn.tumblr.com/journey
How do I make a post that posts to that page only? I don't really care if it goes on my home page at the same time it goes on my "/journey" page, so long as it at least shows up there.
There are a few ways to achieve this, both rely on Tumblr Pages.
One Post Only - Standard Layout
To show only one post, pick standard layout:
Add a page (via the customize screen), and pick standard layout.
Set the url to journey.
Add content to the page body.
The standard layout, use the Text Post Type, and the page body will render as if it was a Text Post.
Multiple Posts - Redirect
To show multiple posts, pick redirect:
Any post you want to show on your journey page, tag with journey.
omyn.tumblr.com/tagged/journey will display posts tagged journey.
Add a page (via the customize screen), and pick redirect.
Set the url to journey and redirect to omyn.tumblr.com/tagged/journey.
omyn.tumblr.com/journey will now show posts tagged journey.
These posts will still show up on the Index Page. It is possible to hide them using CSS or Javascript.
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).
I know that the 'send' button gets the content data from the og meta tags so my initial thought is that it's not possible and you can only share the entire page itself. Ideally I want to be able to send different sections of the page individually, each with their own descriptions.
So wondering if there is a way to have multiple 'send' buttons on a single page but with custom descriptions for each?
You could simulate this by having the buttons point to different URLs, each with separate meta tags, then redirect users that land on any of those URLs back to the 'main' URL - you can identify when it's Facebook crawling for the meta tags because the user agent will be the same each time, and redirect anyone else.
So, I've searched and searched this site before posting this question -- I know there is a lot of facebook like questions -- but I can't find an answer to mine.
I have a page VERY similar to Mashable.com. They have multiple teaser articles with LIKE buttons next to each. When you click the LIKE button, you see the article thumbnail, and the article description.
I already have this set-up and it works EXCEPT for the thumbnail and description. They are wrong or not showing up at all. How can I make sure these LIKE buttons are pulling the correct thumbnails and descriptions for each of my articles.
(They are not using Open Graph I don't think, because Mashable.com has no facebook meta tags (and even if they did, the meta tags only specify one thumbnail image, and one title, and one link).
Can anyone tell me how to customise the thumbnails and descriptions for each individual news story?
Thank you!
The href in each like button needs to point to the full URL of that article, which needs to have a full set of open graph meta tags.
Run the (article) page through the debugger at http://developers.facebook.com/tools/debug to make sure the correct tags are present and being detected by Facebook's crawler.
The crawler will fall back to using tags and other non-Open Graph meta tags if there aren't a full set present, but the behaviour in that case isn't easy to debug, especially in relation to the images.
Mashable's like buttons are pointing at page which do have open graph meta tags by the way, e.g. https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmashable.com%2F2011%2F10%2F28%2Fsteve-jobs-tributes%2F