In page addthis share links within a blog feed - share

I'm wondering if anyone could advise. I've already implemented addthis share links into the pages on my website and its working great.
However I am currently building a blog page for the site where I want to include a share link on the list item, I've tried inserting the code, but when you want to share it its pulling in the page title rather the blog title.
I'm using Business Catalyst to create my site, and here is the code that I'm currently using
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-54cb9dd9530360bc" async="async"></script>
The page in question is http://www.g7g20.com/live

If you'd like to change the share title or URL, you can do so by adding the data-url and data-title attributes to the div. For example:
<div class="addthis_sharing_toolbox" data-url="http://www.example.com/blog-post-you-want-to-share" data-title="My blog post title"></div>
http://support.addthis.com/customer/portal/articles/125634-setting-the-url-title-to-share

Related

Website Facebook share show in carousel post format

Background
Lately, Facebook added a "carousel" ad format, showing multiple slides in a sponsored post. This is now available for non-business users too.
Facebook example of a carousel ad format
Meta annotation
I am looking for a way to "annotate" my website in a way that it will be showing a carousel in a Facebook post when the url is used in a post. Currently I am using Open Graph (og) meta tags for annotation.
HTML share link
Besides that, I'm looking for a way to add multiple "carousel slides" to a Facebook share link. Currently I am using the following html for Facebook share links:
<a
href="http://www.facebook.com/dialog/feed
?app_id=123
&link=http%3A%2F%2Fmy.url.com
&picture=http%3A%2F%2Fmy.url.com/img.jpg
&name=MyTitle
&caption=MyCaption
&description=MyDescription
&redirect_uri=http%3A%2F%2Fmy.url.com"
target="_blank"
>
Share on Facebook
</a>
Both ways result in the default post format. Can anyone help me with Facebook sharing in carousel format?
This is currently a feature that is being tested and it's not possible to apply for it.
Now this feature is live & when posting on a page select Image format and select carousal, you can add about 6 images to carousal & publish.

Image used for wordpress posts on Facebook

I've seen it several times on my facebook timeline where the image of a shared link is not in the post itself. Example:
https://www.facebook.com/BarakaBits/posts/1065758210116791 - Image has text on it.
screenshot
Here's the post itself: http://www.barakabits.com/2015/01/beauty-moroccos-diversity-captured-stunning-photo-series
Is this a hidden image? I'm using a wordpress blog, how can I do this? Do I need a special plugin?
Thank you in advance!
Wil
I don't know exactly what this site is doing, but you can suggest that Facebook use a specific image (not necessarily one found on the page) by using the og:image Open Graph tag. For example, something like this would go in the <head> portion of your site:
<meta property="og:image" content="http://www.barakabits.com/wp-content/uploads/2015/01/Moroccos-faces-featured-6.jpg">
As you can see from the site you referenced, you can have multiple og:image tags, and the user will be able to choose which one is displayed in the post.
Here's Facebook's guide to Open Graph tags: https://developers.facebook.com/docs/sharing/best-practices

Want the facebook comment box url dynamically assigned according to posts

I am working to create a website using wordpress. There are a number of posts in my web site. I am to add the facebook comment button that appears below every single posts in my site. For this purpose I used the facebook social plugin.
I added the codes generated at facebook developers site to my single post page file. Now the problem is: The same comments appear in every page in my posts everywhere. how can I make this a specific one .
<div class="fb-comments" data-href="http://rabindraadhikari.com" data-width="600" data-numposts="3" data-colorscheme="light"></div>
I want to change the data-href part of the code so that it assigns the url according to the page where it is displayed.
The format of the posts url belonging my site is www.domain-name.com/post-id
How can it be done??
Somewhere, I found it can be done like this but it didnt work
<div class="fb-comments" data-href="+location.href+" data-num-posts="3" data-width="470"></div>
location.href is a property from javascript, so
<script>
document.write('<div class="fb-comments" data-href="'+location.href+'" data-num-posts="3" data-width="470"></div>');
</script>

How to create custom share links for Facebook, Twitter, Google+ and Pinterest

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/

How do I add a product specific facebook share button to order confirmation page?

I've looked high and low around the web looking for an answer to my question but the answers just don't quite give me what I'm looking for...
I have an e-commerce site where I'd like to add a share button to the order confirmation page that, when clicked, shares the specific product they have just purchased.
How would I go about doing this?
Each product needs to have a unique URL in order to be shared. This is the URL that you will use when generating your share button.
When implementing a share button, you'll need the JavaScript SDK (as mentioned in the link) and once you have that, all you'll need to do is have this HTML on your page:
<div class="fb-share-button" data-href="http://your-product-url" data-type="button_count"></div>
The data-href attribute is what you want to be dynamic and swap it out for each product you want to share.