I have tried og:image meta tag as given here https://developers.facebook.com/docs/plugins/like-button. This seem to support one image for one page, and facebook seem to be assuming that you need one share button in one html page.
Also, a similar looking question - Multiple Facebook, Twitter share buttons in one page with custom image and title does not answer custom image to each of the multiple share buttons in page. Here's how I'm adding og:image for each insertion. Below snippet is in the loop.
Thanks a ton for the help in advance.
<div class="row">
<div class="col-sm-12">
<% #map_url = ('http://maps.google.com/?q='.to_s + #user.address.to_s) %>
<small><%= link_to #user.address, #map_url, target: "_blank", style: 'color:#0645AD;' %>
</small>
<% #facebook_comment_url = ('https://wobbleapp.in/users/'.to_s + #user.id.to_s) %>
<meta property="fb:app_id" content="XXXXXXXXXX" />
<meta property="og:url" content= <% #facebook_comment_url%> />
<meta property="og:image" content="https://d2l5nbch64gdxx.cloudfront.net/uploads/user/image/47287/upload_image.jpeg" />
<meta property="og:description" content="Potholes in your locality!" />
<div class="fb-like pt-2"
data-href= <%= #facebook_comment_url %>
data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<div
class="fb-comments"
data-href= <%= #facebook_comment_url %> ></div>
</div>
</div>
</div>
You need to have one webpage (eg. http://example.com/) to have the FB share button script and html tags, as per Multiple Facebook, Twitter share buttons in one page with custom image and title
Then you need each image webpage (eg. http://example.com/image/1) to have the Open Graph meta tags, as per https://developers.facebook.com/docs/sharing/opengraph/using-objects#objectapi
You do not put the <meta property="..."> tags on the same page as the FB share button script and tags. This is what WizKid and CBroe were trying to explain in the comments.
Related
i need to add to my website a share-feature.
this php page should allow users to share my webiste on the social network, but i need to set a custom url, title, description and image.
i have try with addthis share buttons, but i m not sure that is possibile to fully customize the buttons... right?
there are other services like that? or in my case is better to add share button with facebook api, twitter api,..?
this is the addthis share code:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xx"></script>
You can set a custom title, url and description by specifying addthis:title, addthis:url and addthis:description tags in you toolbox HTML like this:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description">
However, Facebook and some other services don't respect the values sent to them and scrape your page for og:title, og:url and og:description tags. So to be safe, specify the above in your AddThis code and also specify the same values for your og tags. You can read more about the og tags here:
http://www.addthis.com/blog/2012/09/27/debugging-sharing-to-facebook
You could try this: You could try this: http://sharebuttongenerator.aakilfernandes.com/
I am trying to implement Google Plus share on my page but instead of picking title from meta tags it is picking page title from url in share dialog title. Do I need to include anything else?
<meta property="og:title" content="Title"/>
<meta property="og:description" content="Description"/>
<a href="https://plus.google.com/share?url={google.com}"/>Link</a>
According to the Google Developer Site, the example code snippet for Google Plus shared links is:
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
I've added a Addthis script to my Facebook page tab;
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:title="MY TITLE"
addthis:description="MY TITLE">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=XXXX"> </script>
I've also added the correct Title and description to the Page in my Facebook Tab but when I share, I don't get the correct Title and Description. Instead I get the default from my Facebook homepage?
As Paul points out in the second answer of this thread, facebook share links of addThis don´t work with the normal addThis parameters.
You have to add the required facebook meta tags:
<meta property="og:title" content="Your title here" />
<meta property="og:description" content="your description here" />
to your page.
You can find further tags at the facebook open graph documentation
http://developers.facebook.com/docs/opengraph/
I have a facebook app displayed on my page via an Iframe . I have included the following code on my page to generate the like and comment block .
<div class="my_page_footer">
<script src="https://connect.facebook.net/en_US/all.js"></script>
<div class="my_page_likes">
<fb:like href="<?=$canvas_url;?>" show_faces="true" width="570" font="verdana"></fb:like>
</div>
<div id="fb-root"></div>
<div class="my_page_comments">
<fb:comments href="<?=$canvas_url;?>" num_posts="5" width="570"></fb:comments>
</div>
</div>
Where the canvas url is the iframe src to my app.
However when anybody clicks on Like the iframe src url is posted on their wall instead of the name of the app or the link to the app
Any thoughts ?
Neil
Facebook figures out what to display for a URL using Open Graph headers. For example:
<meta property="og:title" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content=""..." />
You can use the OG debugger tool to figure out if your headers are setup correctly.
I am building a forum in PHP and I want users to be able to share the title and description of each post to facebook, twitter, ...etc using the Addthis social plugin. Here is the code Addthis has given me:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "
addthis:url="www.example.com"
addthis:title="Example Title"
addthis:description="Example Description">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
I was able to change the url to another I have specified, but changing the title and description has no effect. In fact, they do not even show up when I click the share button and post it to my facebook wall. What is the proper way to get this to work?
AddThis doesn't officially support all these parameters as far as I can tell (I can't find them all in once place in their documentation), so ideally you should just use OpenGraph tags on the page you are on. But in any case...
You need to specify it on the custom buttons themselves, not on the toolbox. You can even specify the image. If your buttons have to come from AddThis instead of specifying them yourself, I'm not sure.
<div class="addthis_sharing_toolbox">
<a class="addthis_button_facebook"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
<a class="addthis_button_twitter"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-twitter"></i>
</a>
<a class="addthis_button_linkedin"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
</div>
AddThis's documentation sucks so I just happened to run into the right things and figure this out. Enjoy!
AddThis specific recommend that you use meta tags from the Open Graph Protocol to specify what to show
We strongly recommend the page-tagging approach over passing your widget parameters to our APIs
So in your case you should have the code lie it's original:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
and change your header to include the addThis meta tags, in your example, like:
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Title" />
<meta property="og:description" content="Example Title Description" />
<meta property="og:image" content="http://www.example.com/logo.gif" />
This avoids any problem you can encounter in the Client API.
I went around and around before finding this on the AddThis website:
Setting the URL & Title to Share
...for our newest tools, use the data-url and data-title parameters...
I am using their latest code (addthis_sharing_toolbox instead of addthis_toolbox) and all I could find were people using addthis:url="" which was not working.
to avoid any error due to image,try to set image width to minimuim
<meta property="og:image" content="#TempData["image"]" />
<meta property="og:title" content="#TempData["title"]" />
<meta property="og:url" content="#TempData["url"]" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:description" content="#TempData["description"]" />
<meta name="twitter:title" content="#TempData["title"]">
<meta name="twitter:description" content="#TempData["description"]">
<meta name="twitter:image" content="#TempData["image"]">
<meta name="twitter:card" content="summary_large_image">
<meta charset="utf-8" />
added in page where inline toolbox is needed
<div class="addthis_inline_share_toolbox"></div>
added widget.js in layout/master page before closing body tag
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=yourpubID"></script>
</body>
***** if any error below checking on information will be helpful ****
check if any redirect happen , then meta tag information should be presented on that page as well,
e.g if "Facebook Sharing Debugger" redirect page to any login page then meta tag required on login page as well
check how your source code look like (https://developers.facebook.com/tools/debug/ ---> Scraped URL)
check on below url, if any error in meta tag
https://developers.facebook.com/tools/debug/ (click on scrape again to see updated changes)
https://cards-dev.twitter.com/validator
https://www.linkedin.com/post-inspector/inspect/