开发者

Addthis: Changing Description, Title, and Url being sent

开发者 https://www.devze.com 2023-03-29 22:51 出处:网络
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 give

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 开发者_C百科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/
0

精彩评论

暂无评论...
验证码 换一张
取 消